译]JavaScript响应式的最佳解释

程序开发 2023-09-12 22:53:50

原文地址：The Best Explanation of JavaScript Reactivity

转载地址：https://juejin.im/post/5bac7405f265da0af93b097e

许多前端JavaScript框架（例如Angular，React和Vue）都有自己的Reactivity引擎。通过了解响应式及其工作原理，您可以提高开发技能并更有效地使用JavaScript框架。在视频和下面的文章中，我们构建了您在Vue源代码中看到的相同类型的Reactivity。

?响应式系统

当你第一次看到它时，Vue的响应式系统看起来很神奇。拿这个简单的Vue应用程序来说：

不知何故Vue只是知道如果price改变，它应该做三件事：

我们解决一个大问题是通常不会这样编程。例如，如果我运行如下代码：

你觉得它打印什么？由于我们没有使用Vue，它将打印出来10。

在Vue中，我们希望total随着price或quantity更新而更新。我们想要：

不幸的是，JavaScript是程序性的，而不是响应式的，所以这在现实中不起作用。为了实现total响应，我们必须使用JavaScript来使事情表现得与众不同。

⚠️ 问题

我们需要保存如何计算得到total，这样可以在price或quantity更新时重新运行它，

✅ 解决方案

首先，需要一些方法告诉我们的应用程序，“我即将运行的代码，存储它，我可能需要在其他时间运行它。”然后我们开始运行代码，如果price或quantity变量得到更新，再次运行存储的代码。

我们可以通过记录函数来执行此操作，以便我们可以再次运行它。

请注意，我们在target变量中存储了一个匿名函数，然后调用一个record函数。使用ES6箭头语法我也可以这样写：

这个record函数定义很简单：

我们正在存储target（在我们的例子中{ total = price * quantity }），所以我们可以稍后运行它，可以通过一个replay函数来运行存储的所有内容。

这将遍历执行storage 数组中存储的所有匿名函数。然后在代码中，我们可以：

很简单吧？如果您需要阅读并尝试再次理解它，这里有完整的代码，仅供参考，如果您想知道原因，我会以特定的方式对此进行编码。

⚠️ 问题

我们可以根据需要继续记录target，但是有一个更强大的解决方案可以扩展我们的应用程序。一个负责维护target列表的类，当需要它们重新运行时，这些target列表会得到通知。

✅ 解决方案：依赖类

我们解决这个问题的一种方法是将这种行为封装到它自己的类中，这是一个实现标准观察者模式的依赖类。

因此，如果我们创建一个JavaScript类来管理我们的依赖项（它更接近Vue的处理方式），它可能看起来像这样：

请注意，我们现在存储匿名函数是subscribers而不是storage。我们现在调用的函数是depend而不是record，我们现在使用notify而不是replay。为了让这个运行：

它仍然有效，现在的代码感觉更可重用。唯一仍然感觉有点奇怪的是设置和运行target。

⚠️ 问题

我们将为每个变量设置一个Dep类，并且很好地封装了创建需要监视更新的匿名函数的行为。也许一个watcher函数可能是为了处理这种行为。

所以不要这样调用：

（这只是上面的代码）我们可以改为：

✅ 解决方案：观察者函数

在我们的Watcher函数中，我们可以做一些简单的事情：

如您所见，该watcher函数接受一个myFunc参数，将其设置为全局target属性，调用dep.depend()将target添加到订阅者subscriber，执行target函数，然后重置target函数。

现在，当我们运行以下内容时：

您可能想知道为什么我们将target设为全局变量，而不是将其传递到我们需要的函数中。这将在我们的文章结尾处解释。

⚠️ 问题

我们有一个单独的Dep class，但我们真正想要的是每个变量都有自己的Dep。在继续之前，将数据设为对象属性。

假设每个属性（price和quantity）都有自己的内部Dep类。

现在我们执行时：

由于访问了data.price的值，我希望price属性的Dep类将存储在target的匿名函数推送到其subscriber 数组（通过调用dep.depend()）。由于data.quantity被访问，我还希望quantity属性Dep类将存储在target的匿名函数推送到其subscriber 数组中。