1. Brief
一直对Observer Pattern和Pub/Sub Pattern有所混淆，下面打算通过这两篇Blog来梳理这两种模式。若有纰漏请大家指正。
2. Use Case
首先我们来面对一个老到跌渣的故事，并以从未听说过Observer Pattern为前提。
假设要设计一个新闻订阅系统，新闻分为商业、体育和八卦3种，而查收终端有PC、移动终端等，后续还不断增加新闻种类和查收终端。
需求如上，下面我们根据OOD的方式来构建概念模型。
新闻 <- 分类新闻
终端 <- 分类终端
然后构造实体模型
// 新闻相关实体模型 class NewsType{ constructor(){} } class BusinessNewsType extends NewsType{} class SportNewsType extends NewsType{} class EntertaintmentNewsType extends NewsType{} // 终端相关实体模型 class Term{ getNews(news){} } class PCTerm extend Term{} class MobileTerm extend Term{}
接着我们关联已有经验——现实生活中的送报服务，发现用户A、用户B均订阅了A报的X早报，那么每天早上报纸刚印刷出来就会马上送到用户A和B那了。突然多了家订报有米送的Y早报，用户A和用户C跑去订阅，用户B直接就退了X早报，这时X早报为留住老用户就推送“老客户免费赠送半年X晚报”，于是用户A取消了退订的想法。
很明显 新闻订阅系统 就是线下业务直挪到线上的做法，通过分析线下业务流程我们可以找到设计方案。线下业务流程如下：
订阅：用户到报社订阅
退订：用户到报社退订
分发报纸：报社向所有订阅者分发报纸
按这思路构建 新闻订阅系统 的原型：
class NewsType{ constructor(){ this.subs = [] } /* 订阅 * @param {Term} term - 终端 * @returns {Boolean} */ sub(term){ // 排除 for(let _sub of this.subs) if(_sub === term) return false return Boolean(this.subs.push(term)) } /* 退订 * @param {Term} term - 终端 * @return {Boolean} */ unsub(term){ for(let i = 0, sub; sub = subs[i]; ++i) if(sub === term) return Boolean(this.subs.splice(i, 1)) } /* * 分发新闻 */ notify(news){ for(let sub of this.subs) sub.getNews(news) } } class BusinessNewsType extends NewsType{ pubNews(title, content){ var news = {title: title, content: content} super.notify(news) } } // definition of SportNewsType....... class PCTerm extends Term{ getNews(news){ alert(news.title + ';' + news.content) } } class MobileTerm extends Term{ getNews(news){ console.log(news.title + ';' + news.content) } } // 主程序则作为 新闻中心 与 用户交互的场所 var businessNewsType = new BusinessNewsType() var sportNewsType = new SportNewsType() var pcTerm = new PCTerm() var mobileTerm = new MobileTerm() businessNewsType.sub(pcTerm) businessNewsType.sub(mobileTerm) sportNewsType.sub(mobileTerm)
上述原型基本勾勒出新闻订阅系统中对象及其关联的方式，我们就可以在这之上再细化和优化了。而从上述是原型我们不难发现 新闻 与 终端 均可独立开发，然后在主程序中做关联即可。新闻类型 和 终端类型的增删并不会对其他已有的新闻类型和终端类型有影响，除了在主程序中增删关联外。
现在我们作个简单的分析总结：
1. 不稳定因素（新闻类型 和 终端类型）解耦 -> 最小化不稳定因素所影响的范围（范围越小，后期改动越少）；
2. 关联规则接口/契约化 -> 固化关联规则 和 关联发生的形式 便于后期维护。
这些是我面对未知问题的分析、解构方法，希望和大家一起探讨更美好的方法。
3. What Is Observer Pattern?
Observer Pattern(观察者模式)，狭义上是指Observer/Subscriber关注Observable/Subject的状态，并根据Observable/Subject的状态作出响应。广义上是指Observer/Subscriber关注Observable/Subject的状态或行为或两者兼备，并作出响应。
Roles
Observable/Subject(被观察者)：定义被观察者的公共状态和行为
ConcreteObservable(具体的被观察者)：定义具体的被观察者的状态和行为
Observer(观察者)：定义观察者的公共状态和行为
ConcreteObserver(具体的观察者)：定义具体的观察者的状态和行为
Two Methods: Push & Pull
上面第2节中的实现是由Observable/Subject来维护Observer组，那是不是只能这样呢？答案是否定的。它只是Push方式的实现，我们还可以采用Pull方式呢！
Push Model：推方式，也就是由Observable/Subject主动发起与Observer/Subscriber通信，并将自身的所有信息推给Observer/Subscriber，即使大部分信息最后都没用上。
pros: 1. 观察者实时响应被观察者的状态变化和行为状况；
cons: 1. 观察者被硬塞一些被观察者的无效信息；2. 被观察者状态变化频密，导致观察者忙于响应，消耗资源。
Pull Model：拉方式，也就是由主动Observer/Subscriber发起与Observable/Subject通信，并根据自身需要从Observable/Subject上拉去有效信息。一般通过定时器或特定事件触发执行。
pros: 1. 观察者可按需从被观察者处提取有效信息；2. 自主控制通信节奏，以免被状态频密变化的被观察者牵着鼻子走；
cons: 1. 获取被观察者状态变化上存在滞后甚至丢失的情况。
下面是Pull Model的实现方式
// Pull Model implementation
class FooNewsType{ constructor(){ this.news = [] } addNews(title, content){ this.news.push({title: title, content: content, timestamp:(+new Date())}) } } class PCTerm{ constructor(){ this.subjects = [] this.newsTiles = [] this.lastPullDate = 0 } subTo(newsType){ this.subjects.push(newType) } unsubFrom(newsType){ for(let i = 0, n; n = this.subjects[i]; ++i) if(n === newsType) return this.subjects.splice(i, 1) } // 拉数据 pull(){ for(let sub of this.subjects) for(let news of sub.news) if(news.timestamp > this.lastPullDate) this.newsTiles .push(news.title) } } // 主程序 var businessNewsType = new BusinessNewsType() var pcTerm = new PCTerm() pcTerm.subTo(businessNewsType) businessNewsType .addNews('Say Hi', 'Hello World!') // 其他代码........ pcTerm.pull()
Improvement of Push Model
针对Push Model所带来的问题1，我们可以通过增强sub函数来解决
// definition sub(term, aspect){ this.subs.push({term: term, aspect: aspect}) } notify(news){ for(let sub of this.subs) sub.term.getNews(sub.aspect && sub.aspect(news) || news) } // usage new BusinessNewsType() .sub(new PCTerm() , (news)=>{ return news.title })
针对问题2，我们可以通过 定时推送通知 + 溢出通知 的方式解决，不过具体还是看业务需求咯
constructor(interval = 100, ceiling = 5){ this.ceiling = ceiling this.timer = setInterval(()=>{ if (!this.pools.length || !this.subs.length) return for(let sub of this.subs) for(let n of news) sub.term.getNews(sub.aspect && sub.aspect(n) || n) }, interval) } notify(news){ this.pools.push(news) if (this.pools.length < this.ceiling) return var news = this.pools.splice(0, this.pools.length) for(let sub of this.subs) for(let n of news) sub.term.getNews(sub.aspect && sub.aspect(n) || n) }
Specific Implementation Problems —— Making sure Subject state is self-consistent before notification
就是确保Subject状态变化完成后，再通知Subscriber。反例如下：
notify(news){ for(let sub of this.subs) sub.term.getNews(sub.aspect && sub.aspect(news) || news) // 发生在通知观察者之后 news.title = 'changed' }
相当于为每次Subject状态的整体变化打个版本号，然后将属于该版本的Subject状态发送给Subscriber，之后的状态变化就属于下一个版本了。
4. Diff Between Observer Pattern and Pub/Sub Pattern
两者区别主要体现在以下2点
1. 耦合度
Observer Pattern: Subscriber 和 Subject 两者感知对方的存在，但不受对方的具体实现 和 数目 所限制 => 弱依赖。关联规则内置在Subscriber 或 Subject中。
Pub/Sub Pattern: Publisher 和 Subscriber 两者相互间毫无存在感，通过Message Broker关联两种角色，并且将关联规则藏进Message Broker中。
2. 影响范围
Observer Pattern作为Design Pattern存在，而Pub/Sub Pattern则作为Architecture Pattern存在，明显Observer Pattern的影响范围较小。也就是说在采用Pub/Sub Pattern时，需要更谨慎。
5. We Used Observer Pattern Already
其实我们现在用到很多框架、类库均采用了Observer Pattern，如MVC和Event Mechanism等。
MVC中M(odel)作为观察者，而V(iew)作为被观察者；
而Event Mechanism则是更为典型的Observer Pattern，C#在语法层面(event关键字)，而Java通过内置类库对其提供支持。
6. Conclusion
洋洋洒洒写了这么多，若有纰漏请大家指正，谢谢！
尊重原创，转载请注明来自：http://www.cnblogs.com/fsjohnhuang/p/4627487.html ^_^肥子John
7. Thanks
http://wiki.jikexueyuan.com/project/javascript-design-patterns/observer-pattern.html
http://www.joezimjs.com/javascript/javascript-design-patterns-observer/
http://www.oodesign.com/observer-pattern.html