javaScript对于发布订阅者模式的简单实现

发布订阅者模式

发布 — 订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状 态发生改变时，所有依赖于它的对象都将得到通知。在 JavaScript开发中，我们一般用事件模型 来替代传统的发布 — 订阅模式。

第一点说明发布 — 订阅模式可以广泛应用于异步编程中，这是一种替代传递回调函数的方案。 比如，我们可以订阅 ajax请求的 error 、 succ 等事件。 或者如果想在动画的每一帧完成之后做一 些事情，那我们可以订阅一个事件，然后在动画的每一帧完成之后发布这个事件。在异步编程中 使用发布 — 订阅模式，我们就无需过多关注对象在异步运行期间的内部状态，而只需要订阅感兴 趣的事件发生点。

第二点说明发布 — 订阅模式可以取代对象之间硬编码的通知机制，一个对象不用再显式地调 用另外一个对象的某个接口。发布 — 订阅模式让两个对象松耦合地联系在一起，虽然不太清楚彼 此的细节，但这不影响它们之间相互通信。当有新的订阅者出现时，发布者的代码不需要任何修 改；同样发布者需要改变时，也不会影响到之前的订阅者。只要之前约定的事件名没有变化，就 可以自由地改变它们。

另外Vue的双向数据绑定也是通过Object.defineProperty和发布订阅者模式实现的。

代码实现

下面是我对于订阅发布者模式的简单实现。

function Event(){
	//自动进行new调用
	if(!(this instanceof Event)){
		return new Event()
	}
	this.cilentList=[]
}

var fn=Event.prototype;
fn.addEventListener=function(key,fn){
	//创建当前事件队列，并将函数放到事件队列中
	this.cilentList[key]=this.cilentList[key]||[]
	this.cilentList[key].push(fn)
	return this
}

fn.trigger=function(){
	var key=Array.prototype.shift.call(arguments);
	var	fns=this.cilentList[key];
	//如果没有当前事件队列，或者为空,返回false
	if(!fns||fns.length===0){
		return false;
	}

	//依次触发事件队列内的函数
	for(var i=0,fn;fn=fns[i++];){
		fn.apply(this,arguments)
	}
	return this;
}

fn.removeEventListener=function(key,fn){
	//取得当前的事件队列
	var fns=this.cilentList[key];
	if(!fns){
		return false;
	}

	//如果没有明确移除哪个函数，就移除所有
	if(!fn){
		fns&&(fns.length=0);
	}else{
		//移除传入的函数
		for(var i=0;i<fns.length;i++){
			var _fn=fns[i];
			if(_fn===fn){
				fns.splice(i,1);
				return this;
			}
		}
	}
}
复制代码

前端小白，如有不对的地方欢迎大家指正。

转载于:https://juejin.im/post/5aed49105188253dc6129456