使用 ES10 的函数极简实现 JavaScript 中的观察者模式

阅读时长 4 分钟读完

观察者模式(Observer Pattern)是 JavaScript 开发中非常常见的一种设计模式,应用广泛。它的实现可以在实践中提高代码的复用性和可维护性。本篇文章介绍如何用 ES10 函数的方法来实现观察者模式,并且带有详细的示例代码和说明。

什么是观察者模式

观察者模式是一种使得对象之间的状态信息同步变得简单的设计模式。它定义了对象之间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖它的对象都会自动接收到通知,即实时更新。

简单的说,当一个对象的状态改变时,通过观察者模式,其他的对象可以获知这一改变,并且做出相应的操作。

如何使用 ES10 的函数实现观察者模式

ES10 中新增的函数 Array.prototype.flat() 可以将数组扁平化,返回一个新的数组。可以使用该函数实现观察者模式。

-- -------------------- ---- -------
----- ------- -
  ------------- -
    -------------- - ---
  -

  --------------------- -
    ------------------------------
  -

  ------------------------ -
    -------------- - ------------------------ -- -- --- ----------
  -

  ----------------- -
    ---------------------------------------------- -- -
      ----------------------
    ---
  -
-

----- -------- -
  ------------- -
    ------------ - ---
  -

  ------------------- -
    ----- -- - ---------
    ---------------- - ---------
    ------ ---
  -

  ---------------- -
    ------ -----------------
  -

  --------------- -
    --- ------ -- -- ------------- -
      --------------------------
    -
  -
-

在上述代码中,我们定义了 Subject 和 Observer 两个类,分别是观察者模式的主角。其中,

  • Subject: 表示被观察的对象,负责管理着观察者的集合,并且通知所有的观察者。
  • Observer: 表示观察者对象,负责接收来自 Subject 的通知,并且做出响应。

假设我们有一个 Subject 对象,比如:

我们可以添加 Observer 对象作为观察者,例如:

将观察者添加到被观察的对象中:

Observer 对象需要定义一个或多个回调函数,用于对被观察对象的状态进行响应。我们可以使用 addAction() 方法向 Observer 中添加一个响应函数:

这里我们使用了 Symbol() 函数创建了一个唯一的 id,用于删除响应函数时使用。addAction() 方法返回一个惟一值标识响应函数的 id。

可以通过 removeAction() 方法来删除这个函数:

这里我们使用 addActions() 方法返回的 id 来删除之前添加的响应函数。

当被观察者状态发生改变时,我们需要调用 Subject 对象的 notifyObservers() 方法来通知所有的观察者:

在这个方法的内部,我们使用了 observers.flat(Infinity) 将所有的观察者扁平化,使得处理过程更加方便和高效。

观察者模式的应用

观察者模式被广泛应用于最常见的 JavaScript 中,这将带来更好的可维护性和代码复用性。它可以用于实现以下场景:

  1. 数据监听:当数据发生改变时,自动更新 UI。

  2. 消息订阅/发布:多个对象可以向自己感兴趣的事件进行订阅,并且在事件触发的时候得到通知。

  3. 模块化开发:在模块化开发中,多个模块只需要关心一个公共的事件,而不用关心彼此之间的依赖关系。

结论

在本篇文章中,我们介绍了观察者模式的基本概念和用途,并且使用 ES10 的函数实现了观察者模式的例子。需要注意的是,实现函数需要对代码结构和执行速度有较深的理解和掌握,诸如 Symbol()flat() 等函数均需要有必要的掌握,以实现代码的高效性和可维护性。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/674ab748a1ce006354a09110

纠错
反馈