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
    }
}

原文地址:https://www.cnblogs.com/wuguanglin/p/pubsubPattern.html

时间: 2024-10-07 19:52:44

JS设计模式(5)发布订阅模式的相关文章

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

概念 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多(一个发布,多个观察)的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 优点 1.支持简单的广播通信,当对象状态发生改变时,会自动通知已经订阅过的对象. 2.发布者与订阅者耦合性降低 缺点 创建订阅者需要消耗一定的时间和内存. 如果过度使用的话,反而使代码不好理解及代码不好维护. 代码实现 var Event = (function(){ var list = {}, // 缓

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

简介 发布-订阅模式又叫做观察者模式,他定义了一种一对多的依赖关系,即当一个对象的状态发生改变的时候,所有依赖他的对象都会得到通知. 回忆曾经 作为一名前端开发人员,给DOM节点绑定事件可是再频繁不过的事情.比如如下代码 document.body.addEventListener('click',function () { alert(2333); },false); document.body.click();//模拟点击事件 这里我们订阅了document.body的click事件,当bo

JS 设计模式之发布-订阅

1.JS ES6 定义类,并包含两个方法:subscribe(订阅).publish(发布). class PubJs { constructor () { // 订阅名称列表 this.event_list = {}; } // 订阅 subscribe (eventName, callback) { } // 发布 publish (eventName, ...args) { } } 2.编写订阅者基础逻辑: 允许订阅者订阅信息: 如果当前订阅关键字已存在,则更新订阅回调,否则,新增关键字,

设计模式--观察者模式(发布/订阅模式)

观察者模式简单实现,在主题中需要存在一个观察者的集合,存在一个 update(),状态改变的时候遍历调用观察者集合中的对象,调用update()方法实现通知.而观察者需要做的就是重写 update() 实现自己的逻辑,然后订阅主题,接收状态的改变信息. 上面说到的观察者模式 会导致每一个观察者都需要实现同一个方法 update(),这在实际开发中是很难实现的,所以可以通过委托事件的方式 ,在主题的集合中 存放的是一个 event 对象.event 包含对象的信息,调用的方法名,用到的参数等信息.

js 设计模式:观察者和发布订阅模式

总是把这两个当作同一个模式,但其实是不太一样的,现在重温一下. 观察者模式 观察者直接订阅目标,当目标触发事件时,通知观察者进行更新 简单实现 class Observer { constructor(name) { this.name = name; } update() { console.log(`${this.name} update`) } } class subject { constructor() { this.subs = []; } add(observer) { this.

JavaScript设计模式之----原生JS实现简单的发布订阅模式

第一部分: 发布订阅模式简介 发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在javascript开发中,一般用事件模型来替代传统的发布—订阅模式. 发布—订阅模式可以广泛应用于异步编程中,是一种替代传递回调函数的方案.比如,可以订阅ajax请求的error.success等事件.或者如果想在动画的每一帧完成之后做一些事情,可以订阅一个事件,然后在动画的每一帧完成之后发布这个事件.在异步编程中使用发布—订阅模式,就无需过

理解《JavaScript设计模式与开发应用》发布-订阅模式的最终版代码

最近拜读了曾探所著的<JavaScript设计模式与开发应用>一书,在读到发布-订阅模式一章时,作者不仅给出了基本模式的通用版本的发布-订阅模式的代码,最后还做出了扩展,给该模式增加了离线空间功能和命名空间功能,以达到先发布再订阅的功能和防止名称冲突的效果.但是令人感到遗憾的是最终代码并没有给出足够的注释.这让像我一样的小白就感到非常的困惑,于是我将这份最终代码仔细研究了一下,并给出了自己的一些理解,鉴于能力有限,文中观点可能并不完全正确,望看到的大大们不吝赐教,谢谢! 下面是添加了个人注释的

JS模式之发布/订阅模式

有时在JS中需要定义特定的事件,这些事件可以传递自定义参数.此时可以采用发布/订阅模式. 发布/订阅模式简单实现如下: <script type="text/javascript"> var pubsub = {}; (function($) { $.topics = {}; // 发布或广播事件 $.publish = function (topic, args) { if (!$.topics[topic]) return false; if ($.topics[top

JS的发布订阅模式

JS的发布订阅模式 这里要说明一下什么是发布-订阅模式 发布-订阅模式里面包含了三个模块,发布者,订阅者和处理中心.这里处理中心相当于报刊办事大厅.发布者相当与某个杂志负责人,他来中心这注册一个的杂志,而订阅者相当于用户,我在中心订阅了这分杂志.每当发布者发布了一期杂志,办事大厅就会通知订阅者来拿新杂志.这样在结合下面的图应该很好理解了. 其实就是将发布者和订阅者解耦了,在实际开发中,经常会遇到某个方法内处理很多的逻辑,最简单的就是直接在方法内直接写.这种是高度耦合的面向过程的写法.对于代码维护