完美解释 Javascript 响应式编程原理

时间  2019-11-30
标签 完美 解释 javascript 响应 编程 原理 栏目 JavaScript 繁體版
原文   原文链接

深刻响应式原理 — Vue.js
https://medium.com/vue-mastery/the-best-explanation-of-javascript-reactivity-fea6112dd80d
https://www.vuemastery.com/courses/advanced-components/evan-you-on-proxies/javascript

不少前端 JavaScript 框架，包含但不限于（Angular，React，Vue）都拥有本身的响应式引擎。经过了解响应式变成原理以及具体的实现方式，能够提成对既有响应式框架的高效应用。html

响应式系统

咱们看一下 Vue 的响应式系统：前端

<div id="app">
	<div>Price: ${{ price }}</div>
	<div>Total: ${{ price * quantity }}</div>
	<div>Taxes: ${{ totalPriceWithTax }}</div>
<div>
复制代码
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
	var vm = new Vue({
	  el: '#app',
	  data: {
	    price: 5.00,
	    quantity: 2
	  },
	  computed: {
	    totalPriceWithTax() {
	      return this.price * this.quantity * 1.03
	    }
	  }
	})
</script>
复制代码

Vue 知道每当 price 发生变换时，它作了以下三件事情：vue

  • 在页面中更新 price 的值。
  • 在页面中从新计算 price * quantity 表达式，并更新。
  • 调用 totalPriceWithTax 方法，并更新。

可是等一下，这里有些疑惑，Vue 是怎么知道 price 更新了呢，如何去追踪更新的具体过程呢？java

响应式在原生 JavaScript 中如何实现的呢，咱们从声明变量开始吧~

let price = 5
let quantity = 2
let total = price *  quantity // 10 ？
price = 20
console.log(`total is ${total}`) // 10

// 咱们想要的 total 值但愿是更新后的 40
复制代码

⚠️ 问题

咱们须要将 total 的计算过程存起来，这样咱们就可以在 price 或者 quantity 变化时运行计算过程。react

✅ 方案

首先，咱们须要告诉应用程序，“这里有一个关于计算的方法，存起来，我会在数据更新的时候去运行它。“npm

咱们建立一个记录函数并运行它：数组

let price = 5
let quantity = 2
let total = 0
let target = null

target = () => { total = price * quantity }

record() // 记录咱们想要运行的实例 
target() // 运行 total 计算过程
复制代码

简单定义一个 record：bash

let storage = [] // 将 target 函数存在这里
function record () { // target = () => { total = price * quantity }
	storage.push(target)
}
复制代码

咱们存储了 target 函数，咱们须要运行它，须要顶一个 replay 函数来运行咱们记录的函数：app

function replay () {
	storage.forEach( run => run() )
}
复制代码

在代码中咱们运行：

price = 20
console.log(total) // => 10
replay()
console.log(total) // => 40
复制代码

是否是足够的简单，代码可读性好，而且能够运行屡次。FYI，这里用了最基础的方式进行编码，先扫盲。

let price = 5
let quantity = 2
let total = 0
let target = null
let storage = []

target = () => { total = price * quantity }

function record () {
	storage.push(target)
}

function replay () {
	storage.forEach( run => run() )
}

record()
target()

price = 20
console.log(total) // => 10
replay()
console.log(total) // => 40
复制代码

对象化

⚠️ 问题

咱们能够不断记录咱们须要的 target, 并进行 record，可是咱们须要更健壮的模式去扩展咱们的应用。也许面向对象的方式能够维护一个 targe 列表，咱们用通知的方式进行回调。

✅ 方案 Dependency Class

咱们经过一个属于本身的类进行行为的封装，一个标准的依赖类 Dependency Class，实现观察者模式。

若是咱们想要建立一个管理依赖的类，标准模式以下：

class Dep { // Stands for dependency 
	constructor () {
	  this.subscribers = [] // 依赖数组，当 notify() 调用时运行
	}

	depend () {
	  if (target && !this.subscribers.includes(target)) {
	    // target 存在而且不存在于依赖数组中，进行依赖注入
	    this.subscribers.push(target)
	  }
	}

	notify () { // 替代以前的 replay 函数
	  this.subscribers.forEach(sub => sub()) // 运行咱们的 targets，或者观察者函数
  }
}
复制代码

注意以前替换的方法，storage 替换成了构造函数中的 subscribers。recod 函数替换为 depend。replay 函数替换为 notify。

如今在运行：

const dep = new Dep()

let price = 5
let quantity = 2
let total = 0
let target = () => { total = price * quantity }

dep.depend() // 依赖注入
target() // 计算 total

console.log(total) // => 10
price = 20
console.log(total) // => 10
dep.notify()
console.log(total) // => 40
复制代码

工做正常，到这一步感受奇怪的地方，配置 和 运行 target 的地方。

观察者

⚠️ 问题

以后咱们但愿可以将 Dep 类应用在每个变量中，而后优雅地经过匿名函数去观察更新。可能须要一个观察者 watcher 函数去知足这样的行为。

咱们须要替换的代码：

target = () => { total = price * quantity }
dep.depend()
target()
复制代码

替换为：

watcher( () => {
  total = price * quantit
})
复制代码

✅ 方案 A Watcher Function

咱们先定义一个简单的 watcher 函数：

function watcher (myFunc) {
	target = myFunc // 动态配置 target
	dep.depend() // 依赖注入
	target() // 回调 target 方法
  target = null // 重置 target
}
复制代码

正如你所见， watcher 函数传入一个 myFunc 的形参，配置全局变量 target，调用 dep.depend() 进行依赖注入，回调 target 方法，最后，重置 target。

运行一下：

price = 20
console.log(total) // => 10
dep.notify()
console.log(total) // => 40
复制代码

你可能会质疑，为何咱们要对一个全局变量的 target 进行操做，这显得很傻，为何不用参数传递进行操做呢？文章的最后将揭晓答案，答案也是显而易见的。

数据抽象

⚠️ 问题

咱们如今有一个单一的 Dep class，可是咱们真正想要的是咱们每个变量都拥有本身的 Dep。让咱们先将数据抽象到 properties。

let data = { price: 5, quantity: 2 }
复制代码

将设每一个属性都有本身的内置 Dep 类

然我咱们运行：

watcher( () => {
  total = data.price * data.quantit
})
复制代码

当 data.price 的 value 开始存取时，我想让关于 price 属性的 Dep 类 push 咱们的匿名函数（存储在 target 中）进入 subscriber 数组（经过调用 dep.depend()）。而当 quantity 的 value 开始存取时，咱们也作一样的事情。

若是咱们有其余的匿名函数，假设存取了 data.price，一样的在 price 的 Dep 类中 push 此匿名函数。

当咱们想经过 dep.notify() 进行 price 的依赖回调时候。咱们想 在 price set 时候让回调执行。在最后咱们要达到的效果是：

$ total
10
$ price = 20 // 回调 notify() 函数
$ total
40
复制代码

✅ 方案 Object.defineProperty()

咱们须要学习一下关于 Object.defineProperty() - JavaScript | MDN。它容许咱们在 property 上定义 getter 和 setter 函数。咱们展现一下最基本的用法：

let data = { price: 5, quantity: 2 }

Object.defineProperty(data, 'price', { // 仅定义 price 属性
  get () { // 建立一个 get 方法
    console.log(`I was accessed`)
	},
	set (newVal) { // 建立一个 set 方法
    console.log(`I was changed`)
	}
})

data.price // 回调 get()
// => I was accessed
data.price = 20 // 回调 set()
// => I was changed
复制代码

正如你所见，打印两行 log。然而，这并不能推翻既有功能， get 或者 set 任意的 value。get() 指望返回一个 value，set() 须要持续更新一个值，因此咱们加入 internalValue 变量用于存储 price 的值。

let data = { price: 5, quantity: 2 }

let internalValue = data.price // 初始值

Object.defineProperty(data, 'price', { // 仅定义 price 属性
  get () { // 建立一个 get 方法
    console.log(`Getting price: ${internalValue}`)
    return internalValue
	},
	set (newVal) { // 建立一个 set 方法
    console.log(`Setting price: ${newVal}`)
	  internalValue = newVal
	}
})

total = data.price * data.quantity // 回调 get()
// => Getting price: 5
data.price = 20 // 回调 set()
// => Setting price: 20
复制代码

至此，咱们有了一个当 get 或者 set 值的时候的通知方法。咱们也能够用某种递归能够将此运行在咱们的数据队列中？

FYI，Object.keys(data) 返回对象的 key 值列表。

let data = { price: 5, quantity: 2 }

Object.keys(data).forEach(key => {
  let internalValue = data[key]
  Object.defineProperty(data, key, {
	  get () {
      console.log(`Getting ${key}: ${internalValue}`)
      return internalValue
	  },
	  set (newVal) {
      console.log(`Setting ${key}: ${newVal}`)
	    internalValue = newVal
	  }
  })
})

total = data.price * data.quantity
// => Getting price: 5
// => Getting quantity: 2
data.price = 20
// => Setting price: 20
复制代码

CI 集成

将全部的理念集成起来

total = data.price * data.quantity
复制代码

当代码碎片好比 get 函数的运行而且 get 到 price 的值，咱们须要 price 记录在匿名函数 function(target) 中，若是 price 变化了，或者 set 了一个新的 value，会触发这个匿名函数而且 get return，它可以知道这里更新了同样。因此咱们能够作以下抽象：

  • Get => 记录这个匿名函数，若是值更新了，会运行此匿名函数

  • Set => 运行保存的匿名函数，仅仅改变保存的值。

在咱们的 Dep 类的实例中，抽象以下：

  • Price accessed (get) => 回调 dep.depend() 去注入当前的 target

  • Price set => 回调 price 绑定的 dep.notify() ，从新计算全部的 targets

让咱们合并这两个理念，生成最终代码：

let data = { price: 5, quantity: 2 }
let target = null

class Dep { // Stands for dependency 
	constructor () {
	  this.subscribers = [] // 依赖数组，当 notify() 调用时运行
	}

	depend () {
	  if (target && !this.subscribers.includes(target)) {
	    // target 存在而且不存在于依赖数组中，进行依赖注入
	    this.subscribers.push(target)
	  }
	}

	notify () { // 替代以前的 replay 函数
	  this.subscribers.forEach(sub => sub()) // 运行咱们的 targets，或者观察者函数
  }
}

// 遍历数据的属性
Object.keys(data).forEach(key => {
  let internalValue = data[key]

	// 每一个属性都有一个依赖类的实例
  const dep = new Dep()

  Object.defineProperty(data, key, {
	  get () {
      dep.depend()
      return internalValue
	  },
	  set (newVal) {
	    internalValue = newVal
		dep.notify()
	  }
  })
})

// watcher 再也不调用 dep.depend
// 在数据 get 方法中运行
function watcher (myFunc) {
	target = myFunce
	target()
	target = null
}

watcher(()=> {
	data.total = data.price * data.quantity
})

data.total
// => 10
data.price = 20
// => 20
data.total
// => 40
data.quantity = 3
// => 3
data.total
// => 60
复制代码

这已经达到了咱们的指望，price 和 quantity 都成为响应式的数据了。

Vue 的数据响应图以下：

看到紫色的 Data 数据，里面的 getter 和 setter？是否是很熟悉了。每一个组件的实例会有一个 watcher的实例（蓝色圆圈）, 从 getter 中收集依赖。而后 setter 会被回调，这里 notifies 通知 watcher 让组件从新渲染。下图是本例抽象的状况：

显然，Vue 的内部转换相对于本例更复杂，但咱们已经知道最基本的了。

知识点

  • 如何建立一个 Dep class 而且注入全部的依赖执行（notify）
  • 如何建立一个 watcher 进行代码管理，须要添加一个依赖项目
  • 如何使用 Object.defineProperty() 建立一个 getters 和 setters
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程