js 发布-订阅者模式

た入场券 2022-10-31 10:57 160阅读 0赞

/**
     * 发布-订阅模式
     * bw 2020/07/29
     */
    const Event = {
        regsiter:{},
        on: function(name, method, target){
            if (!this.regsiter.hasOwnProperty(name)) {
                this.regsiter[name] = [];
            }else{
                let idx = this.regsiter[name].findIndex(ele => ele.target == target)
                // 同名 同this 直接删除
                if (idx != -1) {
                    this.regsiter[name].splice(idx, 1)
                }
            }
            this.regsiter[name].push({ callback: method, target: target });
        },
    
        emit: function(name) {
            if (this.regsiter.hasOwnProperty(name)) {
                let handlerList = this.regsiter[name];
                let handler = handlerList[0];
                let args = [];
                for (let j = 1; j < arguments.length; j++) {
                    args.push(arguments[j]);
                }
                return handler.callback.apply(this, args);
            }
        },
        off: function(name, target){
            if (this.regsiter.hasOwnProperty(name)) {
                let idx = this.regsiter[name].findIndex(ele => ele.target == target)
                // 抛出异常事件
                if (idx === -1) {
                    return new Error('无该绑定事件')
                }
                // 移除事件
                this.regsiter[name].splice(idx, 1)
                if (this.regsiter[name].length === 0) {
                    delete this.regsiter[name]
                }
            }
        },
    };
    export default Event;

如果是在全局使用 最好有一个单例

import Event from './event'
    const global = global || {};
    global.event = Event;
    export default global;

使用先引入（路径自己修改）

import global from './global/global'

global.event.on('testBtn', this.testBtn.bind(this), this);

触发

//不带参数
    global.event.emit('testBtn');
    
    //带入参数
    global.event.emit('testBtn',{
                        test:111111
                    });
    
    global.event.emit('testBtn',2222);

删除

global.event.off('testBtn', this);