初学js者对javascript面向对象的认识分析
代码如下:

var obj = document.getelementbyid("name");
function clickme() {
alert(this.value);
this.value += "!!!!";
alert(this.value);
}
var actionbinder = function() {//定义一个类
}
actionbinder.prototype.registerdom = function(doms) {
this.doms = doms;//注册doms
}
actionbinder.prototype.registeraction = function(handlers) {
this.handlers = handlers;//注册一个动作
}
actionbinder.prototype.bind = function() {
this.doms.onclick = this.handlers
}//注册doms的动作
var binder = new actionbinder();//按照actionbinder的方法新建一个类
binder.registerdom(obj);
binder.registeraction(clickme);
binder.bind();

先上一段用js写的面向对象的代码,先建立一个actionbinder的类,写法上也类似于java;因为js是基于html的dom对象来操作html的内容,在类中定义一个注册dom的方法registerdom,用prototype将该方法原型化,方便调用;另外再增加一个注册事件的方法registeraction,也用prototype方法原型化;最后再用一个原型化的动作bind将已注册的dom和已注册的事件绑定在了一起,并执行。
再上一段原始的js代码片段:
code
代码如下:

<body>
<script>
document.onload= function(){
var obj = document.getelementbyid("name");
obj.onclick = function(){alert(this.value);}
}
</script>
<input type="text" id="name" />
</body>

代码也实现了要的效果,对于一些简单的应用,上面那段效果能够满足,但对于比较复杂的一些程序,应用起来就比较麻烦,代码上写起来也较繁琐;如代码片段
code
代码如下:

<body>
<script>
document.onload= function(){
obj1 = document.getelementbyid("name1");
obj2 = document.getelementbyid("name2");
obj3 = document.getelementbyid("name3");
obj1.onclick = function(){alert(this.value);}
obj2.onclick = function(){alert(this.value);}
obj3.onclick = function(){alert(this.value);}
}
</script>
<input type="text" id="name1" value="111" />
<input type="text" id="name2" value="222" />
<input type="text" id="name3" value="333" />
</body>

或者
code
代码如下:

<body>
<script>
function clickme(){alert(this.value);}
</script>
<input type="text" id="name1" value="111" onclick="return clickme()" />
<input type="text" id="name2" value="222" onclick="return clickme()" />
<input type="text" id="name3" value="333" onclick="return clickme()" />
</body>

当然上面两段代码也有其他一些更简单的写法,总的来说还是出现很多冗余的代码。
用面向对象的方法写就比较灵活,如
code
代码如下:

<body>
<script>
window.onload = function() {
var objs = document.getelementsbytagname("input");
function clickme() {
alert(this.value);
}
var actionbinder = function() {//定义一个类
}
actionbinder.prototype.registerdom = function(doms) {
this.doms = doms;//注册doms
}
actionbinder.prototype.registeraction = function(handlers) {
this.handlers = handlers;//注册一个动作
}
actionbinder.prototype.bind = function() {
this.doms.onclick = this.handlers
}//注册doms的动作
for (var i=0;i<objs.length;i++ ){
var binder = new actionbinder();//按照actionbinder的方法新建一个类
binder.registerdom(objs[i]);
binder.registeraction(clickme);
binder.bind();
};
}
</script>
<input type="text" id="name" value="111"/>
<input type="text" id="name1" value="222"/>
<input type="text" id="name2" value="333"/>
</body>

这样就不会有冗余的代码,而且js逻辑上也比较清爽,对于多个事件的绑定还有待研究。
相关文章