含义说明
发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。先订阅再发布
作用
1】支持简单的广播通信,当对象状态发生改变时,会自动通知已经订阅过的对象
2】可以应用在异步编程中,替代回调函数,可以订阅ajax之后的事件,只需要订阅自己需要的部分(那么ajax调用发布之后订阅的就可以拿到消息了)(不需要关心对象在异步运行时候的状态)
3】对象之间的松耦合,两个对象之间都互相不了解彼此。但是,不影响通信,当有新的订阅者出现的时候,发布的代码无需改变,同样发布的代码改变,只要之前约定的事件的名称没有改变,也不影响订阅
4】vue react 之间实现跨组件之间的传值
生活中的实例
比如小红最近在淘宝网看上一双鞋子,但是呢,联系到卖家后,才发现这双鞋卖光了,但是小红对这双鞋又非常喜欢,所以联系卖家,问卖家什么时候有货,卖家告诉她,要等一个星期后才有货,卖家告诉小红,要是你喜欢的话,可以收藏我们店铺,等有货的时候再通知你,所以小红收藏了此店铺,但与此同时,小明,小花等也喜欢这双鞋,也收藏了该店铺;等来货的时候就会依次通知他们。
如何实现发布——订阅模式
1、首先要想好谁是发布者(比如上面的卖家)
2、然后给发布者添加一个缓存列表,用于存放回调函数来通知订阅者(比如上面的买家收藏了卖家的店铺,卖家通过收藏了该店铺的一个列表名单)
3、最后就是发布消息,发布者遍历这个缓存列表,依次触发里面存放的订阅者回调函数
var shopObj = {} // 定义发布者
shopObj.list = [] // 缓存列表 存放的是订阅的函数
// 增加订阅者
shopObj.listen = function(key,fn) {
if(!this.list[key]) {
this.list[key] = []
}
this.list[key].push(fn)
}
// 发布消息
shopObj.trigger = function() {
// 对应的key取出来
var key = Array.prototype.shift.call(arguments)
var fns = this.list[key]
if(!fns || fns.length == 0) {
return
}
for (var i = 0, fn; fn = fns[i++];) {
fn.apply(this, arguments)
}
}
shopObj.listen('red', function(size) {
console.log(`尺码是${size}`)
})
shopObj.listen('black', function(size) {
console.log(`尺码是${size}`)
})
// 小红
shopObj.trigger('red', 42)
// 小明
shopObj.trigger('black', 43)
封装
var event = {
list: [],
listen: function(key,fn) {
if (!this.list[key]) {
this.list[key] = []
}
this.list[key].push(fn)
},
trigger: function() {
// 对应的key取出来
var key = Array.prototype.shift.call(arguments)
var fns = this.list[key]
if(!fns || fns.length == 0) {
return
}
for(var i = 0, fn; fn = fns[i++];) {
fn(...arguments)
}
}
}
event.remove = function(key, fn) {
var fns = this.list[key]
if(!fns) {
return false
}
if(!fn) {
fn && (fns.length = 0)
} else {
for(var i = fns.length - 1; i >= 0; i--) {
var _fn = fns[i]
if(_fn == fn) {
fns.splice(i, 1)
}
}
}
}
再封装
var Event = (function() {
var list = {},
listen,
trigger,
remove;
listen = function(key, fn) {
if (!this.list[key]) {
this.list[key] = []
}
this.list[key].push(fn)
}
trigger = function() {
// 对应的key取出来
var key = Array.prototype.shift.call(arguments)
var fns = this.list[key]
if(!fns || fns.length == 0) {
return
}
for(var i = 0, fn; fn = fns[i++];) {
fn(...arguments)
}
}
remove = function(key, fn) {
var fns = this.list[key]
if(!fns) {
return false
}
if(!fn) {
fn && (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,
trigger,
remove
}
})()
发布订阅模式 实现低耦合
用发布-订阅模式重写之后,对用户信息感兴趣的业务模块将自行订阅登录成功的消息事件。当登录成功时,登录模块只需要发布登录成功的消息,而业务方接收到消息之后,就会开始进行各自的业务处理,登录模块并不关心业务方究竟要做什么,也不想去了解它们的内部细节。