從零開始用 proxy 實現 Mobx

黃子毅發表於2019-03-04

dynamic-object 只對外暴露了三個 api:observable observe Action,分別是 動態化物件變化監聽懶追蹤輔助函式

下面以開發角度描述實現思路,同時作為反思,如果有更優的思路,我會隨時更新。

1. 術語解釋

本庫包含許多抽象概念,為了簡化描述,使用固定單詞指代,約定如下:

單詞 含義
observable dynamic-object 提供的最重要功能,將物件動態化的函式
observe 監聽其回撥函式中當前訪問到的 observable 化的物件的修改,並在值變化時重新出發執行
observer 指代 observe 中的回撥函式

2. 總體思路

如果單純的實現 observable,使用 proxy 很簡單,可以完全監聽物件的變化,難點在於如何在 observe 中執行依賴追蹤,並當 observable 物件觸發 set 時,觸發對應 observe 中的 observer

每個 observable 物件觸發 get 時,都將當前所在的 object + key 與當前 observer 對應關係儲存起來,當其被 set 時,拿到對應的 observer 執行即可。

我們必須依賴持久化變數才能做到這一點,因為 observableset 過程,與 observerget 的過程是分開的。

3. 定義持久化變數

變數名 型別 含義
proxies WeakMap 所有代理物件都儲存於此,當重複執行 observable 或訪問物件子屬性時,如果已經是 proxy 就從 proxies 中取出返回
observers WeakMap<object, map<propertykey,=”” set<observer=””>>>

相關文章