初学js者对javascript面向对象的理解-优快云博客

本文介绍了一种使用JavaScript面向对象编程的方式，通过自定义ActionBinder类简化DOM元素与事件处理程序的绑定过程，有效减少代码冗余。

Code
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逻辑上也比较清爽，对于多个事件的绑定还有待研究。

转载于:https://www.cnblogs.com/huashengjam/archive/2009/09/28/1575641.html