js簡易版自定義事件及其應用

老話題,關於js的自定義事件,用處很多(控件控都懂的..),最明顯的是實現觀察者模式.

簡易版代碼:

function Class1(){      
    } 
    Class1.prototype ={ 
        //間接調用 
        evt : function(){ 
            if(this.onEvt){ 
                for(i=0; i<this.onEvt.length; i++){ 
                    this.onEvt[i]();    //逐個調用處理函數 
                } 
            } 
        }, 
        //添加事件處理函數 
        attchOnEvt : function(_eventHandler){ 
            if(!this.onEvt) 
                this.onEvt = [];    //存放事件處理函數 
            this.onEvt.push(_eventHandler); 
        }, 
        //刪除 
        detachOnEvt : function(_eventHandler){ 
            this.onEvt.pop(_eventHandler); 
        }        
    } 
    
    //包裝下事件處理函數,使其可以接收參數 
    function MakeFunc(obj,strFunc){ 
        var args = [];    //存放參數 
        if(!obj) 
            obj = window; 
        for(var i=2; i<arguments.length; i++){ 
            args.push(arguments[i]); 
        } 
        return function(){ 
            obj[strFunc].apply(obj,args);    //調用具體處理函數 
        } 
        
    } 
    
    //處理函數-路人甲 
    function _eventFunc(sName){ 
        console.log("i'm "+ sName); 
    } 
    
    //test 
    var obj = new Class1(); 
    obj.attchOnEvt(MakeFunc(null, "_eventFunc", "kobe")); 
    obj.evt(); 
    obj.detachOnEvt(MakeFunc(null, "_eventFunc", "kobe")); 
    obj.evt();    

主要涉及到參數傳遞問題,由於事件處理函數是沒有參數的,所以用了個包裝類將其轉換了下,實現了參數的傳遞,主要是arguments和apply的使用.

 

相關

jq提供了實現自定義事件的函數.主要是bind,unbind,trigger顧名思義就是用來實現事件綁定以及觸發.

比較簡單,直接上代碼(列子是實現觀察者模式),具體使用查api

//被觀察對象
var Subject = {
};    
$(Subject).bind("evtHandler",function(event,sName){
    console.log("i'm "+sName);
})

//觀察者
var Observer = {
    count : 0
};
//訂閱事件
Observer.regist = function(){
    $(Subject).bind("evtHandler.Observer",function(event,sName){
                    Observer.count++;    //當訂閱的事件被觸發時,進行邏輯處理
                    console.log(sName +"'s count: "+Observer.count);
                    })
} 
Observer.regist();

//觸發事件
$(Subject).trigger("evtHandler",["num1"]);

 

其他:關於jq的事件處理實現細節可以查看源代碼,園子里有個源碼分析系列的,偷懶的話可以看看.