观察者模式,又称发布-订阅模式或消息机制,定义了一种依赖关系,解决了主题对象与观察者之间功能的耦合。

通过运用观察者模式,可以解决团队开发中的模块间通讯问题,这是模块间解耦的一种可行方案。

首先,我们来把观察者对象创建处理,它有一个消息容器和三个方法,分别是订阅消息方法、发送订阅消息的方法和取消订阅消息的方法。如下:  

// 将观察者放在闭包中,当页面加载就立即执行
var Observer = (function () {
// 将消息容器做为静态私有变量,防止消息队列泄露而被篡改
var _messages = {}; return {
regist: function () {}, // 注册消息
fire: function () {}, // 发布消息
remove: function () {} // 取消消息
};
})();

现在,观察者的雏形已经出来了,我们接下来的事情就是一步步实现这三个方法。

1. 注册消息的作用是将订阅者的消息推入到消息队列中,因此我们需要接受两个参数:消息类型和相应的处理动作。

在推入到消息队列时,如果此消息不存在则应该创建一个消息类型并将该消息放入消息队列中;如果此消息存在则应该将消息执行方法推入改消息对应的执行方法队列中,这么做的目的是保证多     个模块注册同一则消息时能顺利执行。  

regist: function (type, fn) {
if (typeof _messages[type] === 'undefined') {
_messages[type] = [fn]; // 若此消息不存在,则创建一个消息容器
}
else {
_messages[type].push(fn); // 消息存在,则将动作方法推入该消息对应的动作执行序列中
}
}

2. 发布消息的功能是,当观察者发布一个消息时,会将所有订阅者订阅的消息依次执行。故应该接受两个参数:消息类型和动作执行时要传递的参数。

在执行消息动作队列之前对消息存在的校验是很有必要的,然后遍历消息执行方法队列,并依次执行。

fire: function (type, args) {
if (!_messages[type]) {
return;
}; var events = {
type: type,
args: args || {}
}; for (var i = 0, len = _messages[type].length; i < len; i++) {
_messages[type][i].call(this, args);
};
},

3. 注销消息的功能是将订阅者注销的消息从消息队列中清除掉,因此我们可以传递两个参数:消息类型和动作函数。

  如果只传递消息类型参数,则注销所有订阅此消息类型的动作函数,

  若两者都传递,则只注销此消息类型的当前传递参数的动作函数。

  当然为了避免删除消息动作时消息不存在的情况出现,对消息队列中消息的存在性校验也是很有必要的。

remove: function (type, fn) {
if (!fn) {
_messages[type] = null;
return;
}; if (_messages[type] instanceof Array) {
var i = _messages[type].length - 1;
for (; i >= 0; i--) {
_messages[type][i] === fn && _messages[type].splice(i, 1);
};
}
}

至此,观察者模式就实现完啦!可以稍微测试一下:

var fn1 = function () {
console.log(1);
}
var fn2 = function () {
console.log(2);
}
Observer.regist('test', fn1);
Observer.regist('test', fn2); Observer.fire('test'); // 1 2
Observer.remove('test', fn1);
Observer.fire('test'); // 2

JavaScript设计模式——观察者模式的更多相关文章

  1. javascript 设计模式-----观察者模式

    观察者模式在设计模式中被重点提到,因为它应用的场景非常多,而且在模块化设计当中扮演着非常重要的角色.MVC模式中最底层的就是观察者模式,当下流行的javascript框架backbone就是很好地运用 ...

  2. 读书笔记之 - javascript 设计模式 - 观察者模式

    在事件驱动的环境中,比如浏览器这种持续寻求用户关注的环境中,观察者模式是一种管理人与其任务(确切的讲,是对象及其行为和状态之间的关系)之间的关系的得力工具.用javascript的话来讲,这种模式的实 ...

  3. javascript设计模式-观察者模式

    观察者模式定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己. UML示意图: 其中的角色: Subject:主 ...

  4. javaScript设计模式--观察者模式(observer)

    观察者模式(observer):又被称为 发布-订阅者模式或者消息机制,定义了一种依赖关系,解决了主体对象与观察者之间功能耦合. 一.这样的需求 在实现自己的需求,而添加一些功能代码,但是又不想新添加 ...

  5. JavaScript 设计模式: 发布者-订阅者模式

    JavaScript 设计模式: 发布者-订阅者模式 发布者-订阅者模式 https://github.com/Kelichao/javascript.basics/issues/22 https:/ ...

  6. JavaScript设计模式与开发实践 - 观察者模式

    概述 观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做 ...

  7. JavaScript设计模式之观察者模式(学习笔记)

    设计模式(Design Pattern)对于软件开发来说其重要性不言而喻,代码可复用.可维护.可扩展一直都是软件工程中的追求!对于我一个学javascript的人来说,理解设计模式似乎有些困难,对仅切 ...

  8. 再起航,我的学习笔记之JavaScript设计模式18(观察者模式)

    观察者模式 观察者模式(Observer): 又被称为发布-订阅者模式或消息机制,定义了一种依赖关系,解决了主体对象与观察者之间功能的耦合. 创建一个观察者对象 首先我们创建一个闭包对象,让其在页面加 ...

  9. [转] JavaScript设计模式之发布-订阅模式(观察者模式)-Part1

    <JavaScript设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...

随机推荐

  1. Linux平台Boost的编译方法

    本博客(http://blog.csdn.net/livelylittlefish)贴出作 者(三二一@小鱼)相关研究.学习内容所做的笔记,欢迎广大朋友指正! Linux平台Boost的编译方法 Bo ...

  2. javascript通用函数库

    /* -------------- 函数检索 -------------- trim函数:                         trim() lTrim() rTrim() 校验字符串是否 ...

  3. const与#define、结构体对齐、函数重载name mangling、new/delete 等

    一.bool 类型 逻辑型也称布尔型,其取值为true(逻辑真)和false(逻辑假),存储字节数在不同编译系统中可能有所不同,VC++中为1个字节. 声明方式:bool result; result ...

  4. Mycat和MySQL的差别——Mycat的核心作用

    有个朋友面试的时候被问到:Mycat和MySQL的差别.我们能够把上层看作是对下层的抽象,比如操作系统是对各类计算机硬件的抽象.那么我们什么时候须要抽象?假如仅仅有一种硬件的时候,我们须要开发一个操作 ...

  5. VB命令行参数分隔, 类似C语言中的main(int argc, char* argv[])

    VB6.0为了提供命令行参数的支持,提供了Command()接口,于是通过 Command() 函数可以得到所有传入的参数,但是很不友好的是,VB的所有参数都被合在了一起,成为了一个字符串,当有多个参 ...

  6. 分享几个linux系统版本的查看命令

    发布:theboy   来源:net   [大 中 小] 查看linux系统版本的命令 有如下命令可供参考: # lsb_release -a LSB Version:    :core-3.1-ia ...

  7. dataGridViewX操作

    private void dataGridView1_RowStateChanged(object sender, DataGridViewRowStateChangedEventArgs e) { ...

  8. lua工具库penlight--03字符串

    字符串提取函数 这些方法也是从Python借鉴来的,但索引从1开始.stringx定义了一些函数如isalpha和isdigit, 用来判断字母和数字:startswith和endswith可以方便用 ...

  9. Unix系统编程()原子操作和竞争条件

    竞争状态是这样一种情形:操作共享资源的两个进程(或线程),其结果取决于一个无法预期的顺序,即这些进程获得CPU使用权的先后相对顺序. 以独占的方式创建一个文件 当同时指定了O_EXCL和O_CREAT ...

  10. linux - fpga-framebuff驱动

    * linux/drivers/video/fpga_fb.c --fpga graphics adaptor frame buffer device *  Created 16 Sep2011 *  ...