前端JS观察者模式（发布者--订阅者模式）

观察者模式

优点：更加解耦，支持广播通信

缺点：大量观察者，广播有性能问题

举个最简单的例子：
其中body是发布者，回调函数function是观察者。

document.body.onclick = function(){
	console.log('我是一个观察者');
}
document.body.addEventListener('click',function(){
	console.log('我也是一个观察者')
})

Observer（订阅者，观察者）

function Observer(name){
	this.name = name;
	this.update = function(context){
		// do something
	}
}

Subject（发布者）

function Subject(name){
	this.name = name;
	this.observers = [];
}
// 增加观察者
Subject.prototype.addObserver = (observer) => {
	this.observers.push(observer)
}
// 删除观察者
Subject.prototype.removeObserver = (observer) => {
	var index = this.observers.indexOf(observer);
	this.observers.splice(index, 1);
}
// 通知观察者
Subject.prototype.notify = (context) => {
	var len = this.observers.length;
	for (var i = 0; i < len; i++){
		this.observers[i].update(context);
	}
}

演示

var ob1 = new Observer('ob1');
var ob2 = new Observer('ob2');
var sub = new Subject('sub');
sub.addObserver(ob1);
sub.addObserver(ob2);
sub.notify('some context');
sub.removeObserver(ob1);