javascript-发布订阅模式与观察者模式
2019-03-10 12:54
134 查看
设计模式”(Design Pattern)是针对编程中经常出现的、具有共性的问题,所提出的解决方法。著名的《设计模式》一书一共提出了23种模式。
发布订阅模式
它定义了一种对象间一对多的关系,多个订阅者对象将自己的“主题/事件”注册进一个目标对象,当目标对象状态发生改变时,只需要去执行对应订阅者注册的 "主题/事件" 就行了。这是一种松耦合的状态。目标对象不用关心任何订阅者的情况, 只需要发布注册在自己身上的事件就行了。
订阅者只管注册 目标对象只管发布 互不影响
代码实现:
let event = { clientList: {}, listen (key, fn) { if (!this.clientList[key]) { this.clientList[key] = [] } this.clientList[key].push(fn) // 订阅的消息添加进缓存列表 }, trigger (type, money) { let fns = this.clientList[type] if (!fns || fns.length === 0) { // 如果没有绑定对应的消息 return false } fns.forEach(fn => { fn.apply(this, [money]) }) } } // 再定义一个installEvent函数,用于给所有对象动态安装发布-订阅功能 // 如:另一家售楼处也想要这个功能,就可以调用这个注册了,不用再写多一次这段代码 let installEvent = obj => { for (let i in event) { obj[i] = event[i] } } // 给售楼处对象salesOffices动态增加发布-订阅功能 let salesOffices = {} installEvent(salesOffices) // 小明订阅信息 salesOffices.listen('squareMeter88', price => { console.log('小明,你看中的88平方的房子,价格=' + price) }) // 小光订阅信息 salesOffices.listen('squareMeter88', price => { console.log('小光,你看中的88平方的房子,价格=' + price) }) // 小红订阅信息 salesOffices.listen('squareMeter100', price => { console.log('小红,你看中的100平方的房子,价格=' + price) }) salesOffices.trigger('squareMeter88', 2000000) salesOffices.trigger('squareMeter100', 2500000)
观察者模式
观察者模式与发布订阅最大的区别是订阅者注册的是自己本身,不再是注册 “主题/事件”,当目标对象状态发生改变时,会调用自身的通知方法,从而调用注册在自身的订阅者的更新方法。
//观察者列表 function ObserverList(){ this.observerList = []; } ObserverList.prototype.add = function( obj ){ return this.observerList.push( obj ); }; ObserverList.prototype.count = function(){ return this.observerList.length; }; ObserverList.prototype.get = function( index ){ if( index > -1 && index < this.observerList.length ){ return this.observerList[ index ]; } }; ObserverList.prototype.indexOf = function( obj, startIndex ){ var i = startIndex; while( i < this.observerList.length ){ if( this.observerList[i] === obj ){ return i; } i++; } return -1; }; ObserverList.prototype.removeAt = function( index ){ this.observerList.splice( index, 1 ); }; //目标 function Subject(){ this.observers = new ObserverList(); } Subject.prototype.addObserver = function( observer ){ this.observers.add( observer ); }; Subject.prototype.removeObserver = function( observer ){ this.observers.removeAt( this.observers.indexOf( observer, 0 ) ); }; Subject.prototype.notify = function( context ){ var observerCount = this.observers.count(); for(var i=0; i < observerCount; i++){ this.observers.get(i).update( context ); } }; //观察者 function Observer(){ this.update = function(){ // ... }; }
区别:
发布订阅模式实现了更细粒度化的管理,观察者模式当目标对象状态变化时会通知所有订阅者,而发布订阅则会通过调度中心执行具体的订阅者注册的 "主题/事件",发布订阅更松耦合一些。
相关文章推荐
- javascript设计模式学习之八_发布订阅(观察者)模式
- 观察者模式 /发布-订阅(Publish/Subscribe)/模型-视图(Model/View)/源-监听器(Source/Listener)/从属者(Dependents) 模式
- 设计模式(三)观察者模式Observer(发布订阅)
- 发布订阅模式(观察者模式)
- 观察者模式(发布--订阅模式)
- 观察者模式(发布-订阅)
- JavaScript简单实现发布订阅模式
- 观察者模式(Observer)和发布(Publish/订阅模式(Subscribe)的区别
- 设计模式(二)观察者模式和发布订阅模式(Observer)
- 观察者模式 VS 发布/订阅(广播)
- 发布订阅/回调模型的核心技术——观察者模式复习总结
- 观察者模式和与发布订阅模式的区别
- 观察者模式和发布订阅模式(下)
- 设计模式初探-观察者模式(OBSERVER)又称发布-订阅(Publish-Subscribe)依赖(Dependents)
- javascript 设计模式 -- 发布/订阅模式
- 理解javascript的设计模式之发布订阅模式
- 观察者(发布-订阅)模式浅析
- 观察者模式和发布/订阅模式的区别
- 自实现观察者模式(发布/订阅模式)的一个隐藏bug
- JavaScript之发布-订阅模式