javascript设计模式学习之八_发布订阅(观察者)模式
一、发布订阅模式定义
jQuery中的callbacks,defered,promise本质上就是发布订阅模式的实现。ES6的promise内部实现未开源,不了解具体机制
发布订阅模式又叫做观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。
发布—订阅模式的优点十分明显,一是可以实现时间上的解耦,二是可以实现对象之间的解耦。
发布—订阅模式的缺点也很明显,订阅者订阅一个消息后,如果该消息最后都没有发生,这个订阅者依旧会存在于内存中。
javascript中的事件机制就属于发布订阅模式的一种。
如document.body.addEventListener(),这里document.body就是事件的发布者,addEventListener就是事件发布者提供的一个订阅事件的接口方法,所有其他对象都可以调用这个方法来订阅document.body上发生的对应事件,并自定义自己的事件处理方法。
一般的发布订阅者模式中,发布者还会提供一个trigger方法,用于发布消息。
二、java中观察者模式实现
可以先看看编译型语言如java中观察者模式的实现,参见博客:
http://www.cnblogs.com/weijunqiang/p/3113828.html
在java中实现一个自己的发布—订阅模式,通常会把订阅者对象自身当作引用传入发布者对象中,同时订阅者还会提供一个诸如update(本例中是seeMail)的方法,供发布者在合适的时候调用。在Javascript中,可以使用注册回调函数的方式来代替传统的发布—订阅模式,更加简单和优雅。
三、一个通用的发布-订阅模式
var events=(function(){
var clientList={};
var listen=function(key,fn){
if(!clientList[key]){
clientList[key]=[];
}
clientList[key].push(fn);
};
var trigger=function(){
var key=[].shift.apply(arguments);
var fns=clientList[key];
if(!fns||fns.length==){
return false;
}
for(var i=;i<fns.length;i++){
fns[i].apply(this,arguments);
}
};
var remove=function(key,fn){
var fns=clientList[key];
if(!fns){
return false;
}
if(!fn){
fns.length=;
return;
}
for(var i=;i<fns.length;i++){
if(fn===fns[i]){
fns.splice(i,);
}
}
};
return{
listen:listen,
trigger:trigger,
remove:remove,
};
})(); var installEvent=function(obj){
for(var i in events){
obj[i]=events[i];
}
};//该函数可以给所有对象添加动态发布功能
四、发布——订阅模式示例(网站登录)
//现在需要实现网上商城,网站有header头部,nav导航,消息列表,购物车等,
//这些模块有一个共同的特征,需要ajax获取到用户信息之后才能进行渲染,如header显示用户头像等等 //1,实现login对象,作为发布者
var login={};
installEvent(login);
$.ajax('http://www.bobo.com',function(data){
login.trigger('loginSucc',data);
}); //各个模块监听登陆成功的消息
var header=(function(){
login.listen('loginSucc',function(data){
header.setAvatar();
});//监听登陆成功时间
return {
setAvatar:function(data){
console.log('设置header模块');
}
};
})();
var nav=(function(){
login.listen('loginSucc',function(data){
nav.setAvatar();
});
return {
setAvatar:function(data){
console.log('设置nav模块');
}
};
}();
javascript设计模式学习之八_发布订阅(观察者)模式的更多相关文章
- 学习javascript设计模式之发布-订阅(观察者)模式
1.发布-订阅模式又叫观察者模式,它定义对象之间一种一对多的依赖关系. 2.如何实现发布-订阅模式 2-1.首先指定好发布者 2-2.给发布者添加一个缓冲列表,用户存放回调函数以便通知订阅者 2-3. ...
- 理解JavaScript设计模式与开发应用中发布-订阅模式的最终版代码
最近拜读了曾探所著的<JavaScript设计模式与开发应用>一书,在读到发布-订阅模式一章时,作者不仅给出了基本模式的通用版本的发布-订阅模式的代码,最后还做出了扩展,给该模式增加了离线 ...
- [JS设计模式]:观察者模式(即发布-订阅者模式)(4)
简介 观察者模式又叫发布---订阅模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 举一个现实生活中的例子,例如小 ...
- javascript设计模式学习之十五——装饰者模式
一.装饰者模式定义 装饰者模式可以动态地给某个对象添加一些额外的职责,而不会影响从这个类中派生的其他对象.这种为对象动态添加职责的方式就称为装饰者模式.装饰者对象和它所装饰的对象拥有一致的接口,对于用 ...
- javascript设计模式学习之十二——享元模式
一.享元模式的定义及使用场景 享元模式是为了解决性能问题而诞生的设计模式,这和大部分设计模式为了提高程序复用性的原因不太一样,如果系统中因为创建了大量类似对象而导致内存占用过高,享元模式就非常有用了. ...
- javascript设计模式学习之十四——中介者模式
一.中介者模式的定义和应用场景 中介者模式的作用在于解除对象之间的紧耦合关系,增加一个中介者之后,所有对象都通过中介者来通信,而不是互相引用,当一个对象发生变化的时候,仅需要通知中介者即可.从而将网状 ...
- 观察者模式(Observer)和发布-订阅者模式(Publish/Subscribe)区别
观察者模式:定义一对多的关系,让多个观察对象同时监听某一个主题对象,主题对象状态发生变化就通知所有观察者对象.所以它是由两类对像组成:Subject主题+Observer观察者.主题发布事件,观察者通 ...
- “一切都是消息”--MSF(消息服务框架)之【发布-订阅】模式
在上一篇,“一切都是消息”--MSF(消息服务框架)之[请求-响应]模式 ,我们演示了MSF实现简单的请求-响应模式的示例,今天来看看如何实现[发布-订阅]模式.简单来说,该模式的工作过程是: 客户端 ...
- “一切都是消息”--iMSF(即时消息服务框架)之【发布-订阅】模式
MSF的名字是 Message Service Framework 的简称,由于目前框架主要功能在于处理即时(immediately)消息,所以iMSF就是 immediately Message S ...
随机推荐
- OpenGL extension specification (from openGL.org)
Shader read/write/atomic into UAV global memory (need manual sync) http://www.opengl.org/registry/sp ...
- PHP 开发 APP 接口 学习笔记与总结 - APP 接口实例 [4] 首页 APP 接口开发方案 ③ 定时读取缓存方式
用于 linux 执行 crontab 命令生成缓存的文件 crop.php <?php //让crontab 定时执行的脚本程序 require_once 'db.php'; require_ ...
- 归纳整理 PHP大神的十大优良习惯
2015年03月04日11:26 来源:程序师 作者:TECHUG 编辑:覃里 查看全文 赞(0)评论(0) 分享 标签: PHP , 编程指南 , PHP开源项目 [IT168 资讯] 1.多阅读手 ...
- PHP file_get_contents函数读取远程数据超时的解决方法
PHP file_get_contents函数读取远程数据超时的解决方法 投稿:junjie 字体:[增加 减小] 类型:转载 这篇文章主要介绍了PHP file_get_contents函数读取 ...
- Rails--default_scope
Example: default_scope where("agents.deleted = ?", false)
- the core or essence of a computer
COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION The ALU is that part ...
- the basic index concept
Computer Science An Overview _J. Glenn Brookshear _11th Edition Over the years numerous variations o ...
- px_ipc_name.c
/* include px_ipc_name */ #include "unpipc.h" char * px_ipc_name(const char *name) { char ...
- yii1.1.3主从(多从)、读写分离配置
从新配置main.php片段 代码如下 ----------------------------------------------------------- 'db'=>array( 'con ...
- xcode8继续愉快的使用插件
https://github.com/inket/update_xcode_plugins https://github.com/fpg1503/MakeXcodeGr8Again xcode8增加了 ...