非常好理解的js原生发布订阅模式

最新推荐文章于 2023-05-26 14:37:19 发布

如梦忆沧桑

最新推荐文章于 2023-05-26 14:37:19 发布

阅读量347

点赞数 1

分类专栏：前端原生js js设计模式发布订阅文章标签：发布订阅js 原生js js设计模式

本文链接：https://blog.csdn.net/qq_39617693/article/details/103235385

版权

前端同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

原生js

4 篇文章 0 订阅

订阅专栏

js设计模式发布订阅

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

</body>
<script>
    function Public() {
        this.handlers = {};
    }
    Public.prototype = {
        // 订阅事件
        on(name, fn) {
            let that = this;
            if (!(name in that.handlers)) {
                that.handlers[name] = [];
            }
            that.handlers[name].push(fn);
            return this;
        },
        // 触发事件(发布事件)
        emit(name) {
            let that = this;
            let item = Array.prototype.slice.call(arguments, 1);
            for (let i = 0; i < that.handlers[name].length; i++) {
                that.handlers[name][i].a    pply(that, item);
            }
            return that;
        },
        // 删除订阅事件
        off(name, fn) {
            let currentEvent = this.handlers[name];
            let len = 0;
            if (currentEvent) {
                len = currentEvent.length;
                for (let i = len - 1; i >= 0; i--) {
                    if (currentEvent[i] === fn) {
                        currentEvent.splice(i, 1);
                    }
                }
            }
            return this;
        }
    };

    var Publisher = new Public();

    //订阅事件a
    Publisher.on('a', function (data) {
        console.log(1 + data);
    });
    Publisher.on('a', function (data) {
        console.log(2 + data);
    });

    //触发事件a
    Publisher.emit('a', '我是第1次调用的参数');

    // Publisher.emit('a', '我是第2次调用的参数');
</script>

</html>