行为型：观察者模式

定义

观察者模式属于行为型模式，它定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新。
一种一对多的关系中一称为被观察者也叫目标对象Subject而多则称为观察者对象Observer

观察者模式中通常有两个模型，一个观察者（observer）和一个被观察者（Observed）。从字面意思上理解，即被观察者发生某些行为或者变化时，会通知观察者，观察者根据此行为或者变化做出处理。

特征：

• 
  
  • 一个目标者对象 Subject，拥有方法：添加、删除、通知 Observer；
    
  • 多个观察者对象 Observer，拥有方法：接收 Subject 状态变更通知并处理；
    
  • 目标对象 Subject 状态变更时，通知所有 Observer。
    
  
  

生活中的例子


  如我们关注了某某订阅号，当订阅号有新的文章时，我们都收到了推文，这个就是最简单的观察者模式。

模拟观察者模式

1. /*
2. 定义：
3. 观察者模式是一种对象行为模式。
4. 它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。
6. js 没有抽象类、接口 所以一般结构如下：
7. subject 目标 or 被观察者：
8.   add: 把观察者注册进来
9.   remove: 移除观察者
10.   notify: 遍历注册进来的观察者，调用他们的update
12. Observer 观察者：
13.   update: 自己提供的更新方法
14. */
16. // 被观者、目标
17. class Subject {
18.   constructor (data) {
19.     this.observers = []
20.     this.data = data
21.   }
22.   addObserver (data) {
23.     this.observers.push(data)
24.   }
25.   removeObserver (data) {
26.     this.observers = this.observers.filter(t => t !== data)
27.   }
28.   notify (...data) {
29.      this.observers.forEach(observer => observer.update(...data))
30.   }
31.   // 你的业务代码
32.   setData (data) {
33.     this.data= data;
34.     this.notify(data)
35.   }
36. }
38. // 观察者
39. class Observer {
40.   constructor (name) {
41.     this.name = name
42.   }
43.   update (data) {
44.     console.log(`${this.name}, 我执行了，${data}发生了变化`)
45.   }
46. }
48. const sub = new Subject('我是被观察')
49. const ob1 = new Observer('我是ob1')
50. const ob2 = new Observer('我是ob2')
51. const ob3 = new Observer('我是ob3')
52. sub.addObserver(ob1)
53. sub.addObserver(ob2)
54. sub.addObserver(ob3)
55. sub.notify('现在开始发送第一个通知')
56. console.log('**************看看ob1 是不是没有收到第二个通知**************')
57. sub.removeObserver(ob1)
58. sub.notify('现在开始发送第二个通知')

复制代码

 小结

• 观察者模式用来解决对象之间存在一对多关系的交互行为
  
• 观察者模式中，被观察者与观察者解藕没有很彻底，且在被观察者中观察者要提供统一的更新方法，当然这也是要看具体的应用场景，在某些模块本身就是存在关联，那用观察者模式也没问题。
  
• 发布订阅虽然与观察者模式解决的问题的思路差不多，但是这两个还是有区别的。  
  

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！