實現一個簡單得資料響應系統
阿新 • • 發佈:2021-11-09
目錄
- 1、Dep
- 2、瞭解 obverser
- 3、瞭解 watch 和 observer
- 4、觸發依賴
- 5、總結一下流程
1、Dep
其實,這就是一個依賴收集的容器, depend
收集依賴, notify
觸發依賴
class Dep{ constructor() { this._subs = []; } depend () { this._subs.push(Dep.target) } notify() { this._subs.forEach(item => { item.fn(); }) } } // 其實就是 dep 和 watcher 基情滿滿的開始,watcher 中用到 // 通過一個全域性屬性來存 watcher Dep.target = null; function pushTarget(watch) { Dep.target = watch; } function popTarget() { Dep.target = null; }
2、瞭解 obverser
遞迴,將 data 物件所有屬性轉化為訪問器屬性
// 轉為訪問器屬性 function defineReactive (obj,key,val,shallow) { // 建立一個依賴收集容器 let dep = new Dep(); let childOb = !shallow && observe(val) Object.defineProperty(obj,{ enumerable: true,configurable: true,get: function reactiveGetter () { if(Dep.target) { // 收集依賴 dep.depend(); } return val; // ... },set: function reactiveSetter (newVal) { if(newVal === val) return; // 繼續遞迴遍歷 observe(newVal); // 觸發依賴 dep.notify(); // ... } }) } class Observer{ constructor(data) { this.walk(data); } walk(data) { const keys = Object.keys(data) for (let i = 0; i < keys.length; i++) { defineReactive(data,keys[i],data[keys[i]]) } } } // 遞迴,將 data 物件所有屬性轉化為訪問器屬性 function observe (data) { if(Object.prototype.toString.call(data) !== '[object Object]') return; new Observer(data); }
此時就可以把任意一個物件的全部屬性轉為訪問器
3、瞭解 watch 和 observer
const data = www.cppcns.com{ a: 1,b: 2 } // 首先監控一個物件 observe(data);
watcher
的主要lFJOKasvK功能是檢測某個屬性,當屬性變化時觸發一個回撥
class Watcher{ /** * @params {Function} exp 一個屬性表示式 * @params {Function} fn 回撥 */ constructor(exp,fn) { this.exp = exp; this.fn = fn; // 存 watcher // Dep.target = this; pushTarget(this); // 先執行一次表示式函式,會在呼叫過程中, // 觸發到 data.a 的訪問器, data.a 的 get 被執行, // 觸發 dep.depend() 開始收集依賴 this.exp(); // 釋放 Dep.target popTarget(); } } // new Watcher 這樣一個依賴就被收集了 new Watcher(() => { return data.a + data.b; },() => { console.log('change') })
4、觸發依賴
data.a = 3; // change data.b = 3; // change
5、總結一下流程
- 把一個物件的全部屬性轉化為訪問器
- 當為某一個屬性增加
watcher
時,會觸發改屬性的get
,get
函式中會把該watcher
存到該屬性的dep
依賴容器中 - 當這個屬性發生變化時lFJOKasvK,會出發改屬性的
set
的方法,set
函式中會把dep
存的依賴都執行
到此這篇關於實現一個簡單得資料響應系統的文章就介紹到這了,更多相關資料響應系統內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!