JavaScript事件設(shè)計(jì)模式

博客分類：
• JavaScript

本文章參考自：《征服Ajax Web 2.0 開(kāi)發(fā)技術(shù)詳解》為了自己日后查閱并與大家共享,。

1. 事件設(shè)計(jì)概述

    事件機(jī)制可以是程序邏輯更加清晰可見(jiàn)，在JavaScript中很多對(duì)象都有自己的事件,，如：button有onclick事件,，selcet有 onchange事件,。對(duì)于我們自己設(shè)計(jì)的類,，是否也可以有事件機(jī)制呢,？答案是肯定的,。我們可以通過(guò)事件機(jī)制，將類設(shè)計(jì)為獨(dú)立的模塊,，從而使其可以通過(guò)事 件與外通信,，提高程序的開(kāi)發(fā)效率。

2. 不帶參數(shù)的事件設(shè)計(jì)模式

    最簡(jiǎn)單的一種模式是將一個(gè)類的方法成員定義為事件,，可以借助JavaScript的基本語(yǔ)法來(lái)實(shí)現(xiàn),，通常是一個(gè)空的方法。例如：

Js代碼  

1. <script language="javascript" type="text/javascript" >  
2.   
3. function User(){  
4. }  
5. User.prototype={  
6.     show:function(){  
7.         this.onShow();//觸發(fā)onShow事件  
8.     },  
9.     onShow:function(){}//定義事件接口  
10. }  
11. var obj = new User();  
12. //創(chuàng)建obj的onShow事件處理程序  
13. obj.onShow = function(){  
14.     alert("事件觸發(fā)了");  
15. }  
16. //調(diào)用obj的show方法  
17. obj.show();  
18. </script>  

     obj.onShow 方法在類的外部被定義,，在類的內(nèi)部方法 show() 中被調(diào)用,，這就實(shí)現(xiàn)了事件機(jī)制。

    此設(shè)計(jì)模式應(yīng)用起來(lái)簡(jiǎn)單,，但有其有以下缺點(diǎn)：

• 不能夠給事件處理程序傳遞參數(shù),，原因是我們是在 show() 這個(gè)內(nèi)部方法中調(diào)用事件處理程序的，無(wú)法知道外部的參數(shù),。
• 每個(gè)事件接口只能綁定一個(gè)事件處理程序,，而內(nèi)部方法則可以使用 attachEvent 或 addEventListener 方法綁定多個(gè)處理程序,。

3. 給事件處理程序傳遞參數(shù)

    給事件處理程序傳遞參數(shù)不僅是自定義事件中存在的問(wèn)題，也是系統(tǒng)內(nèi)部對(duì)象的事件機(jī)制中存在的問(wèn)題,，因?yàn)槭录C(jī)制僅傳遞一個(gè)函數(shù)名稱,，不帶有任何參數(shù)信息，所以無(wú)法傳遞參數(shù)進(jìn)去,。例如：

Js代碼  

1. <script language="javascript" type="text/javascript" >  
2. function User(){  
3. }  
4. User.prototype={  
5.     show:function(){  
6.         this.onShow();//觸發(fā)onShow事件  
7.     },  
8.     onShow:function(){}//定義事件接口  
9. }  
10. var obj = new User();  
11. //創(chuàng)建obj的onshow事件處理程序  
12. function objOnShow(userName){  
13.     alert("hello,"+userName);  
14. }  
15. //定義username變量  
16. var userName = "plkong";  
17. //綁定obj的onshow事件  
18. obj.onShow = objOnShow;//無(wú)法將userName這個(gè)變量傳遞進(jìn)去  
19. obj.show();  
20. </script>  

  上面的程序是無(wú)法傳遞參數(shù)進(jìn)去的,，為了解決這個(gè)問(wèn)題，我們可以從相反的思維方式去考慮問(wèn)題,。不考慮怎么把參數(shù)傳遞進(jìn)去,，而是考慮如何構(gòu)建一個(gè)無(wú)需參數(shù)的事件處理程序。我們看看先看看下面的函數(shù)：

Js代碼  

1. /* 將參數(shù)的函數(shù)封裝為無(wú)參數(shù)的函數(shù) */  
2. function createFunction(obj, strFunc){  
3.     var args = [];//定義args用于存儲(chǔ)傳遞給事件處理程序的參數(shù)  
4.     if(!obj) obj = window;//如果是全局函數(shù)則obj = window;  
5.     //得到傳遞給事件處理程序的參數(shù)  
6.     for( var i = 2; i<arguments.length; i++)  
7.         args.push(arguments[i]);  
8.     //用無(wú)參函數(shù)封裝事件處理程序的調(diào)用  
9.     /* 
10.     JavaScript為函數(shù)對(duì)象定義了兩個(gè)方法：apply 和 call,， 它們的作用都是函數(shù)綁定到另外一個(gè)對(duì)象上運(yùn)行,。 
11.     */  
12.     return function(){  
13.         obj[strFunc].apply(obj, args);//將參數(shù)傳遞給指定的事件處理程序  
14.     }  
15. }  

 該方法將一個(gè)有參數(shù)的函數(shù)封裝為一個(gè)無(wú)參數(shù)的函數(shù)，不僅對(duì)全局函數(shù)適用,，作為 對(duì)象方法存在的函數(shù)也是適用的,。該方法首先接收兩個(gè)參數(shù)：obj 和 strFunc ，obj 表示事件處理程序所在的對(duì)象,； strFunc 表示事件處理程序的名稱,。程序中還利用了arguments對(duì)象（arguments是傳遞給函數(shù)的隱含參數(shù)，arguments對(duì)象存儲(chǔ)的是實(shí)際傳遞給 函數(shù)的參數(shù),，而且不局限與函數(shù)聲明所定義的形參列表,。關(guān)于arguments對(duì)象可以參考其他資料）處理第二個(gè)參數(shù)以后的隱式參數(shù)，即未定義為形參的參 數(shù),，

    例如：事件處理程序

    someObject.eventHandler = function(_arg1, _arg2){

                   //事件處理代碼

}

    應(yīng)該調(diào)用：creatFunction(someObject, "eventHander", arg1, arg2);

    這樣就返回一個(gè)無(wú)參數(shù)的函數(shù),，在返回的函數(shù)中已經(jīng)包括了傳遞進(jìn)去的參數(shù)。如果是全局函數(shù)作為事件處理程序,，事實(shí)上它是window 對(duì)象的一個(gè)方法,，所以可以傳遞window對(duì)象作為obj參數(shù)，為了更清晰一點(diǎn),，也可以指定obj為null,， creatFunction函數(shù)內(nèi)部會(huì)自動(dòng)認(rèn)為該函數(shù)是全局函數(shù)，從而自動(dòng)吧obj賦值為window,。最后完成的代碼如下：

Js代碼  

1. <script language="javascript" type="text/javascript" >  
2. /* 將參數(shù)的函數(shù)封裝為無(wú)參數(shù)的函數(shù) */  
3. function createFunction(obj, strFunc){  
4.     var args = [];//定義args用于存儲(chǔ)傳遞給事件處理程序的參數(shù)  
5.     if(!obj) obj = window;//如果是全局函數(shù)則obj = window;  
6.     //得到傳遞給事件處理程序的參數(shù)  
7.     for( var i = 2; i<arguments.length; i++)  
8.         args.push(arguments[i]);  
9.     //用無(wú)參函數(shù)封裝事件處理程序的調(diào)用  
10.     /* 
11.     JavaScript為函數(shù)對(duì)象定義了兩個(gè)方法：apply 和 call,， 它們的作用都是函數(shù)綁定到另外一個(gè)對(duì)象上運(yùn)行。 
12.     */  
13.     return function(){  
14.         obj[strFunc].apply(obj, args);//將參數(shù)傳遞給指定的事件處理程序  
15.     }  
16. }  
17. /**/  
18. function User(){  
19. }  
20. User.prototype={  
21.     show:function(){  
22.         this.onShow();//觸發(fā)onShow事件  
23.     },  
24.     onShow:function(){}//定義事件接口  
25. }  
26. var obj = new User();  
27. //創(chuàng)建obj的onshow事件處理程序  
28. function objOnShow(userName){  
29.     alert("hello,"+userName);  
30. }  
31. //定義username變量  
32. var userName = "plkong";  
33. //綁定obj的onshow事件  
34. //obj.onShow = objOnShow;//無(wú)法將userName這個(gè)變量傳遞進(jìn)去  
35. obj.onShow = createFunction(null, "objOnShow", userName);  
36. obj.show();  
37. </script>