javascript 订阅模式简单实现

Mo_jon

已于 2023-09-28 16:44:22 修改

阅读量204

点赞数

分类专栏： Observer 文章标签： javascript

于 2021-02-05 10:35:50 首次发布

本文链接：https://blog.csdn.net/Mo_jon/article/details/113682164

版权

Observer模式 JavaScript 订阅发布消息传递前端开发

关键词由CSDN通过智能技术生成

Observer 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Observer.js 具体实现

var Observer = function () {
    // 观察列队
    let handles = this.handles ? this.handles : {};
    // 所有订阅key
    let keys = this.keys ? this.keys : [];

    /**
     * 订阅
     * @param {string} message 消息名称
     * @param {function} callback 消息订阅事件
     * @returns
     */
    this.subscribe = function (message, callback) {
        let key = createKey();
        if (typeof callback == "function" && typeof message == "string") {
            !Object.hasOwnProperty.call(handles, message) && (handles[message] = {});
            handles[message][key] = callback;
            keys.push(key);
        }
        return key;
    }

    /**
     * 取消订阅
     * @param {string} key 
     */
    this.unSubscribe = function (key) {
        let i = keys.indexOf(key)
        if (i != -1) {
            for (const index in handles) Object.keys(handles[index]).includes(key) && delete handles[index][key];
            keys.splice(i, 1);
        }
    }

    /**
     * 更新
     * @param {string} message 消息名称
     * @param {*} value 消息数据
     */
    this.update = function (message, value) {
        if (typeof message == "string" && Object.hasOwnProperty.call(handles, message)) {
            for (const key in handles[message]) {
                handles[message][key](value)
            }
        }
    }

    // 创建唯一key
    function createKey() {
        let key = 'handles_' + Date.now() + '_' + parseInt(Math.random() * Math.pow(10, 10));
        if (keys.includes(key)) {
            return createKey()
        } else {
            return key;
        }
    }
}

使用实列

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
</head>

<body>
    <div id="my">123456</div>
    <div id="test">999999</div>
    
    <button onclick="update()">更新</button>
    <button onclick="cancel()">取消订阅</button>

    <button onclick="updateTest()">更新test</button>
    <button onclick="cancelTest()">取消订阅test</button>
    <script src="Observer.js"></script>
    <script>
        const Obs = new Observer()
        const ObsList = {my: "myMessage",test: "testMessage",}

        // myMessage 订阅
        const myMessage = Obs.subscribe(ObsList.my, (res) => document.getElementById("my").innerText = res)
        function update() {Obs.update(ObsList.my, Date.now())}
        function cancel() {Obs.unSubscribe(myMessage)}

        // testMessage 订阅
        const testMessage = Obs.subscribe(ObsList.test, (res) => document.getElementById("test").innerText = res)
        function updateTest() {Obs.update(ObsList.test, Date.now())}
        function cancelTest() {Obs.unSubscribe(testMessage)}
    </script>
</body>

</html>

Mo_jon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
javascript 订阅模式简单实现

var Observer = function () { // 观察列队 let handles = this.handles ? this.handles : {}; // 所有订阅key let keys = this.keys ? this.keys : []; /** * 订阅 * @param {*} message 消息名称 * @param {*} callback 消息订阅事件 * @returns
复制链接

扫一扫

专栏目录