行为型-观察者模式

发表于 | 分类于 |
字数统计: 644 字 | 阅读时长 ≈ 2 分钟

概念

Observer Pattern：又叫 发布-订阅（Publish/Subscribe）模式、模型-视图（Model/View）模式、源-监听器（Source/Listener）模式或从属者模式（Dependents）。

定义对象之间的一种一对多依赖关系，使得每当一个对象状态发生改变时，其相关依赖对象皆得到通知并被自动更新。

img

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
class Observer {
  constructor(fns) {
    this.fns = fns || [];
  }
  // 订阅
  subscribe(fn) {
    this.fns.push(fn);
  }
  // 取消订阅
  unsubscribe(fn) {
    this.fns = this.fns.filter((el) => {
      return el !== fn;
    });
  }
  // 发射
  update(o) {
    this.fns.forEach((fn) => {
      fn(o);
    })
  }
}

// 测试
var o = new Observer;
var f1 = function (data) {
  console.log('Robbin: ' + data + ', 赶紧干活了！');
};
var f2 = function (data) {
  console.log('Randall: ' + data + ', 找他加点工资去！');
};

// 添加观察者 
o.subscribe(f1);
o.subscribe(f2);

// 通知观察者并更新
o.update("Tom回来了！", '666'); 
// Robbin: Tom回来了！, 赶紧干活了！ 
// Randall: Tom回来了！, 找他加点工资去！

// 退订f1
o.unsubscribe(f1);
// 再来验证
o.update("Tom回来了！"); // Randall: Tom回来了！, 找他加点工资去！
o.unsubscribe(f2);
o.update("Tom回来了！"); // 无打印，因为取消了所有的订阅

优点

  • 可以实现表示层和数据逻辑层的分离，定义了稳定的消息更新传递机制，并抽象了更新接口，使得可以有各种各样不同的表示层充当具体观察者角色
  • 在观察目标和观察者之间建立一个抽象的耦合。观察目标只需要维持一个抽象观察者的集合，无须了解其具体观察者。由于观察目标和观察者没有紧密地耦合在一起，因此它们可以属于不同的抽象化层次
  • 支持广播通信，观察目标会向所有已注册的观察者对象发送通知，简化了一对多系统设计的难度
  • 符合开闭原则，增加新的具体观察者无须不改原有系统代码

缺点

  • 如果一个观察目标对象有很多直接和间接观察者，将所有的观察者都通知到会花费很多时间
  • 如果在观察者和观察目标之间存在循环依赖，观察目标会触发它们之间进行循环调用，可能导致系统崩溃
  • 观察者模式没有相应的机制让观察者知道所观察的目标对象是怎么发生变化的，而仅仅只是知道观察目标发生了变化