「这是我参与11月更文挑战的第5天,活动详情查看:2021最后一次更文挑战」
前言
大家好,我是cv竹叶,相信大家学vue的时候,经常看到或提到发布订阅模式
,说到底到底什么是发布订阅模式呢?今天我们就来理解一下。
发布订阅模式
概念
发布订阅模式
其实是一种对象间一对多的依赖关系,当一个对象的状态发送改变时,所有依赖于它的对象都将得到状态改变的通知。
发布订阅模式的思路
- 创建一个对象来缓存所有的回调函数
- 通过一个方法,对缓存对象进行插入传入的回调函数。(注册订阅)
- 通过一个方法,根据传入的key值,在缓存对象列表里,找到相对应的回调函数进行执行。(进行发布)
- 通过一个方法,根据key值可以删除缓存列表里的回调函数。(取消订阅)
个人官观点是:发布订阅模式相当于,把想要执行的函数全部放到一个对象中当注册订阅
,传入key值来执行里面指定函数当发布
,同时也可以通过key值来除去发布中指定的函数当取消订阅
。(这有点像观察者模式,下面我们会说出他们的区别)
优点和缺点
优点
:
- 对象之间的解耦,防止对象之间调用执行有影响。
- 异步编程中,可以更松耦合的代码编写,每个函数相互独立,互不影响,方便多人开发不同方法模块。
缺点
: - 创建订阅者本身要消耗一定的时间和内存
- 多个发布者和订阅者嵌套一起的时候,程序难以跟踪维护
观察者模式与发布订阅模式的区别
观察者模式
,是直接观察目标对象并执行,中间没有中转操作,直接通信,而且所有目标对象都会一起执行。
发布订阅模式
,多了一个中转操作,发布者和订阅者依赖于中转操作进行通信,并不是直接通信,而且每个订阅者都根据不同情况单独执行。
来段简单代码感受他们之间的区别吧
用网上的代码给你们展示吧,状态就不判断了,你们只需看看区别就行
发布订阅模式:
// 简易的发布订阅
var pubsub = {
key1: function(){},
key2: function(){}
}
// 可以订阅一个执行函数1
pubsub.key1("执行函数1", function(){});
//也可以订阅执行函数1
pubsub.key1("执行函数1", function(){});
// 又可以订阅执行函数2
pubsub.key2("执行函数2");
观察者模式:
// 定义下观察者
function Observer () {
this.update = function(){}
}
// 定一个下目标
function Aim () {}
// 添加观察者
Aim.prototype.addObserver = function(observer){}
// 目标通知变更
Aim.prototype.notify = function(){}
//定义一个目标
var aim = new Aim();
// 定义一个观察者
var man = new Observer();
man.update = function(){
console.log("观察者");
}
//目标添加一个观察者
aim.addObserver(man);
// 定义一个猫的观察者
var cat = new Observer();
cat.update = function(what){
console.log("观察者猫");
}
//目标添加一个猫观察者
aim.addObserver(cat);
// 目标通知观察者们一起执行
aim.notify(); // man和cat将会同时执行
结言
发布订阅者模式,在日常开发中也许你用到了,但是却不知道是这么一个原理,现在学习之后知道了吧?有帮助到你,就点个小小的赞叭~