http://addyosmani.com/resources/essentialjsdesignpatterns/book/#detailmvp

感觉二者非常像,都是pub/sub机制,如何进行区分?分别在什么不同的场景中进行应用?

  • 在Obsever模式中, 不存在封装约束的单一对象。Observer 和 Subject 必须合作才能维持约束。
  • Communication(通讯)模式由观察者和目标互联的方式决定:单一目标通常有很多观察者,有时一个目标的观察者是另一个观察者的目标
  • Mediator 和 Observer  都能促进松耦合,然后Mediator 模式通过限制对象严格通过Mediator 进行通信来实现这个个目的
  • Observer 模式创建观察者对喜爱那个,观察者对象向订阅它们的对喜爱那个发布其感兴趣的事件。

在GoF的原文中是这样描述观察者模式的:

  • One or more observers are interested in the state of a subject and register their interest with the subject by attaching themselves. When something changes in our subject that the observer may be interested in, a notify message is sent which calls the update method in each observer. When the observer is no longer interested in the subject's state, they can simply detach themselves.
  • 具体应用场景是,当subject的某个动作需要引发一系列不同对象的动作(比如你是一个班长要去通知班里的某些人),与其一个一个的手动调用触发的方法(私下里一个一个通知),不如维护一个列表(建一个群),这个列表存有你想要调用的对象方法(想要通知的人);之后每次做的触发的时候只要轮询这个列表就好了(群发),而不用关心这个列表里有谁,只用关心想让谁加入让谁退出

这个列表就叫做ObserverList,它有一些维护列表方法:

function ObserverList(){
this.observerList = [];
}
ObserverList.prototype.Add = function( obj ){};
ObserverList.prototype.Empty = function(){};
ObserverList.prototype.Count = function(){};
ObserverList.prototype.Get = function( index ){};
ObserverList.prototype.Insert = function( obj, index ){};
ObserverList.prototype.IndexOf = function( obj, startIndex ){};
ObserverList.prototype.RemoveAt = function( index ){};

而我们的subject只用关心两件事:1.维护这个列表,2.发布事件

function Subject(){
this.observers = new ObserverList();
} Subject.prototype.AddObserver = function( observer ){
this.observers.Add( observer );
}; Subject.prototype.RemoveObserver = function( observer ){
this.observers.RemoveAt( this.observers.IndexOf( observer, 0 ) );
}; Subject.prototype.Notify = function( context ){
var observerCount = this.observers.Count();
for(var i=0; i < observerCount; i++){
this.observers.Get(i).Update( context );
// 在这里假设的是列表里的每个对象都有update方法,但个人觉得这个列表里也可以是不同对象的不同方法,只要能接受当前上下文作为参数, 可以这样执行:
// subscription.callback.apply( subscription.context, args );
}
};

中介模式(Mediator Pattern)

让我们假设这样一个场景: 有一个Manager一声令下,需要让工人A和工人B开工,代码可以是这样的

Manager.start = function () {
A.work();
B.work();
}

其实还可以这么写,新增一个中介模块,这个模块有存储了Manager的常用命令比如start,stop,resume,每一个命令其实维护的也是一个列表,比如start的列表下存储了所有员工的start方法:

Mediator["start"] = [
{
name: 'A',
callback: 'work'
},
{
name: 'B',
callback: 'workAgain'
},
]

所以Manager的方法可以重写为

Manager.start = function () {
Mediator.publish('start') // publish 为触发命令函数,以此来触发start命令下维护的所有回调函数
}

代码细节就不展示了,主要体现这么一个机制,而如果某个员工要提交自己的work方法供老板调用的话,只要注册一下就好了

Mediator.subscribe('C', function callback() {});

问题是新增加一个中介模块的好处是什么?

1.低耦合!如果不是经理要让员工开始工作,是董事长怎么办,或者是部门主管怎么办,难道都要这么写

XXX.start = function () {
A.work()
B.work();
}

都要把A.work什么抄一遍?当然不是,只要给中介模块发出命令就好了,
2.模块之间不需要进行通信,只要负责广播和监听事件就好了
3.在模块化的javascript中,中介模块能提高可维护性:是否启动某个模块,有没有权限启动某个模块,异步加载某些模块,模块之间的依赖关系,某些模块启动失败了怎么办。这些边界条件都可以交给它来判断,而其他模块只关心实现自己逻辑就好了
最后打个比方,中介模块真的就像房屋中介一样!如果你是房东,你只需要下令一声“我要找人租房”,他们就自然会生成那个列表,你不用直接和房客打交道。

JavaScript 中介者模式与观察者模式有何不同?的更多相关文章

  1. javascript 中介者模式 mediator

    * player.js /** * 中介者模式 * @param {*} name 角色名称 * @param {*} teamColor 队伍颜色 */ function Player(name, ...

  2. javascript设计模式--中介者模式(Mediator)

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 设计模式-(9)中介者模式(swift)

    在对象去耦合的模式中,有两种模式:中介者模式,观察者模式 一,概念 用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. 这个 ...

  4. 中介者模式(Mediator)---行为型

    1 基础知识 定义:用一个中介对象来封装一系列的对象交互.中介者使得各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. 本质:封装交互 使用场景:(1)如果一组对象之间的 ...

  5. 再起航,我的学习笔记之JavaScript设计模式23(中介者模式)

    中介者模式 概念介绍 中介者模式(Mediator):通过中介者对象封装一系列对象之间的交互,使对象之间不再相互引用降低他们之间的耦合,有时中介者对象也可以改变对象之间的交互. 创建一个中介 中介者模 ...

  6. 深入理解JavaScript系列(36):设计模式之中介者模式

    介绍 中介者模式(Mediator),用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. 主要内容来自:http://www ...

  7. 轻松掌握:JavaScript代理模式、中介者模式

    代理模式.中介者模式 代理模式 在面向对象设计中,有一个单一职责原则,指就一个类(对象.函数)而言,应该仅有一个引起它变化的原因.如果一个对象承担了过多的职责,就意味着它将变得巨大,引起它变化的原因就 ...

  8. 《javascript设计模式与开发实践》阅读笔记(14)—— 中介者模式

    中介者模式 数个对象之间的通信全部委托一个中介者完成.适用于对象之间互相引用,关系错综复杂的情况. 什么情况下需要使用中介者模式 对象较多,且对象间会相互引用,当一个对象的某个状态改变时,得通知其他对 ...

  9. 学习javascript设计模式之中介者模式

    1.中介者模式的作用就是解除对象与对象之间的紧耦合关系.增加一个中介者对象后,所有的相关对象都通过中介者来通信,而不是互相引用,所以当一个对象发生改变时,只需要通知中介对象即可.中介者使各对象之间耦合 ...

随机推荐

  1. mysql输入密码后闪退怎么办?

    第一: 首先需要想到的是mysql的服务可能没开,首先打开mysql的服务 第二: 打开Mysql的命令行输入密码即可 第三: 登录成功 第四: 顺便验证自己安装的mysql是否成功 输入显示所有数据 ...

  2. SQL Server 批量插入数据的方法

    运行下面的脚本,建立测试数据库和表. --Create DataBase create database BulkTestDB; go use BulkTestDB; go --Create Tabl ...

  3. Android onTouch事件传递机制

    Android onTouch事件介绍: Android的触摸事件:onClick, onScroll, onFling等等,都是由许多个Touch组成的.其中Touch的第一个状态肯定是ACTION ...

  4. UItableView嵌套UICollectionView

    首先我们需要继承一下UITableView并且遵守<UITableViewDelegate,UITableViewDataSource,UICollectionViewDataSource,UI ...

  5. Android JNI HelloWorld实现

    创建一个JNIDemo的Android工程 在项目下创建一个文件夹jni.(注意必须是jni目录) 在jni目录下创建两个文件:Android.mk 和 first_jni.c(.c文件的名字可以任意 ...

  6. ORA-01033:ORACLE initialization or shutdown in progress

    借用他人的经验 客户Oracle服务器进入PL/SQL Developer时报ora-01033:oracle initializationg or shutdown in progress 错误提示 ...

  7. RUF MVC5 Repositories Framework Generator代码生成工具介绍和使用

    RUF MVC5 Repositories Framework Generator代码生成工具介绍和使用 功能介绍 这个项目经过了大半年的持续更新到目前的阶段基本稳定 所有源代码都是开源的,在gith ...

  8. HTML5手机APP开发入(5)

    HTML5手机APP开发入(5) 回顾一下 HTML5手机APP开发入(4) 如何自定义Component,directive HTML5手机APP开发入(3) 如何实现MVC的代码重构,自定义一个P ...

  9. mysql 查看正在运行的进程

    show processlist ; 显示正在运行的进程,使用Kill命令删除 kill 5260;

  10. 北京地铁月度消费总金额计算(Python版)

    最近业余时间在学习Python,这是那天坐地铁时突发奇想,想看看我这一个月的地铁费共多少钱,所以简单的构思了下思路,就直接开写了,没想到用Python来实现还挺简单的. 设计思路: 每次乘车正常消费7 ...