在前端开发中，观察者模式是一种常见的设计模式。它定义了一种对象之间的一对多依赖关系，让多个观察者对象同时监听一个主题对象，当主题对象状态发生改变时，所有观察者对象都会得到通知并自动更新。
虽然这个模式看起来简单，但是理解和实现它可能会有一定的挑战。在本文中，我们将通过 TypeScript 示例代码和深入探讨来更好地理解和应用观察者模式。
观察者模式基础
观察者模式由两个主要角色组成：Subject（主题）和 Observer（观察者）。他们之间的关系如下图所示：
- Subject（主题）：主题是被观察的对象，当它的状态发生改变时，会通知所有注册的观察者，并调用它们的更新方法。在 TypeScript 中，可以使用抽象类或接口来表示主题。
- Observer（观察者）：观察者是需要被通知的对象，它们注册到主题中以接收通知并响应状态更改。在 TypeScript 中，可以使用接口或类来表示观察者。
TypeScript 实现观察者模式
让我们看一下如何使用 TypeScript 来实现观察者模式。
首先，我们需要定义 Subject 接口和 Observer 接口：
-- -------------------- ---- ------- --------- ------- - -------------------------- ---------- ----- ------------------------ ---------- ----- ------------------ ----- - --------- -------- - --------- ----- -
接下来，我们将通过创建一个具体的主题类 WeatherStation 和两个具体的观察者类 TemperatureDisplay 和 HumidityDisplay 来演示如何使用观察者模式。
-- -------------------- ---- -------
----- -------------- ---------- ------- -
------- ------------ ------ - --
------- --------- ------ - --
------- ---------- ---------- - ---
------ -------------------------- ---------- ---- -
------------------------------
-
------ ------------------------ ---------- ---- -
----- ----- - ---------------------------------
-- ------ --- --- -
---------------------------- ---
-
-
------ ------------------ ---- -
--- ------ -------- -- --------------- -
------------------
-
-
------ --------------------------- -------- ---- -
---------------- - ------------
-----------------------
-
------ --------------------- -------- ---- -
------------- - ---------
-----------------------
-
------ ----------------- ------ -
------ -----------------
-
------ -------------- ------ -
------ --------------
-
-
----- ------------------ ---------- -------- -
------- ------------ ------ - --
------------------- -------- -------- -
-------------------------------
-
------ --------- ---- -
---------------- - ------------------------------
-------------------- ------------ ----------------------
-
-
----- --------------- ---------- -------- -
------- --------- ------ - --
------------------- -------- -------- -
-------------------------------
-
------ --------- ---- -
------------- - ---------------------------
-------------------- --------- -------------------
-
-在这个例子中，我们创建了一个主题类 WeatherStation，它有一个温度属性和一个湿度属性。我们还定义了两个观察者类 TemperatureDisplay 和 HumidityDisplay，它们会从 WeatherStation 中获取温度和湿度并显示出来。
当 WeatherStation 的温度或湿度发生变化时，它会调用 notifyObservers() 方法来通知所有注册的观察者并调用它们的 update() 方法
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5151