观察者模式和中介者模式的区别（以ExtJS 的事件处理为例）

1. 首先，Ext JS4.2中，事件的处理分两大类。一类是，普通的事件处理，另一类是MVC结构中，Controller对所有Domain、Class、Object的事件处理。第一类采用的是观察者模式，第二类采用的是中介者模式。

2. 这两种模式，非常容易搞混淆。他们都是为了解决消息传递的问题。

3. 中介者模式涉及两个概念，中介和客户。它解决的是客户之间消息传递的问题。中介者的场景，类似于扣扣群或者中介所。

扣扣群场景：全班同学都加入同一个群，这样A同学想找B聊天，只需要在扣扣群里@B + 聊天内容即可。

中介所场景：A客户去中介所注册{'一室一厅','600每月'}，B客户可以通过中介所找到所有{'一室一厅','600每月'}消息的客户，跟他们通信。

类图如下：

Mediator：QQ群 抽象类

ConcreteMediator：班级群QQ群 类

Colleague：用户 抽象类

ConcreteColleague：老师 类

ConcreteColleague：学生 类

• 12班QQ群 实例有一个学生列表

• 每一个学生在申请加入群的时候，12班QQ群 都会在它的学生列表里 加入该学生的姓名，同时每个学生都持有 12班QQ群 的一个引用，是类级别的引用，是全生命周期的

• 张三 可以通过 12班QQ群 send 李四 一个消息

参考：http://www.dofactory.com/net/mediator-design-pattern

4.观察者模式也涉及两个概念，观察者和目标。它解决的是观察者和众多目标之前通信的问题，而不是目标之间通信的问题。观察者的场景类似于，手机应用给顾客推送消息。注意：这里的手机应用是目标，顾客是观察者，不要搞反了（我们是目标，手机应用是观察者，我就是老这么想）。

场景描述：手机淘宝有N多的用户（手机号），每当有重大活动它都会给这些用户推送一条消息。

类图如下：

此图有个疑问，就是State是什么作用？

Observer：女人们

ConcreteObserver：小明的媳妇儿

Subject：手机应用

ConcreteSubject：淘宝手机应用

• 小明的媳妇儿安装淘宝手机app，也就是

• 淘宝手机app就记录下了小明媳妇儿的手机号

• 当淘宝有优惠活动的时候，淘宝手机app会就通知所有的媳妇儿们

参考：http://www.dofactory.com/net/observer-design-pattern

5.Extjs中的应用举例

5.1 观察者模式

ExtJS的观察者模式的定义方式，刚好和上面的是相反的，而且实现方式也比较简单。类图如下：

5.2 中介者模式

ExtJS的Controller对其他组件的事件监听采用的是中介者模式。EventDomain是中介者，定义了dispatch()等方法，Controller引用了具体的中介者domain.Global、domain.Component、domain.Store、domain.Controller，开发者也可以定义自己的domain。

• Controller通过调用EventDomain的listen()方法，注册事件监听

• Controller还mixin了Observable，就具备了事件的fireEvent功能

• EventDomain在初始化的时候monitor Controller，其实就是给Controller的fireEvent()方法添加拦截事件，导致每当Controller fireEvent的时候，都会调用EventDomain的dispatch()方法

中介者模式，类图如下：

5.3 综合来说，Controller涉及的主要类图如下：