观察者模式和中介者模式的区别(以ExtJS 的事件处理为例)
2015-01-31 13:20
357 查看
首先,Ext JS4.2中,事件的处理分两大类。一类是,普通的事件处理,另一类是MVC结构中,Controller对所有Domain、Class、Object的事件处理。第一类采用的是观察者模式,第二类采用的是中介者模式。
这两种模式,非常容易搞混淆。他们都是为了解决消息传递的问题。
3. 中介者模式涉及两个概念,中介和客户。它解决的是客户之间消息传递的问题。中介者的场景,类似于扣扣群或者中介所。
扣扣群场景:全班同学都加入同一个群,这样A同学想找B聊天,只需要在扣扣群里@B + 聊天内容即可。
中介所场景:A客户去中介所注册{'一室一厅','600每月'},B客户可以通过中介所找到所有{'一室一厅','600每月'}消息的客户,跟他们通信。
类图如下:
![](http://s3.51cto.com/wyfs02/M01/59/3D/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多的用户(手机号),每当有重大活动它都会给这些用户推送一条消息。
类图如下:
![](http://s3.51cto.com/wyfs02/M01/59/3A/wKioL1TMRjPSd7wAAAAjMrzPKx4708.gif)
此图有个疑问,就是State是什么作用?
Observer:女人们
ConcreteObserver:小明的媳妇儿
Subject:手机应用
ConcreteSubject:淘宝手机应用
小明的媳妇儿安装淘宝手机app,也就是
淘宝手机app就记录下了小明媳妇儿的手机号
当淘宝有优惠活动的时候,淘宝手机app会就通知所有的媳妇儿们
参考:http://www.dofactory.com/net/observer-design-pattern
5.Extjs中的应用举例
5.1 观察者模式
ExtJS的观察者模式的定义方式,刚好和上面的是相反的,而且实现方式也比较简单。类图如下:
![](http://s3.51cto.com/wyfs02/M02/59/3D/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()方法
中介者模式,类图如下:
![](http://s3.51cto.com/wyfs02/M02/59/3E/wKiom1TMZNrw2ogvAAGbMlvC8ao296.jpg)
5.3 综合来说,Controller涉及的主要类图如下:
![](http://s3.51cto.com/wyfs02/M00/59/3E/wKiom1TMZebQiq8wAAH-JIpWN1w319.jpg)
这两种模式,非常容易搞混淆。他们都是为了解决消息传递的问题。
3. 中介者模式涉及两个概念,中介和客户。它解决的是客户之间消息传递的问题。中介者的场景,类似于扣扣群或者中介所。
扣扣群场景:全班同学都加入同一个群,这样A同学想找B聊天,只需要在扣扣群里@B + 聊天内容即可。
中介所场景:A客户去中介所注册{'一室一厅','600每月'},B客户可以通过中介所找到所有{'一室一厅','600每月'}消息的客户,跟他们通信。
类图如下:
![](http://s3.51cto.com/wyfs02/M01/59/3D/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多的用户(手机号),每当有重大活动它都会给这些用户推送一条消息。
类图如下:
![](http://s3.51cto.com/wyfs02/M01/59/3A/wKioL1TMRjPSd7wAAAAjMrzPKx4708.gif)
此图有个疑问,就是State是什么作用?
Observer:女人们
ConcreteObserver:小明的媳妇儿
Subject:手机应用
ConcreteSubject:淘宝手机应用
小明的媳妇儿安装淘宝手机app,也就是
淘宝手机app就记录下了小明媳妇儿的手机号
当淘宝有优惠活动的时候,淘宝手机app会就通知所有的媳妇儿们
参考:http://www.dofactory.com/net/observer-design-pattern
5.Extjs中的应用举例
5.1 观察者模式
ExtJS的观察者模式的定义方式,刚好和上面的是相反的,而且实现方式也比较简单。类图如下:
![](http://s3.51cto.com/wyfs02/M02/59/3D/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()方法
中介者模式,类图如下:
![](http://s3.51cto.com/wyfs02/M02/59/3E/wKiom1TMZNrw2ogvAAGbMlvC8ao296.jpg)
5.3 综合来说,Controller涉及的主要类图如下:
![](http://s3.51cto.com/wyfs02/M00/59/3E/wKiom1TMZebQiq8wAAH-JIpWN1w319.jpg)
相关文章推荐
- java事件处理机制(自定义事件)/观察者模式
- 委托、Lambda表达式、事件系列06,使用Action实现观察者模式,体验委托和事件的区别
- Java设计模式_观察者模式&事件处理机制
- ExtJS要利用观察者模式 去实现自定义的事件
- struct和class的区别 观察者模式 https连接 点击button收到点击事件,中间发生了什么
- 对象间的联动——观察者模式与Java事件处理(五)
- 观察者模式和事件监听模式的区别
- extjs的tree的使用(拖动、动态载入json数据、拖动后的事件处理)
- 传统javascript事件模型实现观察者模式
- Adapter模式在J2SE事件处理中的应用
- Adapter模式在J2SE事件处理中的应用
- javascript事件处理在IE和FireFox中的区别
- 观察者模式,事件,委托
- 〖ExtJS〗之事件处理实例
- 观察者模式---C#中的事件
- 观察者模式----C#中的事件
- Adapter模式在J2SE事件处理中的应用
- [原创] 利用OBserve模式实现相关类的事件自动处理
- 讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
- Adapter模式在J2SE事件处理中的应用