JS发布订阅模式
JS发布订阅模式
boogoogle 发表于1年前
JS发布订阅模式
  • 发表于 1年前
  • 阅读 27
  • 收藏 4
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: 简单回忆一下"发布-订阅"模式怎么写的
// 先来一个构造函数
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') // 只输出一次 "说说说"

共有 人打赏支持
粉丝 11
博文 87
码字总数 25968
×
boogoogle
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: