復(fù)制代碼 代碼如下:
var obj = document.getElementById("name");
function clickMe() {
alert(this.value);
this.value += "!!!!";
alert(this.value);
}
var ActionBinder = function() {//定義一個(gè)類(lèi)
}
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è)類(lèi)
binder.registerDOM(obj);
binder.registerAction(clickMe);
binder.bind();
先上一段用js寫(xiě)的面向?qū)ο蟮拇a，先建立一個(gè)ActionBinder的類(lèi)，寫(xiě)法上也類(lèi)似于java；因?yàn)閖s是基于html的dom對(duì)象來(lái)操作html的內(nèi)容，在類(lè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)用，上面那段效果能夠滿(mǎn)足，但對(duì)于比較復(fù)雜的一些程序，應(yīng)用起來(lái)就比較麻煩，代碼上寫(xiě)起來(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)單的寫(xiě)法，總的來(lái)說(shuō)還是出現(xiàn)很多冗余的代碼。
用面向?qū)ο蟮姆椒▽?xiě)就比較靈活，如
Code
復(fù)制代碼 代碼如下:
body>
script>
window.onload = function() {
var objs = document.getElementsByTagName("input");
function clickMe() {
alert(this.value);
}
var ActionBinder = function() {//定義一個(gè)類(lèi)
}
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;iobjs.length;i++ ){
var binder = new ActionBinder();//按照ActionBinder的方法新建一個(gè)類(lèi)
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è)事件的綁定還有待研究。
您可能感興趣的文章:- JS常見(jiàn)疑難點(diǎn)分析之match，charAt，charCodeAt，map，search用法分析
- Javascript技術(shù)難點(diǎn)之a(chǎn)pply，call與this之間的銜接
- javascript下數(shù)值型比較難點(diǎn)說(shuō)明
- 初學(xué)js 新節(jié)點(diǎn)的創(chuàng)建 刪除 的步驟
- 初學(xué)JavaScript_03(ExtJs Grid的簡(jiǎn)單使用)
- 國(guó)外的為初學(xué)者寫(xiě)的JavaScript教程
- 走出JavaScript初學(xué)困境—js初學(xué)
- 初學(xué)JavaScript第一章
- JavaScript初學(xué)者的10個(gè)迷你技巧
- 你有必要知道的10個(gè)JavaScript難點(diǎn)
