【设计模式】观察者模式和订阅发布模式

观察者模式

观察者模式包罗观察目的和观察者两类对象。一个目的可以有任意数目的与之相依靠的观察者。一旦观察目的的状态发生改变，全部的观察者都将得到关照。
当一个对象的状态发生改变时，全部依靠于它的对象都得到关照并被自动更新，解决了主体对象与观察者之间功能的耦合，即一个对象状态改变给其他对象关照的问题。

1. class Subject {
2.     constructor() {
3.         this.observers = []
4.     }
6.     add(observer) {
7.         this.observers.push(observer)
8.     }
10.     remove(observe) {
11.         this.observers = this.observers.filter(observer => observer !== observe)
12.     }
14.     notify() {
15.         this.observers.forEach(observer => {
16.             observer.update()
17.         })
18.     }
19. }
20. class Observer {
21.     constructor(name) {
22.         this.name = name
23.     }
24.     update() {
25.         console.log(this.name, 'update')
26.     }
27. }
29. const subject = new Subject();
30. const observer1 = new Observer('liu');
31. const observer2 = new Observer('hao')
33. subject.add(observer1)
34. subject.add(observer2)
35. subject.notify() // liu update hao update

复制代码

前端通常的应用是导航和面包屑，面包屑发生改变，对应的页面内容也会发生改变。
优势：目的者与观察者，功能耦合度降低，专注自身功能逻辑；观察者被动接收更新，时间上解耦，实时接收目的者更新状态。
缺点：观察者模式虽然实现了对象间依靠关系的低耦合，但却不能对事件关照举行细分管控，如“筛选关照”，“指定主题事件关照”。
订阅发布模式

• 观察者和目的要相互知道
  
• 发布者和订阅者不消互相知道，通过第三方实现调理，属于颠末解耦合的观察者模式
  

1. // 发布订阅模式
2. class PubSub {
3.     constructor() {
4.         this.subscribers = {};
5.     }
7.     subscribe(type, callback) {
8.         if (!this.subscribers[type]) {
9.             this.subscribers[type] = [];
10.         }
11.         this.subscribers[type].push(callback);
12.     }
14.     publish(type, ...args) {
15.         if (this.subscribers[type]) {
16.             this.subscribers[type].forEach(callback => {
17.                 callback(...args);
18.             });
19.         }
20.     }
22.     unsubscribe(type, callback) {
23.         if (this.subscribers[type]) {
24.             this.subscribers[type] = this.subscribers[type].filter(cb => cb !== callback);
25.         }
26.     }
27. }
29. function eventA() {
30.     console.log('eventA');
31. }
32. function testB() {
33.     console.log('testB');
34. }
36. const pubSub = new PubSub();
37. pubSub.subscribe('eventA', eventA);
38. pubSub.subscribe('testB', testB);
39. pubSub.publish('eventA');

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。