这几天看@Anton Kosykh写的使用ResizeObserver实现响应式Vue的组件，让我刷新了对响应式组件的认识，也在这里第一次接触到ResizeObserver这个词。个人有一个习惯，对于任何新东西，我都充满好奇，有一股探知欲，要了解其中的原委。今天这篇文章就是自己对ResizeObserver的探知。

什么是观察者(Observer)

要了解ResizeObserver，就很有必要先了解观察者（Observer）这一概念。

观察者是一个观察或注意事物的程序。观察者可以观察浏览器中发生的某些事情并做出相应的响应。如果打个比方来说，观察者就好比一条狗，他在帮你守家，当有人进入你的家的时候或者家中发生异常的时候，他会提醒你发生的事情。当狗向你为一些事情发出警告的时候，你会做出相应的行动。

使用观察者，我们可以观察浏览器中发生的不同类型的活动，并采取必要的行动。比如，我们可以观察一个视频是否在浏览器中显示，并启用自动播放；或者从DOM元素中添加或删除一子元素，甚至其他的一些事情。

事实上在JavaScript的设计模式中一种模式叫做：观察者模式（Observer Pattern）

观察者模式(Observer Pattern)：定义对象间的一种一对多依赖关系，使得每当一个对象状态发生改变时，其相关依赖对象皆得到通知并被自动更新。

简单点说，观察者模式是一种设计模式，其中一个对象（Subject）维持一系列依赖于它（Observer）的对象，将有关状态的任何变更自动通知给它们。当一个目标需要告诉观察者发生了什么事情，它会向观察者广播一个通知。以下我们采用JavaScript来实现观察者模式。

• Subject（目标）：维护一系列的观察者，方便添加或删除观察者。
• Observer（观察者）：为那些在目标状态发生改变时需获得通知的对象提供一个更新接口。

被依赖对象通常被称为主体(Subject)，将其称为被观察对象(Observable)，其相关依赖对象被称为观察者(Observer)，即被观察对象会主动地向观察者“推送(push)”消息，而不是观察者向被观察对象“拉取(pull)”消息，实现的是一种 Push 模式的消息系统。

从被观察对象和观察者的类图可以明确地看到两者之间的消息传递关系：

JavaScript中的观察者模式又叫发布订阅模式（Publish/Subscribe），使用观察者模式的好处：

• 支持简单的广播通信，自动通知所有已经订阅过的对象。
• 页面载入后目标对象很容易与观察者存在一种动态关联，增加了灵活性。
• 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。

这里只是简单的介绍了JavaScript中的观察者模式，有关于这方面更详细的介绍，可以参阅读：

• 大白话Javascript设计模式之观察者模式(Observer)
• 深入理解JavaScript系列（32）：设计模式之观察者模式
• 观察者模式
• 观察者模式的模式结构