JS发布-订阅模式(观察者模式)

不知道为什么就 准备记录一下这个模式。设计模式太多了。自己可能用到但是也不知道 。但是这个模式自己开发中解决了一些问题,于是就记录一下吧。

概念:(该写的的还是写上吧...)

发布-订阅模式又叫观察者模式,他定义对象间一种一对多的关系依赖。当一个对象的状态发生改变时,所有依赖它的对象都将得到通知;

个人大白话理解:

你在苹果店预定了一台手机。但是没有货。于是你就留了手机号码预定一下(预定:订阅)。然后苹果店有货了打电话给你让你来买手机了(打电话给你:发布) 。就这样吧

作用:

1.观察者模式其实在我们日常开发中普遍纯在,比如redux、vue等技术方案 都是依赖这个实现的。好处呢 是替代传递回调函数的方案。 我们无需过多关注对象在异步 运行中的状态,只要关注对订阅的事件触发的点即可;

2.对象之间解耦。不用关心彼此的细节,有新的订阅者,发布在者也不需要修改。发布者需要修改时,订阅者也无需做什么处理。 互相不影响

开发场景?:

实际上,我们最简单的dom节点绑定事件函数,就是我们常用的发布-订阅模式 的体现:

document.body.addEventListener('click',function(){
console.log("做一些事情");
},false);
document.body.click();

上面代码实现什么事情,大家肯定都知道。知道这么回事就行吧。
下面实现一个简单的订阅者模式(直接贴代码吧)

//注册事件后面注册的会覆盖掉前面注册的
let msg = {
    eventContainer:{

    },
    on:function(eventName,callback){//注册事件
        this.eventContainer[eventName] = callback; 
    },
    emit:function(eventName,data){//触发事件
        let callback = this.eventContainer[eventName];
        if(typeof callback == 'function'){
            callback(data);
        }
    },
    remove:function(eventName){//移除事件
        delete(this.eventContainer[eventName]);
    }
}
module.exports = msg;

主要最近解决了小程序上的一个问题 。就是在跳转到微信卡卷后,我需要都对原先页面做一些影藏操作。但是卡卷返回值后,页面生命周期是不做任何改变的。于是就用了上面的代码解决了。

//如何使用
let msg = require("msg");
//订阅一个事件
 msg.on("app:closeModal", function () {
    //关闭一个模块
})
  //触发上面事件
 msg.emit("app:closeModal")

上面的实现呢 是简单版的。肯定有很多场景的 使用上没有考虑。比如命名冲突,后者会覆盖前者。 现在很多都集成了这个功能 比如node的event等。

总结吧

1.发布-订阅模式的优点非常显著。一为时间上的解耦 二位 对象之间的解耦,可以应用在异步编程中。帮助我们实现更松耦合的代码编写。
2.缺点的话: 创建订阅者本身就是消耗一定的时间和内存。并且创建了一个订阅者。可能一直都未被发布。这个订阅者就一直在内存中,也是一种资源的浪费。
该模式既然松耦合了。就弱化了对象之间的联系。 当有多个订阅者或者发布者都在一起时候。要定位一个问题,可能也是很艰难的事情了~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 8,063评论 2 17
  • 工厂模式 单体模式 模块模式 代理模式 职责链模式 命令模式 模板方法模式 策略模式 发布-订阅模式 中介者模式 ...
    HelloJames阅读 1,065评论 0 6
  • 发布—订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都...
    yufawu阅读 822评论 0 6
  • javascript设计模式与开发实践 设计模式 每个设计模式我们需要从三点问题入手: 定义 作用 用法与实现 单...
    穿牛仔裤的蚊子阅读 4,407评论 0 13
  • 设计模式 单例 单例模式的核心思想是让指定的类只存在唯一一个实例。这意味着当你第二次使用相同的类去创建对象的时候,...
    代码上的蚂蚁阅读 534评论 0 0

友情链接更多精彩内容