js设计模式（观察者模式与发布订阅模式区别）[四星推荐]

前言：前些年做拖拽的时候调研了很多产品，后来选了X6，但是里面很多二次功能的实现，设计模式都是参考 imove，当时不知道一直用的 高度封装trigger ，

现在恍然大悟就是大名鼎鼎的发布订阅模式

1.观察者模式

观察者模式一般有观察者和被观察者

打个不恰当比喻，甲乙丙丁强哥 五人去抢银行，强哥望风，

强哥就是被观察者， 甲乙丙丁就是观察者，四个观察者要看强哥行事

2.发布订阅模式

这个就有意思了  这个模式比较大 不再是一个小犯罪团伙了

队伍1 甲乙丙丁（订阅）
队伍2 一二三四   （订阅）
三方服务：高德地图 （调度中心）
队伍1 队伍2 分别抢劫两个银行  都在高德地图订阅了 警察通知服务
出警 （发布者）
高德地图 （收到警车运行讯息）
队伍1 队伍2 （收到高德地图的通知）

3.总结

1.不同：角色数量不同
2..不同： 观察者模式有松耦合关系 发布订阅没有耦合

3.使用： 观察者单个应用内部  发布订阅场景更大 跨应用 信息中间件kafka

综上所述：她们不同 但是她们思想都有发布订阅的思想

4.经典代码示例（兄弟们啊  这个真的牛皮  学的融会贯通 设计组件 牛皮哄哄）

var Event = (function(){
    var list = {},
          listen,
          trigger,
          remove;
          listen = function(key,fn){
            if(!list[key]) {
                list[key] = [];
            }
            list[key].push(fn);
        };
        trigger = function(){
            var key = Array.prototype.shift.call(arguments),
                 fns = list[key];
            if(!fns || fns.length === 0) {
                return false;
            }
            for(var i = 0, fn; fn = fns[i++];) {
                fn.apply(this,arguments);
            }
        };
        remove = function(key,fn){
            var fns = list[key];
            if(!fns) {
                return false;
            }
            if(!fn) {
                fns && (fns.length = 0);
            }else {
                for(var i = fns.length - 1; i >= 0; i--){
                    var _fn = fns[i];
                    if(_fn === fn) {
                        fns.splice(i,1);
                    }
                }
            }
        };
        return {
            listen: listen,
            trigger: trigger,
            remove: remove
        }
})();
// 测试代码如下：
Event.listen("color",function(size) {
    console.log("尺码为:"+size); // 打印出尺码为42
});
Event.trigger("color",42);

饮水思源： 说完观察者和发布订阅模式的区别，面试官不留我吃饭了

饮水思源：详解 Javascript十大常用设计模式 - 掘金