JS设计模式(5)发布订阅模式
什么是发布订阅模式(观察者模式)?
定义:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。
主要解决:一个对象状态改变给其他对象通知的问题,而且要考虑到易用和低耦合,保证高度的协作。
何时使用:一个对象(目标对象)的状态发生改变,所有的依赖对象(观察者对象)都将得到通知,进行广播通知。
如何解决:使用面向对象技术,可以将这种依赖关系弱化。
关键代码:对于某一个topci用数组存放订阅者.
应用实例: 1、拍卖的时候,拍卖师观察最高标价,然后通知给其他竞价者竞价。 2、西游记里面悟空请求菩萨降服红孩儿,菩萨洒了一地水招来一个老乌龟,这个乌龟就是观察者,他观察菩萨洒水这个动作。
优点: 1、观察者和被观察者是抽象耦合的。 2、建立一套触发机制。
缺点: 1、如果一个被观察者对象有很多的直接和间接的观察者的话,将所有的观察者都通知到会花费很多时间。 2、如果在观察者和观察目标之间有循环依赖的话,观察目标会触发它们之间进行循环调用,可能导致系统崩溃。 3、观察者模式没有相应的机制让观察者知道所观察的目标对象是怎么发生变化的,而仅仅只是知道观察目标发生了变化。
使用场景:
- 一个抽象模型有两个方面,其中一个方面依赖于另一个方面。将这些方面封装在独立的对象中使它们可以各自独立地改变和复用。
- 一个对象的改变将导致其他一个或多个对象也发生改变,而不知道具体有多少对象将发生改变,可以降低对象之间的耦合度。
- 一个对象必须通知其他对象,而并不知道这些对象是谁。
- 需要在系统中创建一个触发链,A对象的行为将影响B对象,B对象的行为将影响C对象……,可以使用观察者模式创建一种链式触发机制。
注意事项: 1、避免循环引用。 2、如果顺序执行,某一观察者错误会导致系统卡壳,一般采用异步方式。
代码实现
/*
*发布-订阅模式(观察者模式)
*/
function pubsub() {
var _pubsub = {},//全局对象,即发布订阅对象
_topics = {}, // 回调函数存放的数组
_subUid = 0; // 发布方法
_pubsub.publish = function (topic) {
if (!_topics[topic]) {
return false;
}
var args = [].slice.call(arguments, 1);
setTimeout(function () {
var subscribers = _topics[topic];
for (var i = 0, j = subscribers.length; i < j; i++) {
subscribers[i].callback.apply(null, args);
}
}, 0);
return true;
};
//订阅方法
_pubsub.subscribe = function (topic, callback) {
if (!_topics[topic]) {
_topics[topic] = [];
}
var token = (++_subUid).toString();
_topics[topic].push({
token: token,
callback: callback
});
return token;
};
//退订方法
_pubsub.unsubscribe = function (token) {
for (var m in _topics) {
if (_topics[m]) {
for (var i = 0, j = _topics[m].length; i < j; i++) {
if (_topics[m][i].token === token) {
_topics[m].splice(i, 1);
return token;
}
}
}
}
return false;
}; return {
subscribe: _pubsub.subscribe,
publish: _pubsub.publish,
unsubscribe: _pubsub.unsubscribe
}
}
JS设计模式(5)发布订阅模式的更多相关文章
- js设计模式之发布/订阅模式模式
一.前言 发布订阅模式,基于一个主题/事件通道,希望接收通知的对象(称为subscriber)通过自定义事件订阅主题,被激活事件的对象(称为publisher)通过发布主题事件的方式被通知. 就和用户 ...
- 浅谈js设计模式之发布 — 订阅模式
发布 — 订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在 JavaScript开发中,我们一般用事件模型来替代传统的发布 — ...
- js设计模式之发布订阅模式
1. 定义 发布-订阅模式其实是一种对象间一对多的依赖关系,当一个对象的状态发送改变时,所有依赖于它的对象都将得到状态改变的通知. 订阅者(Subscriber)把自己想订阅的事件注册(Subscri ...
- [转] JavaScript设计模式之发布-订阅模式(观察者模式)-Part1
<JavaScript设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...
- JS 设计模式八 -- 发布订阅者模式
概念 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多(一个发布,多个观察)的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 优点 1 ...
- JS中的发布订阅模式
一. 你是如何理解发布订阅模式的 JS中的设计模式: 单例模式:处理业务逻辑 构造原型模式:封装类库,组件,框架,插件等 类库:jQuery 只是提供了一些常用的方法,可以应用到任何的项目中,不具备业 ...
- JavaScript设计模式(发布订阅模式)
发布—订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在JavaScript开发中,我们一般用事件模型来替代传统的发布—订阅模式 ...
- Javascript设计模式之发布-订阅模式
简介 发布-订阅模式又叫做观察者模式,他定义了一种一对多的依赖关系,即当一个对象的状态发生改变的时候,所有依赖他的对象都会得到通知. 回忆曾经 作为一名前端开发人员,给DOM节点绑定事件可是再频繁不过 ...
- javascript中的设计模式之发布-订阅模式
一.定义 又叫观察者模式,他定义对象间的依照那个一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将的到通知.在javascript中,我们一般用时间模型来替代传统的发布-订阅模式 二 ...
- js里的发布订阅模式及vue里的事件订阅实现
发布订阅模式(观察者模式) 发布订阅模式的定义:它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 发布订阅模式在JS中最常见的就是DOM的事件绑定与触发 ...
随机推荐
- python nose测试框架全面介绍十二 ----用例执行顺序打乱
在实际执行自动化测试时,发现我们的用例在使用同一个资源的操作时,用例的执行顺序对测试结果有影响,在手工测试时是完全没法覆盖的. 但每一次都是按用例名字来执行,怎么打乱来执行的. 在网上看到一个有意思的 ...
- python nose测试框架全面介绍十一---用例的发现
nose是怎么发现用例的??网上一大把说函数以test开头的都会自动发现,真的是这样吗???还是自己来试验下吧 首先,我们还是来看看官方文档怎么说的吧: If it looks like a test ...
- Nestjs 缓存
Docs: https://docs.nestjs.com/techniques/caching yarn add @nestjs/mongoose mongoose yarn add cache-m ...
- vue中嵌套页面 iframe 标签
vue中嵌套iframe,将要嵌套的文件放在static下面: <iframe src="../../../static/bear.html" width="300 ...
- phjp(ajax)作用知识点
1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...
- dict的基本使用
语法如下: dict1 = {'name':'huangmeiling','age':10,'address':'nanjing'} #print(dir(dict1)) # 获取到所有的key值 # ...
- 免费API 接口罗列,再也不愁没有服务器开发不了APP了(下)【申明:来源于网络】
免费API 接口罗列,再也不愁没有服务器开发不了APP了(下)[申明:来源于网络] 地址:http://mp.weixin.qq.com/s/QzZTIG-LHlGOrzfdvCVR1g
- 关于springMVC的日志管理
主要是基于在spring aop特性. 1. 创建一个系统日志的操作类,类里面提供一个方法,可以向数据库或者表中写入:访问用户名,访问IP,操作时间,访问包名,具体函数名. /** * @Name S ...
- ng2-tree
[转]https://github.com/valor-software/ng2-tree#eyes-demo demo:http://valor-software.com/ng2-tree/
- Mac系统显示隐藏文件及文件夹
显示隐藏文件 终端 输入如下命令,回车即可: defaults write com.apple.finder AppleShowAllFiles -boolean true ; killall Fin ...