快捷導(dǎo)航

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

更新時(shí)間：2009年09月28日 18:45:53 作者：

初學(xué)js者對(duì)javascript面向?qū)ο蟮恼J(rèn)識(shí)分析，需要學(xué)習(xí)的朋友可以參考下。

 
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;//注冊(cè)doms 
} 
ActionBinder.prototype.registerAction = function(handlers) { 
this.handlers = handlers;//注冊(cè)一個(gè)動(dòng)作 
} 
ActionBinder.prototype.bind = function() { 
this.doms.onclick = this.handlers 
}//注冊(cè)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ì)象來(lái)操作html的內(nèi)容，在類中定義一個(gè)注冊(cè)dom的方法registerDOM，用prototype將該方法原型化，方便調(diào)用；另外再增加一個(gè)注冊(cè)事件的方法registerAction，也用prototype方法原型化；最后再用一個(gè)原型化的動(dòng)作bind將已注冊(cè)的dom和已注冊(cè)的事件綁定在了一起，并執(zhí)行。
再上一段原始的js代碼片段:
Code

復(fù)制代碼代碼如下:

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

復(fù)制代碼代碼如下:

 
<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

復(fù)制代碼代碼如下:

 
<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)然上面兩段代碼也有其他一些更簡(jiǎn)單的寫法，總的來(lái)說(shuō)還是出現(xiàn)很多冗余的代碼。
用面向?qū)ο蟮姆椒▽懢捅容^靈活，如
Code

復(fù)制代碼代碼如下:

 
<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;//注冊(cè)doms 
} 
ActionBinder.prototype.registerAction = function(handlers) { 
this.handlers = handlers;//注冊(cè)一個(gè)動(dòng)作 
} 
ActionBinder.prototype.bind = function() { 
this.doms.onclick = this.handlers 
}//注冊(cè)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è)事件的綁定還有待研究。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具