javascript 发布订阅模式

什么是发布订阅模式

发布订阅模式是一种【一】对【多】的依赖关系。订阅者通过以某种信息为基础，在调度中心注册了相关信息，而当发布者发生状态改变时，则会通过调度中心发布一则相关通知，由调度中心统一处理，发送给订阅者。

发布订阅模式的思维： 【多】 <<=>> 以某种信息作为桥梁，调度中心根据相关信息统一处理 <<=>> 【一】

举个栗子：
你 >> 你在华为商店，订阅了华为Mate100的抢购通知 >> 抢购时间到了，华为商店会给订阅了抢购的用户发送一条短信通知 >> 你收到了抢购短信
其中的【一】(发布者)：华为商店
其中的【多】(订阅者)：订阅了抢购通知的用户，你便是【多】中的一个。

javascript 中的发布订阅模式

我们先分析一下上面栗子中，华为商城做了什么：

• 为用户提供了一个订阅的按钮 （PS：有订阅按钮，一般也有取消订阅按钮）
• 订阅之后，就会把用户相关信息存一个列表
• 抢购时间到了之后，就会自动群发一条短信通知

那么对应到 javascript 中的话：

• 有 订阅和取消订阅 的函数
• 存储了 订阅相关信息 的数据
• 有 发布通知 的函数

接下来看一下代码的实现：

<!-- 假设，假设的哈 -->
<img src='华为Mate100震撼来袭，不要99999，不要9999，只要998.jpg'/>

<button onclick="listen()">订阅抢购</button>
<button onclick="unlisten()">取消订阅</button>

// 华为商城
const huawei = {
    infoList: {}, // 存放以手机号为key的订阅信息
    /**
    * 	订阅的函数
    * phone {string} 手机号
    * backFn {Function} 收到通知的回调函数
    **/
    listen: function (phone, backFn) {
        // 以用户的手机号为key，保存回调函数
        this.infoList[phone] = backFn;
    },
    /**
    *	取消订阅函数
    * phone {string} 手机号
    **/
    unListen: function (phone) {
        delete this.infoList[phone];
    },
    /**
    *	发布函数
    *	message {any} 发布通知的信息
    **/
    publish: function (message) {
        // 通知各种订阅者
        Object.values(this.infoList).forEach(backFn => {
            backFn(tmessage);
        });
    }
};

// 当前用户信息
const user = {
    name: 'lee',
    sex: '男',
    phone: '10086'
};

// 订阅按钮
function listen() {
    huawei.listen(user.phone, function (message) {
        console.log(`用户${user.name}收到通知：`, message);
    });
}

// 取消订阅按钮
function unlisten() {
    huawei.unListen(user.phone);
}

// 假设5秒钟自动发布一次
setInterval(function () {
    huawei.publish('可以抢购啦！');
}, 5000);

// 点击 订阅抢购 按钮后，只打印出一次结果
// 打印结果，每隔五秒： 用户lee收到通知： 可以抢购啦！
// 点击 取消订阅 按钮后
// 停止打印出信息

以上的思维模式：

• 【多】>> 通过手机号 >> 订阅了抢购通知
• 【一】>> 通过手机号 >> 发布对应通知

PS：
关于发布订阅模式，其实童鞋们经常性都遇到的，只是不知道而已，那就是 javascript 事件机制。
比如：点击事件、自定义事件等等。可参考这篇文章：《javascript 常用的dom操作及源生事件》
关于发布订阅模式的应用，可参考这篇文章：《react 发布订阅模式的应用》