观察者模式与发布-订阅模式

观察者模式（Observer）观察者模式：一个对象（主体）根据它维护的一个对象列表（观察者），自动通知它们状态的任何变化。（举例说明，电商平台关注（订阅）一家店铺（发布者）的鞋子，当鞋子上架之后店铺就会发送消息给用户（订阅者）；用户（订阅者）可以通过取消订阅来取消推送消息接收。）实际上是：主体对观察者传递消息通知，观察者必须将该消息通知订阅到触发事件对象上。关系链： 目标 <— 继承 — 具体目标（发布者）< – 订阅 – 调度观察者 — > 具体观察者（订阅者） — 继承 —> 观察者具体代码实现：//观察者列表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(){ // 自定义行为 };}发布-订阅模式发布订阅模式：观察者模式也可以说是发布订阅模式，然而发布订阅模式与观察者模式不同之处就在于，添加了一个中介（调度中心）来避免发布者和订阅者之间产生依赖关系。关系链： 订阅者（数量不限） — 订阅 —> 调度中心 <— 发布 — 发布者（不直接发布） 两种模式的区别：观察两种模式其实发现，模式的基本思想是一致的，仅仅是在调度是否是直接调度上有所不同。观察者模式是由具体目标直接调度的（eg: dom操作）；而发布订阅模式是在调度中心调度，发布者与订阅者不产生依赖。具体代码实现：var pubsub = {};(function(myObject) { // Storage for topics that can be broadcast // or listened to var topics = {}; // An topic identifier var subUid = -1; // Publish or broadcast events of interest // with a specific topic name and arguments // such as the data to pass along myObject.publish = function( topic, args ) { if ( !topics[topic] ) { return false; } var subscribers = topics[topic], len = subscribers ? subscribers.length : 0; while (len–) { subscribers[len].func( topic, args ); } return this; }; // Subscribe to events of interest // with a specific topic name and a // callback function, to be executed // when the topic/event is observed myObject.subscribe = function( topic, func ) { if (!topics[topic]) { topics[topic] = []; } var token = ( ++subUid ).toString(); topics[topic].push({ token: token, func: func }); return token; }; // Unsubscribe from a specific // topic, based on a tokenized reference // to the subscription myObject.unsubscribe = function( token ) { for ( var m in topics ) { if ( topics[m] ) { for ( var i = 0, j = topics[m].length; i < j; i++ ) { if ( topics[m][i].token === token ) { topics[m].splice( i, 1 ); return token; } } } } return this; };}( pubsub ));参考文献：《Learning JavaScript Design Patterns》