发布订阅模式

作者: 无花无酒_3cd3 | 来源:发表于2020-01-21 09:41 被阅读0次

发布订阅模式(观察者模式)
设计模式之发布订阅模式(1) 一文搞懂发布订阅模式
JS-简单实现发布订阅模式
从发布-订阅模式到消息队列
MQTT 5.0 - 发布订阅模式介绍
Redis发布订阅模式
MQTT 发布/订阅模式介绍
观察者模式&&订阅发布模式
观察者模式、promise基础
发布订阅和观察者模式的区别

vue-cli中，用eventemitter3，做发布订阅开发

class ClientAgent extends EventEmitter{
    this.emit('onGetAgtGroups', groupInfo.agtGroups || [])//发布

}
Object.assign(ClientAgent.prototype, apiObj)  //深拷贝拷贝到原型对象上
let clientAgent  =  new  ClientAgent（）

clientAgent.emit('onGetAgtGroups', groupInfo.agtGroups || [])//发布
clientAgent.on('onConnect', (res) => {//监听
})

https://www.cnblogs.com/tugenhua0707/p/4687947.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
            var event = {
                list: [],
                listen: function(key,fn) {
                    if(!this.list[key]) {
                        this.list[key] = [];
                    }
                    // 订阅的消息添加到缓存列表中
                    this.list[key].push(fn);
                    console.log(this.list)
                },
                trigger: function(){
                    var key = Array.prototype.shift.call(arguments);
                    var fns = this.list[key];
                    // 如果没有订阅过该消息的话，则返回
                    if(!fns || fns.length === 0) {
                        return;
                    }
                    for(var i = 0,fn; fn = fns[i++];) {
                        fn.apply(this,arguments);
                    }
                }
            };
            /*
             *对象深拷贝
            **/
            var initEvent = function(obj) { 
                for(var i in event) {
                    obj[i] = event[i];  
                }
            };
// 我们再来测试下，我们还是给shoeObj这个对象添加发布-订阅功能；
            var shoeObj = {};
            initEvent(shoeObj);
            console.log(shoeObj)
            // 小红订阅如下消息
            shoeObj.listen('red',function(size){
                console.log("尺码是："+size); 
                setTimeout(()=>{
                    alert("message")
                },2000) 
            });

            // 小花订阅如下消息
            shoeObj.listen('block',function(size){
                console.log("再次打印尺码是："+size); 
            });
            
            shoeObj.trigger("block",42);
            shoeObj.trigger("red",40);

    </script>
</body>
</html>

下边的更清晰些

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script>
    var pubsub = {};
        (function(q) {
            var topics = {},//存放所有订阅者
                subUid = -1;
            //发布
            q.publish = function(topic, args) {
                debugger
                if (!topics[topic]) {
                    return false;
                }

                var subscribers = topics[topic],
                    len = subscribers ? subscribers.length : 0;

                while (len--) {
                    subscribers[len].func(topic, args);
                }

                return this;
            };
            //订阅
            q.subscribe = function(topic, func) {

                if (!topics[topic]) {
                    topics[topic] = [];
                }

                var token = (++subUid).toString();
                topics[topic].push({
                    token: token,
                    func: func
                });
                return token;
            };
            //取消订阅
            q.unsubscribe = function(token) {
                for (var m in topics) {
                    if (topics[m]) {
                        for (var i = 0, j = topics[m].length; i < j; i++) {
                            if (topics[m][i].token === token) {
                                topics[m].splice(i, 1);
                                return token;
                            }
                        }
                    }
                }
                return this;
            };
        }(pubsub));
        //测试
        var messageLogger = function(topics, data) {
            console.log("Logging: " + topics + ": " + data);
        };
        var subscription = pubsub.subscribe("inbox/newMessage", messageLogger);
        pubsub.publish("inbox/newMessage", "hello world!");
        // or
        pubsub.publish("inbox/newMessage", ["test", "a", "b", "c"]);
        // or
        pubsub.publish("inbox/newMessage", {
            sender: "hello@google.com",
            body: "Hey again!"
        });
</script>
</body>
</html>