js简易版自定义事件及其应用

来源：互联网发布：歧视知乎编辑：程序博客网时间：2024/06/06 00:26

COME FROM

老话题,关于js的自定义事件,用处很多(控件控都懂的..),最明显的是实现观察者模式.

简易版代码:

 1 function Class1(){       2     }  3     Class1.prototype ={  4         //间接调用  5         evt : function(){  6             if(this.onEvt){  7                 for(i=0; i<this.onEvt.length; i++){  8                     this.onEvt[i]();    //逐个调用处理函数  9                 } 10             } 11         }, 12         //添加事件处理函数 13         attchOnEvt : function(_eventHandler){ 14             if(!this.onEvt) 15                 this.onEvt = [];    //存放事件处理函数 16             this.onEvt.push(_eventHandler); 17         }, 18         //删除 19         detachOnEvt : function(_eventHandler){ 20             this.onEvt.pop(_eventHandler); 21         }        22     } 23     24     //包装下事件处理函数,使其可以接收参数 25     function MakeFunc(obj,strFunc){ 26         var args = [];    //存放参数 27         if(!obj) 28             obj = window; 29         for(var i=2; i<arguments.length; i++){ 30             args.push(arguments[i]); 31         } 32         return function(){ 33             obj[strFunc].apply(obj,args);    //调用具体处理函数 34         } 35         36     } 37     38     //处理函数-路人甲 39     function _eventFunc(sName){ 40         console.log("i'm "+ sName); 41     } 42     43     //test 44     var obj = new Class1(); 45     obj.attchOnEvt(MakeFunc(null, "_eventFunc", "kobe")); 46     obj.evt(); 47     obj.detachOnEvt(MakeFunc(null, "_eventFunc", "kobe")); 48     obj.evt();    

主要涉及到参数传递问题,由于事件处理函数是没有参数的,所以用了个包装类将其转换了下,实现了参数的传递,主要是arguments和apply的使用.

相关

jq提供了实现自定义事件的函数.主要是bind,unbind,trigger顾名思义就是用来实现事件绑定以及触发.

比较简单,直接上代码(列子是实现观察者模式),具体使用查api

 1 //被观察对象 2 var Subject = { 3 };     4 $(Subject).bind("evtHandler",function(event,sName){ 5     console.log("i'm "+sName); 6 }) 7  8 //观察者 9 var Observer = {10     count : 011 };12 //订阅事件13 Observer.regist = function(){14     $(Subject).bind("evtHandler.Observer",function(event,sName){15                     Observer.count++;    //当订阅的事件被触发时,进行逻辑处理16                     console.log(sName +"'s count: "+Observer.count);17                     })18 } 19 Observer.regist();20 21 //触发事件22 $(Subject).trigger("evtHandler",["num1"]);

其他:关于jq的事件处理实现细节可以查看源代码,园子里有个源码分析系列的,偷懒的话可以看看.

0 0