成都网站建设 四川冠辰网站建设,镇江网站建设企业,国内永久免费crm系统软件,wordpress能做跨境电商前言
我的任督二脉终于被打通了#xff0c;现在该你了
区别 观察者模式 就2个角色#xff1a;观察者和被观察者#xff08;重要#xff09;明确知道状态源#xff0c;明确知道对方是谁一对多关系 发布订阅模式 有3个角色#xff1a;发布者#xff0c;订阅者和发布订阅…前言
我的任督二脉终于被打通了现在该你了
区别 观察者模式 就2个角色观察者和被观察者重要明确知道状态源明确知道对方是谁一对多关系 发布订阅模式 有3个角色发布者订阅者和发布订阅中心重要发布者和订阅者不知对方存在多对多关系 观察者模式
观察者盯着被观察者看被观察者将有权限添加删除和通知观察者这是被观察者至少需要的三个基本方法只要被观察者 发动 通知观察者方法时观察者列表里的所有观察者就可以接收到消息
一实现
1. 被观察者有一个观察者列表可以添加移除和通知观察者
class Subject {constructor(){// 定义一个观察者列表用来存放观察者们this.observerList [];}// 添加观察者 addObserver(observer){this.observerList.push(observer);}// 移除观察者removeObserver(observer){this.observerList.filter(o o.name ! observer.name)}// 通知观察者notifyObserver(message){// 我理解的 notified 是观察者自己定义的如何通知自己// 每个观察者的notified内部实现可能是不一样的this.observerList.forEach(o o.notified(message))}}2. 观察者可以申请加入被观察者的列表自定义通知方法
class Observer {constructor(name, subject){this.name name;if(subject){// 如果构建时就有了被观察者(subject)// 则申请让被观察者将自己加入列表subject.addObserver(this)}}notified(message){// TODO 观察者拿到订阅到的消息后要做的事console.log(this.name, 拿到了消息,message)}}3. 使用
// 生成一个被观察者const subject new Subject();// 生成一个自带subject的观察者const A_observer new Observer(A,subject);// 通知subject.notifyObserver(咳咳);
// A拿到了消息咳咳// 生成一个没有观察对象subject的观察者const B_observer new Observer(B,null);// 申请观察subjectsubject.addObserver(B_observer);
// 移除// subject.removeObserver(A_observer);
// 通知subject.notifyObserver(哈哈哈)
// A拿到了消息哈哈哈
// B拿到了消息哈哈哈
// 当然也可以写一个新的class Observer来实现不同的notified参考https://juejin.cn/post/6978728619782701087
二升级版实现
1. 被观察者
class newSubject {constructor(){this.observerList [];}// 移除观察者removeObserver(observer){this.observerList.filter(o o.name ! observer.name)}
__________修改___________________________________________________________________// 添加观察者addObserver(name, func){this.observerList.push({ name:name, callback:func});}// 通知观察者notifyObserver(message){// 我理解的 notified 是观察者自己定义的一个回调函数// 即被观察者(observer)给观察者(subject)一个notified函数告诉subject有消息就用这个函数通知自己// 每个观察者的notified内部实现可能是不一样的// this.observerList.forEach(o o.notified(message))// 通过对象的解构赋值这样就可以不用规定死observer内部通知方法的名称为notified更加灵活this.observerList.forEach(({name,callback}) callback(message))}
}2. 使用 const new_subject new newSubject();//添加观察者C时将new_subject的观察者列表修改为统一的 { name, callback } 格式new_subject.addObserver(C,(message){// notifiedconsole.log(hello, C, message)})//通知new_subject.notify(‘升级啦’)//‘hello, C升级啦’参考http://dennisgo.cn/Articles/DesignPatterns/PubSub.html 一旦调用了subject.notify , 所有列表内的观察者都会收到通知而且收到的是同样的消息 发布订阅模式
如之前所说发布订阅模式有3个角色发布者订阅者和发布订阅中心发布订阅核心是基于发布订阅中心来建立联系发布者无需关心订阅者有哪些订阅者也无需关心有哪些发布者可以表达对一个或多个主题的兴趣只接收感兴趣的消息 让我们来想象一下邮件系统你可以作为订阅者订阅某个网站的通知邮件系统在其中充当发布订阅中心的角色而发布者则是你订阅的网站。 整个链路是从你的订阅开始你的订阅动作是在某个你想订阅的网站填入自己的邮箱(在主题中添加订阅者列表)并在邮箱内记录这个网站信息(添加主题)后续当网站有内容更新时邮件系统会及时接收到并向你发送邮件。 ————————————————引用自掘金 https://juejin.cn/post/6978728619782701087 一实现
1. 发布订阅中心 记住订阅是在为主题添加订阅者发布是在执行订阅者的通知方法
// 发布订阅中心
class PubSub {constructor() {this.sublist {}; //为什么观察者模式要用数组这里却要用对象想想平时在设置变量时一对多的关系一般用数组来表示而多对多的关系一般都用//数组对象来表示是不是//订阅列表每个主题对应对象中的一个数组键为主题名值为不同订阅者的通知方式可以理解为该主题下的订阅者列表//为每个主题添加了多个订阅者存放在数组(订阅者列表)中/*** this.sublist {* theme1:[notify_1_1, notify_1_2], // notify_1_1订阅了theme1,notify_1_2订阅了theme1,* theme2:[notify_1_1, notify_2_2], // notify_1_1订阅了theme2,notify_2_2订阅了theme2,* ......* }* **/}// 订阅subscribe(theme, notify_fn) {// 如果this.sublist[theme]为null先将其定义为数组, 有了主题后直接push订阅者的通知方法即可(this.sublist[theme] || (this.sublist[theme] [])).push(notify_fn);}// 发布publish(theme, ...args) {if(!this.sublist[theme]){// 如果该主题不存在通知方法(即订阅者)return;}// 发布某个主题时该主题的所有订阅者都可以接到通知this.sublist[theme].map(notify_fn notify_fn(args))}}2. 使用 const pubsub new PubSub();// 订阅者function user1(content) {console.log(用户1订阅 ,content)}function user2(content) { console.log(用户2订阅 ,content)}function user3(content) {console.log(用户3订阅 ,content)}// 添加订阅pubsub.subscribe(theme1,(content){// 以后如果发布订阅中心pubsub发布了theme1的内容立即通知执行user1方法user1(content)})pubsub.subscribe(theme1,(content){user2(content)})pubsub.subscribe(theme2,(content){user3(content)})// 发布发布即起到了通知的作用只有发布订阅中心执行发布方法订阅者才能收到消息因为publish执行了notify_fnpubsub.publish(theme1, 主题1内容);pubsub.publish(theme2, 主题2内容);// 结果// 用户1订阅 主题1内容// 用户2订阅 主题1内容// 用户3订阅 主题2内容参考 https://extremej.itscoder.com/different_between_observe_and_publish/ http://dennisgo.cn/Articles/DesignPatterns/PubSub.html https://juejin.cn/post/6844903842501378055 https://juejin.cn/post/6844903850105634824
实际场景
如
Node.js中自带的EventEmiter模块Vue.js中数据响应式的实现watch、watcher、observe、observer、listen、listener、dispatch、trigger、emit、on、event、eventbus、EventEmitter这类单词出现的地方很有可能是在使用观察者模式或发布订阅模式例如on (subscribe)和 emitpublish
总结 1. 角色对象 观察者模式角色观察者和被观察者发布订阅模式角色发布者订阅者和发布订阅中心 2. 实现 观察者模式 被观察者有一个观察者列表可以添加移除和通知观察者观察者可以申请加入被观察者的列表自定义通知方法 发布订阅模式 发布订阅中心 记住订阅是在为主题添加订阅者发布是在执行订阅者的通知方法) 3. 特定消息接收 发布订阅模式可以自定义需要接受的通知,定制主题观察者模式相当于是无差别广播一旦调用了notify通知 , 所有列表内的观察者都会收到通知而且收到的是同样的消息 4. 映射关系 观察者模式普遍一对多发布订阅模式普遍多对多 5. 对象间关系 观察者模式明确知道状态源双方直接联系发布订阅者模式双方通过发布订阅中心关联
