网易: 介绍观察者模式（一面）

[Vdan123]

To：
Vdan123

面试公司：
网易

面试环节：
一面

问题：
请介绍观察者模式

[Vdan123]

介绍一下观察者模式：

关于定义：

定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象的状态得到通知并自动更新

应用场景：

1.当一个对象的改变需要同时改变其他对象，而不知道到底有多少对象待改变
2.当一个对象必须通知其他对象，而它又不希望是紧密耦合的

优点：

1.目标和观察者之间的松散耦合，目标不需要知道观察者有多少，属于哪个具体的类。同时为了保持系统层次的完整，它们可以属于不同抽象层
2.可以在任意时刻增加和删除观察者

缺点：

观察者之间并不知道相互的存在。所以如果依赖准则定义不当、目标的操作失误，都会引起一系列依赖的错误更新

举个🌰：

Vue.js 的响应式系统：如何做到在 data 发生改变时，视图会自动更新？

模型（Model）通过 Observer、Dep、Watcher、Directive 等一系列对象的关联，和视图（DOM）建立起关系。归纳起来，Vue.js 在这里主要做了三件事：

• 通过 Observer 对 data 做监听，并且提供了订阅某个数据项变化的能力。
• 把 template 编译成一段 document fragment，然后解析其中的 Directive，得到每一个 Directive 所依赖的数据项和 update 方法。
• 通过 Watcher 把上述两部分结合起来，即把 Directive 中的数据依赖通过 Watcher 订阅在对应数据的 Observer 的 Dep 上。当数据变化时，就会触发 Observer 的 Dep 上的 notify 方法通知对应的 Watcher 的 update，进而触发 Directive 的 update 方法来更新 DOM 视图，最后达到模型和视图关联起来。