Javascript设计模式-07-观察者模式（发布订阅模式）

Javascript设计模式 - 07 - 观察者模式（发布订阅模式）

简介

观察者模式又叫发布订阅模式，他定义了一种一对多的关系，让多个观察者对象同时监听某一个主体对象，这个主体对象发生改变时就会通知所有观察者，使得他们能够自动更新自己

提供一种抽象的策略，以便订阅者能供彼此独立的应对改变

优点

1. 可以被广泛的应用到异步编程中，是一种代替传统回调函数的方案

2. 可以取代对象之间硬编码的通知机制，一个对象不再显示的调用另外一个对象的某个接口，发布订阅模式让两个对象松耦合的联系在一起，虽然不太清楚彼此的细节，但这不影响他们之间相互通信。有新的订阅者出现时，发布者的代码不需要任何的修改，同样发布者的需求改变时，也不会影响到之前的订阅者，只要约定的事件没有变化，就可以自由的改变他们

实现步骤

1. 指定发布者
2. 给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者
3. 最后发布消息的时候，发布者会遍历这个缓存列表，依次触发里边的回调函数

一般的发布订阅

    // 定义发布平台
    function Platform () {
        // channel 用于存放不同频道的缓存列表
        this.channel = {};
        this.subId = 0;
    }

    // 
    Platform.prototype.subscribe = function (type, callback) {
        // 订阅
        if (!this.channel[type]) {
            // 没有这个类型就创建一个类型
            this.channel[type] = [];
        } 

        // 每个类型都是一个数组，存放订阅的回调和一个标识
        this.channel[type].push({
            func: callback,
            subId: this.subId 
        })

        return this.subId++;
    }

    Platform.prototype.emit = function (type, content) {
        // 发布消息
        if (!this.channel[type]) {
            return false;
        }
        this.channel[type].forEach(function (item) {
            !!item.func && item.func(type, content);
        })

    }

    Platform.prototype.unsubscribe = function (subId) {
        console.log(subId);
        var me = this;
        for (var type in me.channel) {
           if (me.channel.hasOwnProperty(type)) {
                // statement
                me.channel[type].forEach(function (item, i) {
                    Number(item.subId) === Number(subId) && me.channel[type].splice(i, 1);
                })  
           }
        }
    }


    // 实例化
    var plat = new Platform();
    var subId1 = plat.subscribe('/dev/home', function (type, content) {
        console.log(`subId1 type: ${type} content: ${content}`);
    })

    var subId2 = plat.subscribe('/dev/device', function (type, content) {
        console.log(`subId2 type: ${type} content: ${content}`);
    })

    var subId3 = plat.subscribe('/dev/home', function (type, content) {
        console.log(`subId3 type: ${type} content: ${content}`);
    })

    plat.emit('/dev/home', '/dev/home is emit!');
    // plat get type: /dev/home content: /dev/home is emit!
    // plat get type: /dev/home content: /dev/home is emit!

    plat.emit('/dev/device', '/dev/device is emit!');
    // subId2 type: /dev/device content: /dev/device is emit!

    // 取消订阅
    plat.unsubscribe(subId1);

    // 再次发布消息
    plat.emit('/dev/home', '/dev/home is emit again!');
    // subId3 type: /dev/home content: /dev/home is emit again!

全局的发布订阅

在一般的发布订阅模式中，发布者与订阅者之间还是存在一些耦合性的，如果有多个发布者，订阅者可能需要在多个发布者中注册订阅类似的事件，这样来看是一种资源的浪费，如果我们在发布者与订阅者之间增加一层中介，订阅者把请求交给中介，多个发布者都通过中介来发布信息，这样一来，订阅者不用关心消息是从哪个发布者订阅的，他只要在意是否接收到消息就可以了,为了保证订阅者、发布者都可以顺利通信，发布订阅模式可以使用一个全局对象作为中介，把订阅者和发布者联系起来。

先发布后订阅的离线消息

一般来讲我们都是先订阅一条消息，然后发布者发布，但是在某些情况下我们会遇到一个消息已经发布了，但是订阅者还没有出现，我们需要将这条消息保存下来，等到有对象订阅时，重新发布给订阅者，就像QQ离线消息一样。

操作步骤

• 新建立一个存放离线事件的堆栈
• 事件发布时如果还没有订阅者，就把发布事件的动作包裹在一个函数里，然后存到堆栈中
• 等到有对象订阅此事件时，遍历堆栈，依次执行包装函数，重新发布事件

文章列表

1. javascript设计模式 – 设计原则
2. JavaScript设计模式–高阶函数
3. Javascript 设计模式 - 01 - 原型模式
4. Javascript 设计模式 - 02 - 单例模式
5. Javascript 设计模式 - 03 - 建造者模式
6. Javascript 设计模式 - 04 - 工厂模式
7. Javascript 设计模式 - 05 - 外观模式
8. Javascript 设计模式 - 06 - 代理模式
9. Javascript 设计模式 - 07 - 观察者模式（发布订阅模式）
10. Javascript 设计模式 - 08 - 策略模式
11. Javascript 设计模式 - 09 - 命令模式
12. Javascript 设计模式 - 10 - 迭代器模式
13. Javascript 设计模式 - 11 - 职责链模式
14. Javascript 设计模式 - 12 - 适配器模式
15. Javascript 设计模式 - 13 - 模板方法
16. Javascript 设计模式 - 14 - 组合模式
17. Javascript 设计模式 - 15 - 享元模式
18. Javascript 设计模式 - 16 - 中介者模式
19. Javascript 设计模式 - 17 - 装饰者模式
20. Javascript 设计模式 - 18 - 状态模式