学习JavaScript有三个月了，发现公司现有的JavaScript编程模式有很大的问题，而最大的问题是，似乎大家OO编程的思想在这里消失了，而jQuery成了一个神奇无比的精灵，想要什么，$像个魔法，打个“."就有了。而正是这种直接面向DOM编程的模式，让我这个搞后台编程的人深感困惑和诧异。
我一直在想，既然JavaScript是基于对象的，为什么我们的程序员会舍去OO编程的思想，而直接在DOM上编程呢，估计这是一种思维定势（table布局思想的延续，一切先要有DOM），又或者是对JavaScript理解的偏差（JavaScript只适合做一些小的诸如动画，表单检查等工作），又或者是对jQuery的迷恋以致迷信（我发现只要说自己会点JavaScript的就没有不会jQuery的，包括大学刚毕业的，当然除我之外，我才学JavaScript,更不懂jQuery），又或者还有其它我这个才开始学JavaScript的人所不知道的原因，但不管怎么说，我都觉得直接面向DOM的编程模式体现的是一种非OO的编程思想，而且随着项目的进展，这种编程思想带来的是无边噩梦。
来看看，这两种编程思想的不同(以下段代码的结果完全一样)：
需求：一个Button，click做某个action, mouse over/out时有不同的外观展现。
1)面向DOM编程：
<html>
<head>
<style>
#myButton {
position:absolute;
left:50px;
top:50px;
width:100px;
height:50px;
border:1px solid #000000;
background-color:#ffffff;
}
</style>
<script>
// 全局方法
var btnClick = function(){
alert(this.innerHTML);
};
// 全局方法
var btnMouseOver = function(){
this.style.backgroundColor = "#FF0000";
};
// 全局方法
var btnMouseOut = function(){
this.style.backgroundColor = "#FFFFFF";
};
var init = function(){
// 需要获得DIV的实例，jQuery的作用在这种情形下就是的一个选择器
var myButton = document.getElementById("myButton");
// 绑定事件
myButton.onclick = btnClick;
myButton.onmouseover = btnMouseOver;
myButton.onmouseout = btnMouseOut;
};
</script>
</head>
<body onload="init();">
<div id="myButton">Hello World</div>
</body>
</html>
|
在这段代码中，我们可以看到，代表Button的div，在DOM中已经事先创建好了，就等着绑上一些JavaScript的逻辑。这样的编程模式是很多书本向web程序员展现JavaScript魅力常用的例子。但对于有OO编程思想的程序员来说，总是怪怪的。下面我们再看OO的编程模式。
2)面向对象编程：
<html>
<head>
<style>
#myButton {
position:absolute;
left:50px;
top:50px;
width:100px;
height:50px;
border:1px solid #000000;
background-color:#ffffff;
}
</style>
<script>
/**
* 我们知道JavaScript事件handler的this是指向
* 响应事件的DOM元素，所以需要一个特殊的技巧将this
* 指向封装业务逻辑的对象。
*/
Function.prototype.bind = function(thi$){
var _method = this;
return function(e){
var array = [e || window.event];
return _method.apply(thi$, array);
};
};
// 定义对象
var Button = function(id){
// 对象自己握着自己的div，还需要jQuery干嘛？
this.div = document.createElement("div");
this.div.id = id;
this.div.innerHTML = "Hello World";
// 对象方法
this.btnClick = function(){
alert(this.div.innerHTML);
};
// 对象方法
this.btnMouseOver = function(){
this.div.style.backgroundColor = "#FF0000";
};
// 对象方法
this.btnMouseOut = function(){
this.div.style.backgroundColor = "#FFFFFF";
};
// 绑定事件
this.div.onclick = this.btnClick.bind(this);//this.btnClick;
this.div.onmouseover = this.btnMouseOver.bind(this);//this.btnMouseOver;
this.div.onmouseout = this.btnMouseOut.bind(this);//this.btnMouseOut;
};
var init = function(){
// 创建对象实例
var myButton = new Button("myButton");
document.body.appendChild(myButton.div);
};
</script>
</head>
<body onload="init();">
</body>
</html>
|
在面向对象的编程模式中，会按照OO的思想抽象一个Button对象(MVC中的M)出来，这个对象里握着代表其View的div,而click,mouseover,mouseout这些事件的行为封装成这个Button对象的业务逻辑。这里我们再次体会到OO封装的意义，而面向DOM的编程，是没有任何封装的思想在里面的。如果，存在大量这样的Button, 我们可以想象，面向DOM编程的代码会变得如何的丑陋和难以维护。
上面的例子，也许很简单，但足以说明OO的编程思想依然是可以贯彻到JavaScript的编程中的，只要你忘掉jQuery，抽象出你的M, 你就可以面向M来编程了，同时对于真正掌握了OO思想的其它程序员来说，即使不懂JavaScript，也可以很轻松的理解，甚至维护使用OO思想的JavaScript代码。
阅读(2129) | 评论(1) | 转发(0) |
