Javascript观察者模式-优快云博客

如果想让多个对象都具有观察者发布订阅的功能，我们可以定义一个通用的函数，然后将该函数的功能应用到需要观察者功能的对象上，代码如下：

var observer = {
	//订阅
	addSubscriber: function(callback) {
		this.subscriber[this.subscriber.length] = callback;
	},
	//发布
	publish: function(what) {
		for(var i = 0; i < this.subscriber.length; i++) {
			if(typeof this.subscriber[i] == 'function') {
				this.subscriber[i](what);
			}

		}
	},
	//取消发布
	removeSubscriber: function(callback) {
		for(var i = 0; i < this.subscriber.length; i++) {
			if(this.subscriber[i] == callback) {
				delete this.subscriber[i];
			}
		}
	},
	//将对象o具有观察者功能，注入
	make: function(o) {
		for(var i in this) {
			o[i] = this[i];
		}
		o['subscriber']=[];

	}
}

然后订阅1个对象blogger，使用observer.make方法将这个对象具有观察者功能，代码如下：

var blogger = {
	recommend: function(id) {
		var msg = "dudu推荐了帖子" + id;
		this.publish(msg);
	}
};
//---设置发布者
observer.make(blogger);

我们来看看make后的blogger

输入图片说明

那么这里的blogger里面就注入了observer对象里面的方法。

使用方法就比较简单了，订阅不同的回调函数，以便可以注册到不同的观察者对象里（也可以同时注册到多个观察者对象里）：

//------------------------------订阅者
var tom = {
	read: function(what) {
		console.log('tom看见了:' + what);
	}
}
var mm = {
	show: function(id) {
		var msg = 'mm看见了：' + id;
		console.log(msg);
	}
}

//------------添加订阅者
blogger.addSubscriber(tom.read);
blogger.addSubscriber(mm.show);
//-----------发布
blogger.recommend(12); //调用发布
//-----------取消订阅
console.log('mm取消订阅');
blogger.removeSubscriber(mm.show);
//-----------发布
blogger.recommend(34);//调用发布

那么结果就是这样：订阅了的订阅者都能收到发布者发布的信息

输入图片说明