JS 设计模式之发布-订阅

1、JS ES6 定义类，并包含两个方法：subscribe（订阅）、publish（发布）。

class PubJs {
    constructor () {

        // 订阅名称列表
        this.event_list = {};
    }

    // 订阅
    subscribe (eventName, callback) {
        
    }

    // 发布
    publish (eventName, ...args) {
        
    }
}

2、编写订阅者基础逻辑：

允许订阅者订阅信息；
如果当前订阅关键字已存在，则更新订阅回调，否则，新增关键字，记录订阅回调；

class PubJs {

    constructor () {
        // 订阅名称列表
        this.event_list = {};
    }

    // 订阅
    subscribe (eventName, callback) {
        if (this.event_list[eventName]) {
            this.event_list[eventName].push(callback);
        } else {
            this.event_list[eventName] = [callback];
        }
    }

    // 发布
    publish (eventName, ...args) {
        
    }

}

3、编写发布者基础逻辑：

发布者发布关键字相关信息
订阅者们需要都能接受到信息，并执行相应的回调

class PubJs {

    constructor () {
        // 订阅名称列表
        this.event_list = {};
    }

    // 订阅
    subscribe (eventName, callback) {
        if (this.event_list[eventName]) {
            this.event_list[eventName].push(callback);
        } else {
            this.event_list[eventName] = [callback];
        }
    }

    // 发布
    publish (eventName, ...args) {
        if (this.event_list[eventName]) {
            this.event_list[eventName].map(cb => cb(...args));
        }
    }

}

4、本地验证：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习发布-订阅模式</title>
    <script src="./pub.js"></script>
</head>
<body>
    <div>
        练习发布-订阅模式
    </div>
    <script>
        const pubSub = new PubJs();
        // A订阅了SMS事件（A只关注SMS本身，而不关心谁发布这个事件）
        pubSub.subscribe('SMS', console.log);
        // B订阅了SMS事件
        pubSub.subscribe('SMS', console.log);
        // C发布了SMS事件（C只关注SMS本身，不关心谁订阅了这个事件）
        pubSub.publish('SMS', 'I published `SMS` event');
        setTimeout(() => {
            pubSub.publish('SMS', 'I published `SMS` again');
        }, 5000)
    </script>
</body>
</html>

JS 设计模式之发布-订阅

猜你喜欢