设计模式4——发布订阅模式

发布订阅——老生长谈的一个设计模式,还有一个观察者模式
1、定义
也称作观察者模式,定义了对象间的一种一对多的依赖关系,当一个对象的状态发 生改变时,所有依赖于它的对象都将得到通知

2、核心
取代对象之间硬编码的通知机制,一个对象不用再显式地调用另外一个对象的某个接口。
与传统的发布-订阅模式实现方式(将订阅者自身当成引用传入发布者)不同,在JS中通常使用注册回调函数的形式来订阅

3、优缺点
优点一为时间上的解耦,二为对象之间的解耦。可以用在异步编程中与MV*框架中
缺点:
创建订阅者本身要消耗一定的时间和内存,订阅的处理函数不一定会被执行,驻留内存有性能开销
弱化了对象之间的联系,复杂的情况下可能会导致程序难以跟踪维护和理解

实现1:JS中的事件就是经典的发布-订阅模式的实现
`// 1、前端的事件就是基于发布订阅模式实现的一种体现
// 订阅事件
document.body.addEventListener('click', e=>e)
document.body.addEventListener('click', e=>e)

// 发布事件
document.body.click()
`

实现2:手动实现发布订阅模式
ES6的箭头函数引入就是为了解决this指向性不明确问题,在这里单独处理了context环境,不影响箭头函数;
箭头函数的this优先级 > call的this优先级

`// 2、发布订阅模式的实现
class Observer {
constructor(){
this.items = {}
}
// 添加订阅
add(type, context, fn){
if(!this.items.type)
this.items.type = [];
this.items.type.push({
context,
fn
})
}

// 发布订阅
pulish(type){
    let arr = this.items.type || []
    arr.map(item=>{
       item.fn.call(item.context) 
    })
}

}

(function(){
this.a = '小明'
let job = new Observer()
job.add('onWork', this, function (params) {
console.log('工作啦', this.a)
})
job.pulish('onWork')
})()`

posted @   Math点PI  阅读(72)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
点击右上角即可分享
微信分享提示