Loading...
墨滴

鲸墨

2021/10/08  阅读:37  主题:蔷薇紫

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

什么是发布/订阅模式?

发布/订阅模式,这个模式将一个模块作为中间人,这个中间人将发布者和订阅者联系到一起。发布者通过这个中间人发布方法,所有的订阅者可以通过这个读取到发布者发布的内容。

实现一个发布/订阅模式

const Event = (function(){
    // 设置事件对象
    let events = {}

    // 定义发布者事件

    // Evt 为发布的内容 , handler 为对应的处理方法
    function On( Evt , handler){
    // 在事件对象中创建一个以发布内容为键的属性,
        events[Evt] = []
    // 在以发布内容的数组中设置对应的处理方法
        events[Evt].push({
            handler: handler
        })
    }

    // 订阅者执行发布者定义的方法

    function Execute( evt, args){
        // 判断事件对象中有没有发布Evt内容
        if (!events[evt]) {
            console.log("没有找到相关内容!");
            return
        }else{
            for (let i = 0, max = events[evt].length; i < max; i++) {
                // 获取到发布Evt内容的事件并执行
                events[evt][i].handler(args)
            }
        }

    }

    // 取消已发布的内容

    function Off(evt) {
        if (!events[evt]) {
            console.log("没有这个方法!")
            return
        }else{
            events[evt] = undefined
        }

    }

    return {
        On,
        Execute,
        Off
    }
})()

// 立即执行函数可在浏览器加载过程中被执行

// 发布一个方法
Event.On("hi",function( val ){
    console.log("hi " + val);
})

// Jack订阅这个方法

Event.Execute("hi""Jack"); // hi Jack

// Arther订阅这个方法
Event.Execute("hi""Arthur");//hi Arthur

// 取消已发布的方法

Event.Off("hi");

// Jack再次订阅这个方法

Event.Execute("hi""Jack"); // 没有找到相关内容

总结

简单的发布/订阅者模式: 实现了发布者发布内容,订阅者接受发布的内容。

鲸墨

2021/10/08  阅读:37  主题:蔷薇紫

作者介绍

鲸墨