您的位置:首页 > Web前端 > JavaScript

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

2015-01-31 13:20 357 查看
首先,Ext JS4.2中,事件的处理分两大类。一类是,普通的事件处理,另一类是MVC结构中,Controller对所有Domain、Class、Object的事件处理。第一类采用的是观察者模式,第二类采用的是中介者模式。

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

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涉及的主要类图如下:



内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息