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

最新推荐文章于 2024-07-22 17:30:11 发布

Volecity

最新推荐文章于 2024-07-22 17:30:11 发布

阅读量197

点赞数

分类专栏： javascript 文章标签：设计模式观察者模式

本文链接：https://blog.csdn.net/start7000k/article/details/126407055

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文深入探讨了JavaScript中的观察者模式和发布订阅模式，通过实例解释了两者之间的区别。观察者模式通常用于单个应用内部，而发布订阅模式则适用于更大型的跨应用信息传递，如消息中间件。两者虽然不同，但都体现了发布订阅的思想。文中还提供了一段经典代码示例，展示了如何实现一个简单的发布订阅功能。

摘要由CSDN通过智能技术生成

前言：前些年做拖拽的时候调研了很多产品，后来选了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十大常用设计模式 - 掘金