[譯]JavaScript響應式的最佳解釋

sunshine楊小咩發表於2018-09-27

原文地址：The Best Explanation of JavaScript Reactivity

許多前端JavaScript框架（例如Angular，React和Vue）都有自己的Reactivity引擎。通過了解響應式及其工作原理，您可以提高開發技能並更有效地使用JavaScript框架。在視訊和下面的文章中，我們構建了您在Vue原始碼中看到的相同型別的Reactivity。

?響應式系統

當你第一次看到它時，Vue的響應式系統看起來很神奇。拿這個簡單的Vue應用程式來說：

不知何故Vue只是知道如果price改變，它應該做三件事：

更新網頁上price的值。
重新計算乘法表示式price * quantity，並更新頁面。
再次呼叫函式totalPriceWithTax並更新頁面。但是等等，你是否會好奇，Vue如何知道price更改時所要更新的內容，以及它如何跟蹤所有內容？
這並不是JavaScript通常的工作方式

我們解決一個大問題是通常不會這樣程式設計。例如，如果我執行如下程式碼：

你覺得它列印什麼？由於我們沒有使用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 陣列中。