JavaScript

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

2019-04-04  本文已影响97人  小小小小的人头

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

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

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

个人大白话理解:

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

作用:

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.缺点的话: 创建订阅者本身就是消耗一定的时间和内存。并且创建了一个订阅者。可能一直都未被发布。这个订阅者就一直在内存中,也是一种资源的浪费。
该模式既然松耦合了。就弱化了对象之间的联系。 当有多个订阅者或者发布者都在一起时候。要定位一个问题,可能也是很艰难的事情了~

上一篇下一篇

猜你喜欢

热点阅读