发布订阅模式

roamingcode

于 2018-08-23 10:20:45 发布

阅读量190

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript 设计模式

本文链接：https://blog.csdn.net/roamingcode/article/details/81975830

JavaScript 专栏收录该内容

71 篇文章

订阅专栏

本文介绍了一个简单的事件发布订阅模式实现。该模式包括事件绑定、触发及取消绑定等功能，适用于小型应用或学习场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

let event = {
    list: {},
    on(key, fn) {
        if (!this.list[key]) {
            this.list[key] = [];
        }
        this.list[key].push(fn);
    },
    emit() {
        let key = [].shift.call(arguments),
            fns = this.list[key];

        if (!fns || fns.length === 0) {
            return false;
        }
        fns.forEach(fn => {
            fn.apply(this, arguments);
        });
    },
    remove(key, fn) {
        // 这回我们加入了取消订阅的方法
        let fns = this.list[key];
        // 如果缓存列表中没有函数，返回false
        if (!fns) return false;
        // 如果没有传对应函数的话
        // 就会将key值对应缓存列表中的函数都清空掉
        if (!fn) {
            fns && (fns.length = 0);
        } else {
            // 遍历缓存列表，看看传入的fn与哪个函数相同
            // 如果相同就直接从缓存列表中删掉即可
            fns.forEach((cb, i) => {
                if (cb === fn) {
                    fns.splice(i, 1);
                }
            });
        }
    }
};