[译] 以 Vue 为例,解释 JavaScript 的反应性

很多前端 JavaScript 框架(如 Angular、React 和 Vue)都有自己的反应性(Reactivity)引擎。理解反应式是什么以及如何运行能够提升你的开发水平,同时能够更高效地使用 JavaScript。在本文中,我们构建了与 Vue 源码相同的反应性功能。

作者|Gregg Pollack

译者|张卫滨

很多前端 JavaScript 框架(如 Angular、React 和 Vue)都有自己的反应性(Reactivity)引擎。理解反应式是什么以及如何运行能够提升你的开发水平,同时能够更高效地使用 JavaScript。在本文中,我们构建了与 Vue 源码相同的反应性功能。

反应性系统

当你第一次见到 Vue 的反应性系统时,你可能会感觉有些神奇。以下面这个简单的 Vue 应用为例:

图1:[译] 以 Vue 为例,解释 JavaScript 的反应性

图2:[译] 以 Vue 为例,解释 JavaScript 的反应性

不知道基于什么原因,Vue 能够知道 price 的值是否发生了变化,并且在变化的时候能够完成如下三件事情:

  • 更新 Web 页面 price 的值;
  • 重新计算乘法表达式 price * quantity ,并更新页面;
  • 再次调用 totalPriceWithTax 函数并更新页面。

但是,稍等,我似乎听到你想问,Vue 如何知道在 price 发生变化的时候都要更新哪些值,它又是如何跟踪所有的内容的呢?

图3:[译] 以 Vue 为例,解释 JavaScript 的反应性

这并不是 JavaScript 编程通常的运行方式。

如果这对你来说不那么直观,那么我们需要明白程序通常并不是按照这种方式来运行的。例如,如果我运行下面的样例代码:

图4:[译] 以 Vue 为例,解释 JavaScript 的反应性

你猜将会打印出什么内容呢?因为我们没有使用 Vue,它将会打印出 10 :

在 Vue 中,我们想要在 pricequantity 更新的时候, total 也进行更新。我们希望的输出是:

但令人遗憾的是,JavaScript 是过程性的,并不是反应式的,所以在现实代码并这并不可行。为了让 total 具有反应性,我们必须让 JavaScript 语言按照不同的方式来运行。

问题

我们需要记住如何计算 total ,这样才能在 pricequantity 发生变化的时候重新运行。

解决方案

首先,我们需要有某种方法告诉我们的应用,“我将要运行的代码是什么, 将它存储起来 ,在稍后某个时间点我可能需要你运行它”。然后,我们运行代码,在 pricequantity 变量发生变化的时候,再次运行存储的代码:

图5:[译] 以 Vue 为例,解释 JavaScript 的反应性

我们想到的办法可能就是将函数的内容记录下来,这样就能再次运行了:

图6:[译] 以 Vue 为例,解释 JavaScript 的反应性

需要注意,我们在 target 变量中存储了一个匿名函数,然后调用了 record 函数。如果采用 ES6 的箭头语法的话,我还可以写成如下的形式:

record 的定义非常简单:

图7:[译] 以 Vue 为例,解释 JavaScript 的反应性

我们将 target 存储了起来(我们的示例中也就是 { total = price * quantity } ),这样的话,我们就能在随后运行它,可能会借助一个 replay 函数运行我们记录下来的所有内容。

图8:[译] 以 Vue 为例,解释 JavaScript 的反应性

这样会遍历我们在 storage 数组中存储的所有匿名函数,并运行它们。

那么在我们的代码中,只需:

图9:[译] 以 Vue 为例,解释 JavaScript 的反应性

非常简单,对吧?如果你想要通读代码并再次尝试的话,下面给出了完整的代码。

图10:[译] 以 Vue 为例,解释 JavaScript 的反应性

问题

我们可以按需继续记录 target,但是更好的方式是有一种健壮的方案,能够扩展我们的应用。我们可以使用一个类,让这个类维护一个 target 的列表,当需要它们重新运行的时候,这个类会得到通知。

解决方案:依赖类

要解决这个问题,我们将这些行为封装到单独的类中,使用一个依赖类( Dependency Class )来实现标准的观察者模式编程。

如果我们创建 JavaScript 类来管理依赖的话(类似于 Vue 的处理方式),它看起来可能会如下所示:

图11:[译] 以 Vue 为例,解释 JavaScript 的反应性

需要注意,我们这里不再使用 storage ,而是使用 subscribers 来存储匿名函数,也不再使用 record 函数了,而是调用 depend ,同时使用 notify 代替了 replay 。要让它运行起来,只需:

图12:[译] 以 Vue 为例,解释 JavaScript 的反应性

它依然可以运行,而且我们的代码看上去具备了一定的可重用性。唯一感觉尤其诡异的地方就是设置和运行 target

问题

未来,每个类都会有一个 Dep 类,如果能将创建匿名函数观察更新的行为封装起来就更好了。接下来, watcher 函数将会出场来负责这种行为。

所以,我们将不会再调用:

图13:[译] 以 Vue 为例,解释 JavaScript 的反应性

(这就是上面示例的代码)

相反,我们只需这样调用:

图14:[译] 以 Vue 为例,解释 JavaScript 的反应性

解决方案:Watcher 函数

在 Watcher 函数中,我们可以做几件很简单的事情:

图15:[译] 以 Vue 为例,解释 JavaScript 的反应性

可以看到, watcher 函数接受一个 myFunc 变量,将其作为我们的全局 target 属性,调用 dep.depend() ,将会以订阅者的形式添加我们的 target,调用 target 函数并重置 target

现在,我们可以运行下面的代码:

图16:[译] 以 Vue 为例,解释 JavaScript 的反应性

你可能会想,我们为什么要将 target 实现为全局变量,而不是将其传递给所需的函数。这里有一定的原因,在本文结束的时候,相信你就明白了。

问题

我们现在有了一个 Dep 类,但是我们真正想要实现的是每个变量都有自己的 Dep。在进行下一步讲解之前,我们先将它们放到属性中。

我们先假设每个属性( pricequantity )都有其自己的内部 Dep 类。

图17:[译] 以 Vue 为例,解释 JavaScript 的反应性

现在,当我们运行:

图18:[译] 以 Vue 为例,解释 JavaScript 的反应性

因为访问到了 data.price 的值,所以我希望 price 属性的 Dep 类要将我们的匿名函数(存储在 target 中)放到它的订阅数组中(通过调用 dep.depend() )。因为 data.quantity 也被访问到了,所以我希望 quantity 属性的 Dep 类要将该匿名函数(存储在 target 中)放到它的订阅数组中:

图19:[译] 以 Vue 为例,解释 JavaScript 的反应性

如果我还有其他的匿名函数只访问 data.price 的话,我希望要将这个函数放到 price 属性的 Dep 类中。

图20:[译] 以 Vue 为例,解释 JavaScript 的反应性

那么,我该在何时为 price 的订阅者调用 dep.notify() 呢?答案是为 price 赋值的时候。在本文结束的时候,我希望能够在命令行中实现如下的效果:

图21:[译] 以 Vue 为例,解释 JavaScript 的反应性

我们希望能有某种方式嵌入到数据属性中( pricequantity ),这样的话,当属性被访问的时候,能够将 target 存储到订阅者数组中,当属性变更时,能够运行存储在订阅者数组中的函数。

解决方案:Object.defineProperty()

我们需要学习 ES 5 JavaScript 所提供 Object.defineProperty() 函数。它允许我们为属性定义 getter 和 setter 函数。在展示如何与 Dep 类协作之前,我们看一下它的基础用法。

图22:[译] 以 Vue 为例,解释 JavaScript 的反应性

图23:[译] 以 Vue 为例,解释 JavaScript 的反应性

可以看到,这里只是打印了两条日志。但是,它并没有实际 getset 值,这是因为我们将功能覆盖掉了。现在,我们将功能添加回来。 get() 预期要返回一个值,而 set() 依然要更新值,所以我们添加一个 internalValue 变量来存储当前的 price 值。

图24:[译] 以 Vue 为例,解释 JavaScript 的反应性

我们的 getset 都能正常运行了,你觉得控制台的打印信息会是什么呢?

图25:[译] 以 Vue 为例,解释 JavaScript 的反应性

所以,当取值和设置值的时候,我们有了一种得到提醒的方法。借助一些递归,我们就可以将其用到数据数组的所有条目中了。

值得一提的是, Object.keys(data) 能够返回对象中 key 所组成的数组。

图26:[译] 以 Vue 为例,解释 JavaScript 的反应性

现在,所有的属性都有 getter 和 setter 了,我们来看一下控制台:

图27:[译] 以 Vue 为例,解释 JavaScript 的反应性

将这两个理念组合在一起

当这样的代码运行并尝试 get price 属性的值时,我们希望 price 能够记住这个匿名函数( target )。通过这种方式,如果 price 发生了变化,或者被 set 了一个新的值,这个函数就能重新运行,因为它能够知道这行代码依赖该属性。所以,你可以按照如下的方式来思考。

Get=>记住该匿名函数,当值发生变化的时候我们会重新运行。

Set=>运行保存的匿名函数,我们的值就会发生变化。

或者,在 Dep Class 的场景下:

Price 访问 (get)=>调用 dep.depend() 保存当前的 target ;

Price set=>调用 price 的 dep.notify() ,重新运行所有的 target

接下来,我们将这两个理念组合起来,并看一下最终的代码。

图28:[译] 以 Vue 为例,解释 JavaScript 的反应性

在我们运行的时候,看一下控制台的输出:

图29:[译] 以 Vue 为例,解释 JavaScript 的反应性

完全符合我们的预期!现在 pricequantity 都是反应式的了。当 pricequantity 的值更新时,我们的代码完全重新运行了。

Vue 文档中的图示对你来说应该就非常清晰了。

图30:[译] 以 Vue 为例,解释 JavaScript 的反应性

看到漂亮的 Data 圆圈中的 getters 和 setters 了吗?它看起来似曾相识!每个组件实例都有一个 watcher (蓝色圆圈),它会从 getter 中收集依赖(红线)。当 setter 随后被调用时,它会 通知 watcher,从而会导致组件的重新渲染。如下的图片添加了一些我自己的注释。

图31:[译] 以 Vue 为例,解释 JavaScript 的反应性

现在,是不是感觉一目了然了呢?

当然,Vue 底层的处理要更复杂,但是你现在已经掌握了它的基础。

我们学到了什么呢?

  • 如何创建 Dep 来收集依赖(depend)并重新运行所有的依赖(notify);
  • 如何创建 watcher 来管理我们正在运行的代码,这些代码可能需要作为依赖添加进来(target);
  • 如何使用 Object.defineProperty() 来创建 getter 和 setter。
阅读余下内容

发表评论

电子邮件地址不会被公开。 必填项已用*标注


京ICP备12002735号