设计模式之观察者模式
介绍
观察者模式是软件设计模式的一种。在此种模式中，一个目标对象维持一系列依赖于它（观察者）的对象，将有关状态的任何更新自动通知给他们。
观察者设计模式定义了对象间的一种一对多的依赖关系，以便一个对象的状态发生变化时，所有依赖于它的对象都得到通知并自动刷新。
使用观察者模式的好处：
1、支持简单的广播通信，自动通知所有已经订阅过的对象。方便各种状态的管理。
2、页面载入后目标对象很容易与观察者存在一种动态关联，增加了灵活性。
3、目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。
实现方式
观察者模式有很多实现方式，从根本上说，该模式必须包含两个角色：观察者和目标。目标和观察者是基类，目标提供维护观察者的一系列方法，观察者提供更新接口。具体观察者和具体目标继承各自的基类，然后具体观察者把自己注册到具体目标里，在具体目标发生变化时候，调度观察者的更新方法。
具体实现代码：
if (!Array.prototype.forEach) { Array.prototype.forEach = function (fn, thisObj) { var scope = thisObj || window; for (var i = 0, j = this.length; i < j; ++i) { fn.call(scope, this[i], i, this); } }; } if (!Array.prototype.filter) { Array.prototype.filter = function (fn, thisObj) { var scope = thisObj || window; var a = []; for (var i = 0, j = this.length; i < j; ++i) { if (!fn.call(scope, this[i], i, this)) { continue; } a.push(this[i]); } return a; }; } //扩展函数扩展对象 function extend(obj, extension){ for(var key in obj){ extension[key] = obj[key] } } //观察者目标 function ObserverSubject(){ this.observerList = []; } ObserverSubject.prototype.addObserver = function(observer){ this.observerList.push(observer) }; ObserverSubject.prototype.removeObserver = function(observer){ this.observerList = this.observerList.filter(function(el) { return el !== observer }); } ObserverSubject.prototype.notify = function(context){ this.observerList.forEach(function(el, index) { el.update(context) }); } //观察者对象 function Observer() { this.update = function(content){ } } var observerSubjectIns = {}; extend(new ObserverSubject(),observerSubjectIns) var ob1 = new Observer(); ob1.update = function(content){ console.log('ob1 收到通知：' + content) } var ob2 = new Observer(); ob2.update = function(content){ console.log('ob2 收到通知：' + content) } observerSubjectIns.addObserver(ob1); observerSubjectIns.addObserver(ob2); observerSubjectIns.notify('吃饭'); observerSubjectIns.removeObserver(ob2); observerSubjectIns.notify('吃饭');
与发布（Publish）/订阅（Subscribe）模式的的区别
在很多地方，包括百度百科中，都把观察者（Observer）模式等同于发布（Publish）/订阅（Subscribe）模式
两者都在功能上都实现广播通知，但是两者还是存在着差异。我们先来看发布（Publish）/订阅（Subscribe）模式的定义
订阅者把自己想订阅的事件注册到调度中心，当该事件触发时候，发布者发布该事件到调度中心（顺带上下文），由调度中心统一调度订阅者注册到调度中心的处理代码。
代码实现
var pubsub = {}; (function(q){ var topics = {}, subUid = -1; //发布广播事件 q.publish = function(topic,args){ if(!topics[topic]){ return false; } var subscribers = topics[topic], length = subscribers.length; while(length --){ subscribers[length].func(args); } } //通过特定的名称和回到函数订阅事件 q.subscribe = function(topic,func){ if(!topics[topic]){ topics[topic] = []; } var token = (++subUid).toString(); topics[topic].push({ token : token, func: func }) return token; } //通过特定的引用取消订阅 q.unsubscribe = function(token){ for(var m in topics){ var item = topics[m] if(item){ for(var i = 0 , length = item.length ; i < length ; ++ i){ if(item[i].token === token){ item.splice(i, 1); return token; } } } } return this; } })(pubsub) var sub1 = pubsub.subscribe('reader',function(content){ console.log('小明订阅购买' + content) }) var sub2 = pubsub.subscribe('reader',function(content){ console.log('小红订阅购买' + content) }) var sub3 = pubsub.subscribe('daily',function(content){ console.log('小红订阅购买' + content) }) pubsub.publish('reader','读者') pubsub.unsubscribe(sub1); pubsub.publish('reader','读者') pubsub.publish('daily','日报')
我们举个例子：
订阅刊物，我们有两种形式，一种方式是我们直接向刊物的发行单位订阅，这时候，我们需要知道这个发行单位，发行单位同时也必须知道读者，这样才能在在新一期的刊物发行的时候送到读者手里。
另外一种方式，我们直接向附近的报刊亭订阅。这种方式我们不需要关注发行单位，同时发行单位也不必知道订阅者是谁。当新一期刊物发行后，直接送到报刊亭，再由报刊亭统一的送达到读者手上。
第一种方式就是观察者模式，而第二种方式就是发布/订阅模式
总结
虽然两种模式都存在订阅者和发布者（具体观察者可认为是订阅者、具体目标可认为是发布者），但是观察者模式是由具体目标调度的，而发布/订阅模式是统一由调度中心调的，所以观察者模式的订阅者与发布者之间是存在依赖的，而发布/订阅模式则不会。
