javascript-发布订阅模式

[ronghaoZHI]

javascrit设计模式之发布订阅模式

众所周知 ，Vue的mvvm是集数据劫持(setter/getter)与发布订阅模式于一身。。。

先简单介绍一下神🐎是发布订阅模式：
所谓发布订阅，可以比作飞机-卫星-中转站之间的通信，当飞机在沿着航道进行飞行时，会定时把位置信息发给卫星，而地面上的中转站想要获取飞机的位置信息须在卫星上进行注册订阅（你想要看到的 订阅 两个字 终于出现了～），这样卫星才会知道那个中转站订阅了某飞机的信息，当卫星接收到飞机位置信息时会发布给订阅该飞机信息的中转站，这样就完成了消息订阅 - 消息发布整个过程。是不是很简单！！ 不要着急，，，下面直接上代码～

{
         //首先我们创建一个Observe 
            const observe = (function() {
                    // 消息队列
                    const messages = {};
                    return {
                        //注册信息接口
                        regist: (type, fn) => {
                            if(typeof messages[type] == 'undefined'){
                            	messages[type] = [fn];
                            }else{
                            	messages[type].push(fn);
                            }
                        },
                        // 发布信息接口
                        fire: (type, args) => {
                            if (!messages[type].length)
                                	return;
                                // 
                            const events = {
                                type: type,
                                args: args || {}
                            };
                            let len = messages[type].length;
                            // 遍历消息动作
                            for (let i = 0; i < len; i++) {
                                (messages[type][i]).call(this,events);
                                console.log(this);
                            }
                        },
                        // 注销信息接口
                        remove: function(type, fn) {
                            if (Array.isArray(messages[type])) {
                                let i = messages[type].length;
                                for (; i >= 0; i--) {
                                    messages[type][i] === fn && messages[type].splice(i, 1);
                                }
                            }
                        }
                    }
                })()
            // console.log(observe)
                
            //举个🌰
                // 首先注册一下
            observe.regist('test', function(e) {
               console.log(e.args.msg);
            })
            // 然后发布一下
            observe.fire('test', {
                msg: '我是来测试的'
            })
  }

可以看到控制台是这样的：

很 nice!! 👏