什么是发布订阅模式(观察者模式)?

定义:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。

主要解决:一个对象状态改变给其他对象通知的问题,而且要考虑到易用和低耦合,保证高度的协作。

何时使用:一个对象(目标对象)的状态发生改变,所有的依赖对象(观察者对象)都将得到通知,进行广播通知。

如何解决:使用面向对象技术,可以将这种依赖关系弱化。

关键代码:对于某一个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)发布订阅模式的更多相关文章

  1. js设计模式之发布/订阅模式模式

    一.前言 发布订阅模式,基于一个主题/事件通道,希望接收通知的对象(称为subscriber)通过自定义事件订阅主题,被激活事件的对象(称为publisher)通过发布主题事件的方式被通知. 就和用户 ...

  2. 浅谈js设计模式之发布 — 订阅模式

    发布 — 订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在 JavaScript开发中,我们一般用事件模型来替代传统的发布 — ...

  3. js设计模式之发布订阅模式

    1. 定义 发布-订阅模式其实是一种对象间一对多的依赖关系,当一个对象的状态发送改变时,所有依赖于它的对象都将得到状态改变的通知. 订阅者(Subscriber)把自己想订阅的事件注册(Subscri ...

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

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

  5. JS 设计模式八 -- 发布订阅者模式

    概念 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多(一个发布,多个观察)的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 优点 1 ...

  6. JS中的发布订阅模式

    一. 你是如何理解发布订阅模式的 JS中的设计模式: 单例模式:处理业务逻辑 构造原型模式:封装类库,组件,框架,插件等 类库:jQuery 只是提供了一些常用的方法,可以应用到任何的项目中,不具备业 ...

  7. JavaScript设计模式(发布订阅模式)

    发布—订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在JavaScript开发中,我们一般用事件模型来替代传统的发布—订阅模式 ...

  8. Javascript设计模式之发布-订阅模式

    简介 发布-订阅模式又叫做观察者模式,他定义了一种一对多的依赖关系,即当一个对象的状态发生改变的时候,所有依赖他的对象都会得到通知. 回忆曾经 作为一名前端开发人员,给DOM节点绑定事件可是再频繁不过 ...

  9. javascript中的设计模式之发布-订阅模式

    一.定义 又叫观察者模式,他定义对象间的依照那个一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将的到通知.在javascript中,我们一般用时间模型来替代传统的发布-订阅模式 二 ...

  10. js里的发布订阅模式及vue里的事件订阅实现

    发布订阅模式(观察者模式) 发布订阅模式的定义:它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 发布订阅模式在JS中最常见的就是DOM的事件绑定与触发 ...

随机推荐

  1. phpStudy apache 启动不了

    做  phpstudy 环境配置的时候,apache 一直启动不了,启动后又停止,80 端口也没有被占用,也下载了 vc9  运行库,还是不行,后来找了半天,中文路径的问题

  2. Python学习之旅(二十三)

    Python基础知识(22):进程和线程(Ⅰ) 1.多进程 (1)fork Python的os模块封装了常见的系统调用,其中就包括fork,可以在Python程序中轻松创建子进程 fork可以在Mac ...

  3. Redis的学习笔记

    一.Redis简介 1.关于关系型数据库和nosql数据库 关系型数据库是基于关系表的数据库,最终会将数据持久化到磁盘上,而nosql数据     库是基于特殊的结构,并将数据存储到内存的数据库.从性 ...

  4. 四则运算第三次 PSP

     

  5. Nginx之编译安装的nginx加入systemctl

    编译安装的nginx需要添加rc.local 编译安装后设置 /usr/lib/systemd/system/nginx.service [Unit] Description=nginx After= ...

  6. MOT南京站 | 卓越研发之路:锻造顶级后端系统

    代码是互联网企业信息化核心,也是众多研发团队智慧的结晶,如何将代码发挥到最大价值?如何用代码快.准.好的实现需求?相信这是很多IT从业者所困扰的问题. MOT南京站首期以『锻造顶级后端系统』为主题,我 ...

  7. 将 ASP.NET Core 2.0 项目升级至 ASP.NET Core 2.1 RC 1

    今天微软发布了 .NET Core 2.1 RC 1 ,虽然只是 Release Candidate 版,但已经可以在生产环境中使用. NET Core 2.1 RC is supported by ...

  8. 在vue项目里使用jquery

    1.NPM 安装 jQuery,项目根目录下运行以下代码 npm install jquery --save 2.webpack配置在项目根目录下的build目录下找到webpack.base.con ...

  9. 算法基础_递归_给定一个数字n,打印出所有的划分等式

    问题描述: 给定一个数字n,打印出所有的划分等式 例: n = 3 3 2+1 1+1+1 解题源代码: import java.util.Scanner; /** * 给定数字n,打印出其所有用加法 ...

  10. 图->有向无环图->求关键路径

    文字描述 与AOV-网相对应的是AOE-网(Activity on Edge)即边表示活动的网.AOE-网是一个带权的有向无环图.其中,顶点表示事件Event,弧表示活动,权表示活动持续的时间.通常, ...