观察者模式和发布订阅模式的区别

观察者模式和发布订阅模式最大的区别就是发布订阅模式有个事件调度中心。

image.png

在观察者模式中，观察者需要直接订阅目标事件；在目标发出内容改变的事件后，直接接收事件并作出响应。
在发布订阅模式中，发布者和订阅者之间多了一个发布通道；一方面从发布者接收事件，另一方面向订阅者发布事件；订阅者需要从事件通道订阅事件

发布订阅模式的代码实现

//全局的发布--订阅对象

var Event = (function () {

    var clientList = {}, // 事件存储对象
        listen,
        trigger,
        remove;

    listen = function (key,fn) {  // 订阅事件
        if(!clientList[key]){
            clientList[key]=[];
        }
        clientList[key].push(fn);
    };

    trigger = function () { // 发布事件（触发事件）
        var key = Array.prototype.shift.call(arguments),
            fns = clientList[key];
        if(!fns || fns.length===0){
            return false;
        }
// 遍历 event 值对应的缓存列表，依次执行 fn
        for (var i =0,fn;fn=fns[i++];){
            fn.apply(this,arguments);
        }
// 或者用下面这段遍历
    fns.forEach(fn => {
        fn.apply(_this, arguments);
    });

    };

    remove = function (key,fn) {  // 取消订阅
        var fns = clientList[key];
        if(!fns){
            return false
        }

        if(!fn){
            fns && (fns.length=0);
        }else{
            for (var l=fns.length-1;l>=0;l--){
                var _fn = fns[l];
                if(_fn===fn){
                    fns.splice(l,1);
                }
            }
        }
    };
    return {
        listen:listen,
        trigger:trigger,
        remove:remove,
    }
})();

Event.listen('squareMeter88',function (price) {
    console.log("价额="+price);
});

Event.trigger('squareMeter88',2000000);