快捷導(dǎo)航

實(shí)現(xiàn)一個(gè)簡(jiǎn)單得數(shù)據(jù)響應(yīng)系統(tǒng)

更新時(shí)間：2021年11月08日 10:49:08 作者：zz

這篇文章主要介紹了實(shí)現(xiàn)一個(gè)簡(jiǎn)單得數(shù)據(jù)響應(yīng)系統(tǒng)，文章介紹的數(shù)據(jù)響應(yīng)系統(tǒng)會(huì)用到Dep，其實(shí)，這就是一個(gè)依賴收集的容器， depend 收集依賴， notify 觸發(fā)依賴，下面來(lái)看看詳細(xì)的內(nèi)容結(jié)介紹,需要的朋友可以參考一下

1、Dep

其實(shí)，這就是一個(gè)依賴收集的容器， depend 收集依賴， notify 觸發(fā)依賴

class Dep{
  constructor() {
    this._subs = [];
  }
  depend () {
    this._subs.push(Dep.target)
  }
  notify() {
    this._subs.forEach(item => {
      item.fn();
    })
  }
}

// 其實(shí)就是 dep 和 watcher 基情滿滿的開始，watcher 中用到
// 通過(guò)一個(gè)全局屬性來(lái)存 watcher
Dep.target = null;

function pushTarget(watch) {
  Dep.target = watch;
}

function popTarget() {
  Dep.target = null;
}

2、了解 obverser

遞歸，將 data 對(duì)象所有屬性轉(zhuǎn)化為訪問(wèn)器屬性

// 轉(zhuǎn)為訪問(wèn)器屬性
function defineReactive (obj, key, val, shallow) {

  // 創(chuàng)建一個(gè)依賴收集容器
  let dep = new Dep();
  let childOb = !shallow && observe(val)

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      if(Dep.target) {
        // 收集依賴
        dep.depend();
      }
      return val;
      // ...
    },
    set: function reactiveSetter (newVal) {
      if(newVal === val) return;
      // 繼續(xù)遞歸遍歷
      observe(newVal);
      // 觸發(fā)依賴
      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 對(duì)象所有屬性轉(zhuǎn)化為訪問(wèn)器屬性
function observe (data) {
  if(Object.prototype.toString.call(data) !== '[object Object]') return;
  new Observer(data);
}

此時(shí)就可以把任意一個(gè)對(duì)象的全部屬性轉(zhuǎn)為訪問(wèn)器

3、了解 watch 和 observer

const data = {
  a: 1,
  b: 2
}

// 首先監(jiān)控一個(gè)對(duì)象
observe(data);

watcher 的主要功能是檢測(cè)某個(gè)屬性，當(dāng)屬性變化時(shí)觸發(fā)一個(gè)回調(diào)

class Watcher{
  /**
  * @params {Function} exp 一個(gè)屬性表達(dá)式
  * @params {Function} fn 回調(diào)
  */
  constructor(exp, fn) {
    this.exp = exp;
    this.fn = fn;

    // 存 watcher
    // Dep.target = this;
    pushTarget(this);

    // 先執(zhí)行一次表達(dá)式函數(shù)，會(huì)在調(diào)用過(guò)程中，
    // 觸發(fā)到 data.a 的訪問(wèn)器， data.a 的 get 被執(zhí)行，
    // 觸發(fā) dep.depend() 開始收集依賴
    this.exp();

    // 釋放 Dep.target
    popTarget();
  }
}

// new Watcher 這樣一個(gè)依賴就被收集了
new Watcher(() => {
  return data.a + data.b;
}, () => {
  console.log('change')
})

4、觸發(fā)依賴

data.a = 3; // change
data.b = 3; // change

5、總結(jié)一下流程

把一個(gè)對(duì)象的全部屬性轉(zhuǎn)化為訪問(wèn)器
當(dāng)為某一個(gè)屬性增加 watcher 時(shí)，會(huì)觸發(fā)改屬性的 get，get 函數(shù)中會(huì)把該 watcher 存到該屬性的 dep 依賴容器中
當(dāng)這個(gè)屬性發(fā)生變化時(shí)，會(huì)出發(fā)改屬性的 set 的方法，set 函數(shù)中會(huì)把 dep 存的依賴都執(zhí)行

到此這篇關(guān)于實(shí)現(xiàn)一個(gè)簡(jiǎn)單得數(shù)據(jù)響應(yīng)系統(tǒng)的文章就介紹到這了,更多相關(guān)數(shù)據(jù)響應(yīng)系統(tǒng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: