ext4 js自定义事件（白鹤翔第一季）

xiaoxiao2021-11-22 40

// 要利用观察者模式去实现自定义的事件 //1：由于浏览器他自己能定义内置的事件(click/blur...) // 我们也应该有一个类似于浏览器这样的类，这个类自己去内部定义一些事件(自定义事件) var Observable = function(){ //承装自己所定义的事件类型的 this.events = ['start','stop']; //我们应该设计一种数据类型，这种数据类型就可以去维护自定义事件类型和和相关绑定函数的关系,结构如下所示： // 'start':[fn1 ,fn2....] , // 'stop':[fn1,fn2] this.listeners = { }; }; //2:添加新的自定义事件类型： Observable.prototype.addEvents = function(eventname){ this.events.push(eventname); }; //3:为自己的事件类型绑定响应的函数(添加事件监听) Observable.prototype.addListener = function(eventname,fn){ //做一个容错的处理 if(this.events.indexOf(eventname) == -1){ this.addEvents(eventname); } //到这一步，必然存在这个事件类型了 var arr = this.listeners[eventname]; //如果当前这个函数数组不存在，那么我们要为这个事件类型绑定新添加的函数 if(!arr){ arr = [fn]; } else { //如果存在当前这个事件类型所对应的函数的数组不为空 if(arr.indexOf(fn) == -1){ arr.push(fn); } } //重新维护一下事件类型和所绑定的函数数组的关联关系 this.listeners[eventname] = arr ; }; //4:移除事件监听 Observable.prototype.removeListener = function(eventname,fn){ //如果你要移除的事件类型，在我的对象里没有被定义 if(this.events.indexOf(eventname) == -1){ return ; } //到这一步就是你要移除的事件类型是我当前对象里面存在的 var arr = this.listeners[eventname]; if(!arr){ return ; } //到这一步证明arr里面是有绑定函数的 //判断如果当前fn函数在我的函数数组里存着就移除 if(arr.indexOf(fn) != -1){ arr.splice(arr.indexOf(fn),1); } }; //5:如何让事件触发: 就是调用这个事件类型所对应的所有的函数执行即可 Observable.prototype.fireEvent = function(eventname){ //如果当前没有传递事件类型名称或者当前传递的事件类型不存在我的对象里，直接返回 if(!eventname || (this.events.indexOf(eventname) == -1)){ return ; } //到这一步一定存在这个事件 var arr = this.listeners[eventname]; if(!arr){ return ; } for(var i = 0 , len = arr.length ; i < len ; i ++){ var fn = arr[i]; fn.call(fn,this); } }; //javascript的习惯给原型对象的方法起一个简单的名字方便开发者去使用 Observable.prototype.on = Observable.prototype.addListener; Observable.prototype.un = Observable.prototype.removeListener; Observable.prototype.fr = Observable.prototype.fireEvent; //Observable 浏览器： var ob = new Observable(); //被观察者 // 子类继承Observable//观察者 var fn1 = function(){ alert('fn1....'); }; ob.on('start',fn1); var fn2 = function(){ alert('fn2....'); }; ob.on('start',fn2); //移除监听 ob.un('start',fn1); ob.fr('start'); //ob.fr('stop'); ob.on('run',function(){ alert('run....'); }); ob.fr('run'); //Ext.util.Observable 类是为了为开发者提供一个自定义事件的接口 //Ext.util.Observable //观察者模式：(报社、订阅者) 被观察者、观察者 //Ext.util.Observable 被观察者 //所有继承(混入)Ext.util.Observable类的对象(子类) 观察者

转载请注明原文地址: https://ju.6miu.com/read-678447.html

专利

最新回复(0)