完美解釋 Javascript 響應式程式設計原理

陳澤輝發表於2019-03-03

深入響應式原理 — 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 框架，包含但不限於（Angular，React，Vue）都擁有自己的響應式引擎。通過了解響應式變成原理以及具體的實現方式，可以提成對既有響應式框架的高效應用。

響應式系統

我們看一下 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 發生變換時，它做了如下三件事情：

在頁面中更新 price 的值。
在頁面中重新計算 price * quantity 表示式，並更新。
呼叫 totalPriceWithTax 方法，並更新。

但是等一下，這裡有些疑惑，Vue 是怎麼知道 price 更新了呢，如何去追蹤更新的具體過程呢？

響應式在原生 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 變化時執行計算過程。

✅ 方案

首先，我們需要告訴應用程式，“這裡有一個關於計算的方法，存起來，我會在資料更新的時候去執行它。“

我們建立一個記錄函式並執行它：

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

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

record() // 記錄我們想要執行的例項 
target() // 執行 total 計算過程
複製程式碼

簡單定義一個 record：

let storage = [] // 將 target 函式存在這裡
function record () { // target = () => { total = price * quantity }
	storage.push(target)
}
複製程式碼

我們儲存了 target 函式，我們需要執行它，需要頂一個 replay 函式來執行我們記錄的函式：

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

通俗解釋什麼是響應式程式設計？
2016-08-26
程式設計
解釋Vue深入響應式原理
2017-05-01
Vue
[譯]JavaScript響應式的最佳解釋
2018-09-27
JavaScript
響應式程式設計與響應式系統
2017-08-12
程式設計
用一張GIF圖解釋響應式設計
2013-10-21
圖解
響應式設計？響應式設計的基本原理是什麼？如何做？
2021-04-16
使用Reactor響應式程式設計
2020-04-28
React程式設計
響應式程式設計RxJava （一）
2018-01-18
程式設計RxJava
響應式程式設計總覽
2017-06-21
程式設計
響應式程式設計一覽
2016-07-24
程式設計
響應式程式設計入門(RxJava)
2018-08-28
程式設計RxJava
響應式程式設計庫RxJava初探
2021-01-24
程式設計RxJava
函式響應式程式設計與RxSwift
2018-06-07
函式程式設計Swift
揚帆起航：從指令式程式設計到函式響應式程式設計
2019-02-06
程式設計函式
Vue響應式—-資料響應式原理
2019-02-28
Vue
Vue響應式----資料響應式原理
2017-11-20
Vue
響應式Web設計
2013-01-21
Web
響應式程式設計簡介之:Reactor
2020-11-06
程式設計React
響應式程式設計機制總結
2018-03-30
程式設計
[譯]函式式響應程式設計入門指南
2017-08-18
函式程式設計
向非程式設計師解釋JavaScript
2015-01-07
程式設計師JavaScript
向非程式設計師解釋 JavaScript
2012-07-31
程式設計師JavaScript
Vue 響應式原理
2022-03-07
Vue
對響應式程式設計的懷疑 - lukaseder
2019-11-15
程式設計
談響應式web設計程式碼實現
2014-12-15
Web
iOS 函式響應式程式設計（ReactiveCocoa）– 前篇
2016-06-23
iOS函式程式設計React
響應式 Web 設計技巧
2015-06-17
Web
由淺入深，帶你用JavaScript實現響應式原理（Vue2、Vue3響應式原理）
2022-03-27
JavaScriptVue
Vue 原始碼解讀（3）—— 響應式原理
2022-02-23
Vue原始碼
Java程式設計方法論-響應式之 Rxjava篇視訊解讀
2018-11-02
程式設計RxJava
RxJS 系列故事(1)——理解響應式程式設計
2020-03-12
JS程式設計
使用Java 9 Flow進行響應式程式設計
2018-11-28
Java程式設計
自適應網頁設計/響應式Web設計
2012-03-22
網頁Web
響應式網頁設計示例
2012-11-19
網頁
完美主義對新手程式設計師的影響
2017-09-06
程式設計師
自己實現一個VUE響應式--VUE響應式原理
2020-01-16
Vue
響應式程式設計與MVVM架構—理論篇
2019-03-04
程式設計MVVM架構
Kotlin Flow響應式程式設計，StateFlow和SharedFlow
2023-02-20
Kotlin程式設計

完美解釋 Javascript 響應式程式設計原理

響應式系統

響應式在原生 JavaScript 中如何實現的呢，我們從宣告變數開始吧~

⚠️ 問題

✅ 方案

物件化

⚠️ 問題

✅ 方案 Dependency Class

觀察者

⚠️ 問題

✅ 方案 A Watcher Function

資料抽象

⚠️ 問題

✅ 方案 Object.defineProperty()

CI 整合

知識點

相關文章