JS发布订阅模式

// 先来一个构造函数
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') // 只输出一次 "说说说"