用javascript 面向对象实现 观察者模式

定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。
适用性

    1.当一个抽象模型有两个方面,其中一个方面依赖于另一方面。
      将这二者封装成独立的对象中以使它们可以各自独立地改变和复用。

    2.当对一个对象的改变需要同时改变其它对象,而不知道具体有多少对象有待改变。

    3.当一个对象必须通知其它对象,而它又不能假定其它对象是谁。
            
参与者

    1.Subject(目标)
      目标知道它的观察者。可以有任意多个观察者观察同一个目标。
      提供注册和删除观察者对象的接口。

    2.Observer(观察者)
      为那些在目标发生改变时需获得通知的对象定义一个更新接口。

    3.ConcreteSubject(具体目标)
      将有关状态存入各ConcreteObserver对象。
      当它的状态发生改变时,向它的各个观察者发出通知。

    4.ConcreteObserver(具体观察者)
      维护一个指向ConcreteSubject对象的引用。
      存储有关状态,这些状态应与目标的状态保持一致。
      实现Observer的更新接口可使自身状态与目标的状态保持一致

需求场景:模拟实现用户订阅CCTV 和 国防部报社的新闻咨询,随着用户订阅报社的变化,所有依赖报社产生新闻的对象都随着订阅信息发生变化

关键代码

function BusinessOne(name){
	this.name = name;
	//订阅者的集合
	this.subscribers = new Array();
}
//订阅者的发送消息的方法(推模式)
BusinessOne.prototype.delive = function(news){
	var self = this;
	//给每一个订阅者发送消息
	this.subscribers.forEach(
		function(fn){
			//调用接受者处理信息的函数
			fn(news,self);
		}
	)
}
//扩展公共订阅的函数,和取消订阅的函数
Function.prototype.subscribe = function(publisher){
	var that = this;
	//some 访问数组度i型并且以参数的形式传回回调函数中
	//只要至少有一次返回是true那么some就是true
	var alreadyExists = publisher.subscribers.some(
		function(el){
			//处理不能重复订阅的功能
			if(el == that){
				return;
			}
		}
	);
	//没用订阅你就可以订阅
	if(!alreadyExists){
		publisher.subscribers.push(that);
	}
	return this;
}
//取消
Function.prototype.unsubscribe = function(publisher){
	var that = this;
	publisher.subscribers = publisher.subscribers.filter(
		function(el){
			if(el !== that){
				return el;
			}
		}
	);
	return this;
};

完整的javascript 代码实现:https://github.com/sunjdk/learnvue/tree/master/doc/观察者-订阅者模式

猜你喜欢

转载自blog.csdn.net/taotaobaobei/article/details/112189421
今日推荐