JavaScript 订阅与发布者模式

• 理解

  发布-订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发生改变时，所有依赖与它的对象都将得到状态改变的通知。

  发布-订阅模式由三房组成：订阅者、发布者、调度中心。订阅者把自己想订阅的事件注册到调度中心，当发布者发布该事件到调度中心，也就是该事件触发时，由调度中心统一调度订阅者注册到调度中心的处理代码。

  现实中的例子：用户（订阅者）到邮局（调度中心）订阅期刊，杂志社（发布者）定期送期刊到报刊亭。报刊亭根据自己的订阅列表将不同的期刊送给订阅过该期刊的用户。

• 实现思路

  参考 vue 的 on/emit 方法

  • 创建一个对象（类）
  • 在该对象上创建一个缓存列表
  • 新建 on 方法。该方法用来将订阅者提供的函数加到缓存列表中
  • 新建 emit 方法。发布者发布消息调用emit方法，从缓存列表中取得对应的函数并执行

• 代码实现

  • 简化实现：没有区别具体的事件类型

    调度中心对象（类）：

    ```javascript
    // event.js
    /**
    * @file 事件的订阅与发布
    * @author 甘露平
    */

    export class Event {

    constructor(eventName) {
        this._name = eventName;
        this._callBacks = [];
    }

    // 增加事件
    addHandler(cb) {
        this._callBacks.push(cb);
    }

    // 移除事件
    removeHandler(cb) {
        this._callBacks.forEach((value, index) => {
        if(value === cb) {
            this._callBacks.splice(index, 1);
        }
        });
    }

    // 针对订阅的事件进行发布
    raise(...param) {
        for (let i = 0, count = this._callBacks.length; i < count; i++) {
        this._callBacks[i](...param);
        }
    }

    // 针对异步事件进行发布并返回值
    async raiseAsync(...param) {
        let res = [];
        let reqArr = this._callBacks.map(
        async callBack => {
            return await callBack(...param);
        }
        );
        for (let i = 0; i < reqArr.length; i++) {
        res[i] = reqArr[i];
        }

        return res;
    }
    }

    ```

    订阅者：

    ```javascript
    // index.js
    import { CommandBar } from './components/CommandBar';
    import { DataList } from './components/DataList';

    const commandBar = new CommandBar();

    const loading = new Loading();

    $(() => {
        commandBar.subscribeQueryEvent(commandBarQueryHandler);
        commandBar.init();
    })

    // 命令栏查询事件
    async function commandBarQueryHandler(param) {
    // 显示待加载
    loading.show();
        try {
            const _config = {
            url: `${businessPrefix}/report/list`,
            method: 'get',
            params: param
            }
            const _tableData = await sendRequest(_config);

            // 将数据传递到表格组件进行处理
            dataList.setDataSource(_tableData.items);

            // 关闭待加载
            loading.hide();
        } catch (error) {
            // error
            loading.hide();
            // 提示信息
            layer.msg('获取数据报错');
        }
    }
    ```

    发布者：

    ```javascript
    // CommandBar.js
    import { Event } from '../../../common/event';
    export class CommandBar {

        constructor() {
            this._evQuery = new Event('CommandBar-Query');

            // dom绑定
            this._domBind();
        }
        // 命令栏组件初始化
        async init() {
            //...
        }

        // dom绑定
        _domBind() {
            // ...
        }

        // 点击查询事件
        _handleQueryClick() {
            // 命令栏进行数据的处理
            const _obj = {
            reportDate: '',
            unitCode: ''
            }
            // 发布消息
            this._evQuery.raise(_obj);
        }


        // 订阅查询事件
        subscribeQueryEvent(handler) {
            this._evQuery.addHandler(handler);
        }
    }

    ```

- 基本的发布-订阅模式类

    ```javascript
    class Event {
        constructor () {}
        // 首先定义一个事件容器，用来装事件数组（因为订阅者可以是多个）
        handlers = {}

        // 事件添加方法，参数有事件名和事件方法
        addEventListener (type, handler) {
            // 首先判断handlers内有没有type事件容器，没有则创建一个新数组容器
            if (!(type in this.handlers)) {
            this.handlers[type] = []
            }
            // 将事件存入
            this.handlers[type].push(handler)
        }

        // 触发事件两个参数（事件名，参数）
        dispatchEvent (type, ...params) {
            // 若没有注册该事件则抛出错误
            if (!(type in this.handlers)) {
            return new Error('未注册该事件')
            }
            // 便利触发
            this.handlers[type].forEach(handler => {
            handler(...params)
            })
        }

        // 事件移除参数（事件名，删除的事件，若无第二个参数则删除该事件的订阅和发布）
        removeEventListener (type, handler) {
            // 无效事件抛出
            if (!(type in this.handlers)) {
                return new Error('无效事件')
            }
            if (!handler) {
                // 直接移除事件
                delete this.handlers[type]
            } else {
                const idx = this.handlers[type].findIndex(ele => ele === handler)
                // 抛出异常事件
                if (idx === -1) {
                return new Error('无该绑定事件')
                }
                // 移除事件
                this.handlers[type].splice(idx, 1)
                if (this.handlers[type].length === 0) {
                delete this.handlers[type]
                }
            }
        }
    }
    ```        

• 参考链接

  • JavaScript 发布-订阅模式
  • JS的发布订阅模式