JavaScript最简单的发布/订阅模式

以下的是在ES6语法上构建的，非常适用于常见的应用场景

// 消息通知
// 发布/订阅模式
class YLNotificationMessages {
    constructor () {
        // 事件对象：存放事件的订阅名字和回调
        this.events = {};
    }
    
    // 订阅事件
    subscribe (eventName, callback) {
        if (!this.events[eventName]) {
            // 一个名称可以有多个订阅回调事件，所以使用数组存储回调
            this.events[eventName] = [callback];
        } else {
            // 如果该事件名称存在，则继续往该名称添加回调事件
            this.events[eventName].push(callback);
        }
    }
    
    // 发布事件
    publish (eventName, ...args) {
        this.events[eventName] && this.events[eventName].forEach(cb => cb(...args));
    }
    
    // 取消订阅事件
    unsubscribe (eventName, callback) {
        if (this.events[eventName]) {
            // 找到该回调，并移除它
            this.events[eventName].filter(cb => cb != callback);
        }
    }
}

// 注册到Window对象中
window["YLNotificationMessages"] = new YLNotificationMessages();

订阅事件

实时接收参数

window.YLNotificationMessages.subscribe("ReceiveMessages", function(data) {
  console.log("收到发布的消息了，哈哈");
  console.log(data);
});

发布事件

比如来了新消息需要通知所有的该名称的订阅者

var data = {
    "user_id": 123456,
    "user_name": "百度",
    "user_language": "en",
    "user_uuid": "8b3d1204-e2ee-11e9-9d7c-1f8e47066aae",
    "user_email": "[email protected]",
    "user_avatar": "https://baidu.com/icon.png"
};
window.YLNotificationMessages.publish("ReceiveMessages", data);