黄色电影一区二区,韩国少妇自慰A片免费看,精品人妻少妇一级毛片免费蜜桃AV按摩师 ,超碰 香蕉

初學(xué)js者對(duì)javascript面向?qū)ο蟮恼J(rèn)識(shí)分析
代碼如下:

var obj = document.getelementbyid("name");
function clickme() {
alert(this.value);
this.value += "!!!!";
alert(this.value);
}
var actionbinder = function() {//定義一個(gè)類
}
actionbinder.prototype.registerdom = function(doms) {
this.doms = doms;//注冊doms
}
actionbinder.prototype.registeraction = function(handlers) {
this.handlers = handlers;//注冊一個(gè)動(dòng)作
}
actionbinder.prototype.bind = function() {
this.doms.onclick = this.handlers
}//注冊doms的動(dòng)作
var binder = new actionbinder();//按照actionbinder的方法新建一個(gè)類
binder.registerdom(obj);
binder.registeraction(clickme);
binder.bind();

先上一段用js寫的面向?qū)ο蟮拇a，先建立一個(gè)actionbinder的類，寫法上也類似于java；因?yàn)閖s是基于html的dom對(duì)象來操作html的內(nèi)容，在類中定義一個(gè)注冊dom的方法registerdom，用prototype將該方法原型化，方便調(diào)用；另外再增加一個(gè)注冊事件的方法registeraction，也用prototype方法原型化；最后再用一個(gè)原型化的動(dòng)作bind將已注冊的dom和已注冊的事件綁定在了一起，并執(zhí)行。
再上一段原始的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>

代碼也實(shí)現(xiàn)了要的效果，對(duì)于一些簡單的應(yīng)用，上面那段效果能夠滿足，但對(duì)于比較復(fù)雜的一些程序，應(yīng)用起來就比較麻煩，代碼上寫起來也較繁瑣;如代碼片段
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>

當(dāng)然上面兩段代碼也有其他一些更簡單的寫法，總的來說還是出現(xiàn)很多冗余的代碼。
用面向?qū)ο蟮姆椒▽懢捅容^靈活，如
code
代碼如下:

<body>
<script>
window.onload = function() {
var objs = document.getelementsbytagname("input");
function clickme() {
alert(this.value);
}
var actionbinder = function() {//定義一個(gè)類
}
actionbinder.prototype.registerdom = function(doms) {
this.doms = doms;//注冊doms
}
actionbinder.prototype.registeraction = function(handlers) {
this.handlers = handlers;//注冊一個(gè)動(dòng)作
}
actionbinder.prototype.bind = function() {
this.doms.onclick = this.handlers
}//注冊doms的動(dòng)作
for (var i=0;i<objs.length;i++ ){
var binder = new actionbinder();//按照actionbinder的方法新建一個(gè)類
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>

這樣就不會(huì)有冗余的代碼，而且js邏輯上也比較清爽，對(duì)于多個(gè)事件的綁定還有待研究。
相關(guān)文章