一、它应用的地方

前端正式工作4年，越来越发现该模式用的地方之多。

  • Node事件模型；
  • JS事件模型
  • Promise？

    二、它的存在是为什么

    设计结构中的大部分方法论，基本都是为了方便我们编程。
    “找到变化，并且封装之”。

假定我们有情报 messageA、messageB、messageC，我们想要通知给 manA，manB。
想想我们能够封装的部分：
messageX -> manA
messageX -> manB
messageX -> manC

在进行一步封装
messageX -> manX
【到此为止，第一步的封装就到头了。由于我们没有更复杂的后续操作，这样封装就差不多。】

三、实例代码

3.1 观察者模式实例：

我们假定一个：导演、打光师、演员并存的场景。 打光师、演员作为信息的接收者。 导演作为信息的发布者。

  • 观察者（Observer/User）
  • 信息发布方（Subject） ``` class User { constructor(name, fn) {
    1.   this.name = name
    2.   this.fn = fn
    } receiveMsg(msg) {
    1.   this.fn.call(this, msg)
    } }

class Subject { constructor(list) { this.list = list || [] } // 增加用户 add(…userList) { this.list = this.list.concat(userList) console.log(‘增加之后的用户长度为’, this.list.length) } // 发送消息 send(msg) { this.list.forEach(item => { item.receiveMsg(msg) }) } }

const o = new Subject() const u1 = new User(‘ccc’, (str) => { console.log(str, ‘打光师接受到信息会打开闪光灯’) }) const u2 = new User(‘actor’, str => { console.log(str, ‘演员接收到信息应声倒地’) })

o.add(u1, u2) o.send(‘开拍’)

```

3.2 观察者模式+一层代理=发布/订阅模式：

其实两者差异并不大，只是发布/订阅模式在观察者的【主体+客体】之间，额外增加了一层【代理人】。
基于不同的使用场景，我们选取不同结构的微调。

看到过一个好的使用场景的例子。

  • 公司 => 发月饼 => 给员工。这里我们使用“观察者”，因为 【公司+员工】，业务关系紧密。
  • 公司 => 发快递 => 给陌生人。这里我们使用“发布&订阅模式”，【公司+陌生人】，业务关系并不紧密，【应该解耦】。

    四、已经作为最佳实践的实例们

    其实就是第一节的代码简化版演示。