// 先来一个构造函数function Events() { this._events = {};// 定义一个事件池,保存绑定的所有事件 this.name = "小明";}/** *
// 先来一个构造函数function Events() { this._events = {};// 定义一个事件池,保存绑定的所有事件 this.name = "小明";}/** * [on 订阅事件] * @param {String} eventName [事件名称] * @param {Function} fn [给事件添加的回调函数] * @return {null} [没有返回值] */Events.prototype.on = function(eventName,fn){ var cur = this._events[eventName];//从事件池中查找eventName if(cur){//事件池中已存在此事件,直接绑定 this._events[eventName].push(fn); }else{// 事件池中没有注册(订阅)该事件,先创建事件,再绑定回调函数 this._events[eventName] = [fn]; }}/** * [emit 触发事件,] * @param {String} eventName * @return {null} */Events.prototype.emit = function(eventName){ // 因为考虑到 有可能给绑定的事件传参,所以这里先取出所有的"传参" var args = Array.prototype.slice.call(arguments,1); var cur = this._events[eventName]; var _self = this; // 保存这里的this if(cur){ // 如果eventName事件存在 cur.forEach(function(item){// 遍历该事件绑定的回调函数 item.apply(_self,args) }) }}Events.prototype.removeListener = function(eName,fn){ // 移除 eName事件绑定的fn方法 var cur = this._events[eName]; if(cur){ this._events[eName] = this._events[eName].filter(function(item){ return item != fn;// 把fn过滤掉,其他的回调函数保存 }) }}// once 事件只绑定一次, 如果多次(emit)的时候 -> 让其只触发一次Events.prototype.once = function(eName,fn){ var _self = this; function _fn(){// 这里用到了JS中的"预处理"思想,也叫柯里化思想 fn.apply(_self,arguments); _self.removeListener(eName,_fn); } this.on(eName,_fn);}/* 用once绑定的事件,即使你多次emit,也只能触发一次 */var e = new Events();function cry(){ console.log('哭哭哭');}function eat(){ console.log('吃吃吃');}function say(){ console.log('说说说');}e.on('do',cry);e.on('do',eat);e.emit('do'); // -> 哭哭哭 吃吃吃e.removeListener('do',cry);e.emit('do') // -> 吃吃吃e.emit('do') // -> 吃吃吃 这里emit了两次,也就执行了两次e.once('say',say)e.emit('say')e.emit('say')e.emit('say')e.emit('say') // 只输出一次 "说说说"