发布订阅者模式
体现在Vue中典型的发布订阅模式就是兄弟间传参。
发布订阅例子:
<script>
//创建一个事件类
class Event {
//这个字面量对象(clientlist)用来储存【事件】和【事件对应的执行函数】
clientlist = {}
//$on就相当于是订阅者,它的作用就是往clientlist对象里面追加事件和该事件对应的执行函数
$on = function (eventName, callback) {
if (!this.clientlist[eventName]) {
this.clientlist[eventName] = [callback]
} else {
this.clientlist[eventName].push(callback)
}
}
//$emit就相当于发布者(执行者),它的作用就是触发订阅者追加的事件和对应的函数
$emit = function (eventName, val) {
if (!this.clientlist[eventName]) {
return false
}
this.clientlist[eventName].forEach((callback) => {
callback(val)
})
}
}
const event = new Event()
// 订阅事件
event.$on('onGetMsg', function (msg) {
console.log(msg)
})
//订阅事件
event.$on('onGetMsg', function (msg) {
console.log(msg)
})
//触发已经订阅的事件
event.$emit('onGetMsg', { color: 'red' })
</script>
观察者模式
当事件触发,Dep就会去调用观察者的方法,所以观察者模式的订阅者与发布者之间是存在 依赖的。
<script>
//目标(发布者)
class Dep{
constructor(){
this.subs = [];
}
addSub(sub){
(sub && sub.update) && this.subs.push(sub);
}
notify(){
this.subs.forEach(sub=>{
sub.update();
})
}
}
//观察者(订阅者)
class Watcher{
update(){
console.log(update);
}
}
let dep = new Dep();
let watcher = new Watcher();
dep.addSub(watcher);
dep.notify();
</script>
【观察者模式】和【发布订阅者模式】的区别
设计模式 | 观察者模式 | 发布订阅模式 |
---|---|---|
主体 | Object观察者、Subject目标对象 | Publisher发布者、Event Channel事件中心、Subscribe订阅者 |
主体关系 | Subject中通过observerList记录ObServer | Publisher和Subscribe不想不知道对方,通过中介联系 |
优点 | 角色明确,Subject和Object要遵循约定的成员方法 | 松散耦合,灵活度高,通常应用在异步编程中 |
缺点 | 紧耦合 | 当事件类型变多时,会增加维护成本 |
使用案例 | 双向数据绑定 | 事件总线EventBus |