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

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


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


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


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


类图如下：

wKiom1TMQR7zpi8fAAAS2ZmpwPw636.gif

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多的用户（手机号），每当有重大活动它都会给这些用户推送一条消息。


类图如下：

wKioL1TMRjPSd7wAAAAjMrzPKx4708.gif

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


Observer：女人们

ConcreteObserver：小明的媳妇儿

Subject：手机应用

ConcreteSubject：淘宝手机应用


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

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

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



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




5.Extjs中的应用举例


5.1 观察者模式


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

wKiom1TMUfDgAmnSAAFTZ7DPQ5M640.jpg



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()方法


中介者模式，类图如下：

wKiom1TMZNrw2ogvAAGbMlvC8ao296.jpg



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


wKiom1TMZebQiq8wAAH-JIpWN1w319.jpg