淺談vue原理（二）

　　上篇說了一下vue中的數據劫持和數據代理，就是將data中的數據都添加set/get方法，這使得擴展性更好了，後續的會在這個set/get方法添加咱們須要的邏輯；

　　如今咱們說說怎麼纔可以使得data中的數據和html標籤中的內容綁定呢？

1.編譯模板

　　首先咱們要思考一下，若是是你，你會怎麼讓data和html標籤中的{{user.name}}這種東西進行匹配啊？

 

　　千萬別想花裏胡哨的東西，最直接的辦法就是遍歷全部的html標籤，根據正則匹配到有兩個大括號的就行啊，而後就取出大括號中的數據user.name，而後切割一下，就成了[user，name]，再以後遍歷這個數組，拿到data[user][name]就好了，並且因爲前面已經作好數據代理，咱們能夠直接這樣取值myVue[user][name]，取到值以後，就把html標籤中{{xxx}}進行覆蓋，而後繼續找下一個有{{}}佔位符的；

　　這就是大概的邏輯，基於這個就能夠將html中的標籤中的{{user.name}}變成實際的數據了；

　　可是還須要解決一個問題，怎麼拿到全部的html標籤呢？並且在遍歷以後把數據渲染到頁面上效率提升一點呢？

　　因此咱們須要知道一個容器：document.createDocumentFragment，這是一個虛擬節點的容器樹，咱們能夠將當多個dom元素丟到DocumentFragment中，再統一將DocumentFragment添加到頁面，會減小頁面渲染dom的次數，效率會明顯提高。有興趣的能夠自行了解一下這個

　　ok，理論說完了，大概就是這麼幾步

　　（1）首先根據實例化myVue實例時候傳進去的el屬性 "#app"，就能夠找到dom節點

 let myVue = new MyVue({
      el: '#app',
      data: {
        message: { a: { b: 1 } }
      }
    })

　　（2）根據document.createDocumentFragment建立虛擬節點的容器樹，遍歷全部的dom節點都丟到容器樹中

　　（3）再遍歷虛擬容器樹中每一個節點，使用正則匹配到有兩個大括號的節點，將節點中的表達式取出來，例如user.name

　　  (4)  根據表達式取出data中的值，因爲進行了數據劫持，data中的值能夠直接用myVue[user][name]獲取，取到了值以後，就將對應的容器樹中的對應節點中{{user.name}}覆蓋掉

　　（5）將虛擬容器樹渲染到頁面中，咱們就能看出效果了；

下面用代碼簡單實現一下模板編譯的代碼：

function compile (el, vm) {
  return new Compile(el, vm);
}

function Compile (el, vm) {
  //找到el表明的那個dom節點，並掛載到myVue實例中
  vm.$el = document.querySelector(el);

  //建立虛擬節點容器樹
  let fragment = document.createDocumentFragment();

  //將el下全部的dom節點都放到容器樹中,注意appendChild方法，這裏是將將dom節點移動到容器樹中啊，不是死循環！
  while (child = vm.$el.firstChild) {
    // console.log('count:' + vm.$el.childElementCount);
    fragment.appendChild(child)
  };

  //遍歷虛擬節點中的全部節點，將真實數據填充覆蓋這種佔位符{{}}
  replace(fragment, vm);

  //將虛擬節點樹中內容渲染到頁面中
  vm.$el.appendChild(fragment);
}

function replace (n, vm) {
  //遍歷容器樹中全部的節點，解析出{{}}裏面的內容，而後將數據覆蓋到節點中去
  Array.from(n.childNodes).forEach(node => {
    //console.log('nodeType:' + node.nodeType); 
    let nodeText = node.textContent;
    let reg = /\{\{(.*)\}\}/;
    // 節點類型經常使用的有元素節點，屬性節點和文本節點，值分別是1,2,3
    //必定要弄清楚這三種節點，好比<p id="123">hello</p>,這個p標籤整個的就是元素節點，nodeType==1
    //id="123"能夠看做是屬性節點，nodeType==2
    //hello 表示文本節點，nodeType==3
    //由於佔位符{{}}只在文本節點中，因此須要判斷是否等於3
    if (node.nodeType === 3 && reg.test(nodeText)) {
      // RegExp.$1是RegExp的一個屬性,指的是與正則表達式匹配的第一個 子匹配(以括號爲標誌)字符串，以此類推，RegExp.$2。。。
      let arr = RegExp.$1.split(".");
      let val = vm;
      // 這個for循環就是取出這樣的值：myVue[name][user]
      arr.forEach(i => {
        val = val[i];
      })
      // 把值覆蓋到虛擬節點的佔位符{{xxx}}這裏
      node.textContent = nodeText.replace(reg, val);
    }
    // 最開始第一個遍歷的節點是<div id="app">這一行後面有個你看不到的換行，因此nodeType等於3，可是沒有佔位符{{}}，因此會進行遞歸調用內部
    //的每個節點，直到找到是文本節點並且有佔位符{{}}
    if (node.childNodes) {
      replace(node, vm);
    }
  })
}

  

2.js實現發佈訂閱模式

　　咱們說說設計模式，什麼叫作發佈訂閱模式呢？你想一想你微信訂閱的公衆號就知道了，假如一個微信的公衆號Dep，而後有3個用戶Watcher去訂閱它，而後公衆號Dep只要一發布什麼信息，那麼每個Watcher都會收到一份；

　　而後咱們要思考，首先是Dep，這裏面確定有一個容器，能夠裝訂閱過當前公衆號的全部用戶，並且還須要對外提供兩個api，一個是訂閱當前公衆號的方法，方便用戶使用；另一個是發佈信息的方法，是給公衆號所屬的那我的使用，只要他調用這個方法，就會遍歷這個容器中的全部用戶，向每一個用戶發送信息；

　　再就是用戶端Watcher，這端須要啥呢？確定也須要一個對外的api，方便公衆號那一端調用這個api把信息發送到用戶手機這邊來吧！而後每一個用戶都是不同的，咱們須要有個屬性做爲標識；

// 能夠看作是公衆號端
function Dep () {
  // 存放每一個用戶的容器
  this.subs = [];
}

//對外提供的api之一，供用戶訂閱
Dep.prototype.addSub = function (sub) {
  this.subs.push(sub);
}

// 對外提供的api之二，遍歷每一個用戶，給每一個用法發信息
Dep.prototype.notify = function () {
  this.subs.forEach(sub => {
    sub.update();
  });
}


// 用戶端
function Watcher (fn) {
  // 這個能夠看做是用戶的標誌；注意，這個fn通常是一個回調函數
  this.fn = fn;
}

// 用戶端提供的對外api，讓公衆號端使用
Watcher.prototype.update = function () {
  this.fn();
}


// ================================測試================================
// 新建三個用戶
let watcher1 = new Watcher(() => {
  console.log('發送給用戶1');
})
let watcher2 = new Watcher(() => {
  console.log('發送給用戶2');
})
let watcher3 = new Watcher(() => {
  console.log('發送給用戶3');
})

// 用戶註冊
let dep = new Dep();
dep.addSub(watcher1);
dep.addSub(watcher2);
dep.addSub(watcher3);

// 像每一個用戶發送信息
dep.notify();

　　使用node運行一下結果以下

 

　　理解了這個模式以後，後面咱們須要將這個設計模式應用到咱們本身的vue中，使得當咱們呢修改data中的數據以後，頁面上也會馬上刷新；

　　其實也很好理解，data只有一份嘛，就能夠想象成上面說的公衆號端，而後html中確定有多個佔位符{{}}的吧，那就是用戶端唄！只要data中的數據一修改，這確定就會觸發數據劫持的那個set方法吧，而後咱們只須要再set方法中搞點事，調用一下Dep的notify方法通知一下全部的Watcher，在Watcher中就會觸發那個fn回調函數去把頁面上的數據覆蓋局ok了；

　　這個發佈訂閱的實現代碼下一篇再寫；

 

3.現階段代碼

html文件；

<body>
  <div id="app">
    <h1>呵呵：{{user.name}}</h1>
  </div>

  <script src="./mvvm.js"></script>
  <script>

    // 自定義的myVue實例
    let myVue = new MyVue({
      el: '#app',
      data: {
        user: { name: "小王" }
      }
    })
  </script>
</body>

 

js代碼：

function MyVue (options = {}) {
  //第一步：首先就是將實例化的對象給拿到，獲得data對象
  this.$options = options;
  this._data = this.$options.data;

  //第二步：數據劫持，將data對象中每個屬性都設置get/set方法
  observe(this._data);

  //第三步：數據代理，這裏就是將_data的對象屬性放到myVue實例中一份，實際的數據仍是_data中的
  for (let key in this._data) {
    //這裏的this表明當前myVue實例對象
    Object.defineProperty(this, key, {
      enumerable: true,
      get () {
        return this._data[key];
      },
      set (newVal) {
        this._data[key] = newVal;
      }
    })
  }

  //第四步：compile模板,須要將el屬性和當前myVue實例
  compile(options.el, this)
}

function compile (el, vm) {
  return new Compile(el, vm);
}

function Compile (el, vm) {
  //將el表明的那個dom節點掛載到myVue實例中
  vm.$el = document.querySelector(el);

  //建立虛擬節點容器樹
  let fragment = document.createDocumentFragment();

  //將el下全部的dom節點都放到容器樹中,注意appendChild方法，這裏是將將dom節點移動到容器樹中啊，不是死循環！
  while (child = vm.$el.firstChild) {
    // console.log('count:' + vm.$el.childElementCount);
    fragment.appendChild(child)
  };

  //遍歷虛擬節點中的全部節點，將真實數據填充覆蓋這種佔位符{{}}
  replace(fragment, vm);

  //將虛擬節點樹中內容渲染到頁面中
  vm.$el.appendChild(fragment);
}

function replace (n, vm) {
  //遍歷容器樹中全部的節點，解析出{{}}裏面的內容，而後將數據覆蓋到節點中去
  Array.from(n.childNodes).forEach(node => {
    console.log('nodeType:' + node.nodeType);

    let nodeText = node.textContent;
    let reg = /\{\{(.*)\}\}/;
    // 節點類型經常使用的有元素節點，屬性節點和文本節點，值分別是1,2,3
    //必定要弄清楚這三種節點，好比<p id="123">hello</p>,這個p標籤整個的就是元素節點，nodeType==1
    //id="123"能夠看做是屬性節點，nodeType==2
    //hello 表示文本節點，nodeType==3
    //由於佔位符{{}}只在文本節點中，因此須要判斷是否等於3
    if (node.nodeType === 3 && reg.test(nodeText)) {
      // RegExp.$1是RegExp的一個屬性,指的是與正則表達式匹配的第一個 子匹配(以括號爲標誌)字符串，以此類推，RegExp.$2。。。
      let arr = RegExp.$1.split(".");
      let val = vm;
      // 這個for循環就是取出這樣的值：myVue[name][user]
      arr.forEach(i => {
        val = val[i];
      })
      // 把值覆蓋到虛擬節點的佔位符{{}}這裏
      node.textContent = nodeText.replace(reg, val);
    }
    // 第一個遍歷的節點是<div id="app">這一行後面的換行，nodeType等於3，可是沒有佔位符{{}}，因此會進入到這裏進行遞歸調用內部
    //的每個節點，直到找到文本節點並且佔位符{{}}
    if (node.childNodes) {
      replace(node, vm);
    }
  })
}

//數據劫持操做
function observe (data) {
  // 若是data不是對象，就結束，否則遞歸調用會棧溢出的
  if (typeof data !== 'object') return;
  return new Observe(data);
}

function Observe (data) {
  // 遍歷data全部屬性
  for (let key in data) {
    let val = data[key];
    //初始化的時候， data中就有複雜對象的時候，例如data: { message:{a:{b:1}}}  ,就須要遞歸的遍歷這個對象中每個屬性都添加get和set方法
    observe(val);
    Object.defineProperty(data, key, {
      enumerable: true,
      get () {
        return val;
      },
      set (newVal) {
        if (val === newVal) return;
        val = newVal;
        //當後續可能由於業務邏輯使得_data.message = {name: "小王"}，設置對象類型的屬性值，就須要遞歸的給對象中{name: "小王"}的每一個屬性也添加get和set方法
        //不然name是沒有get/set方法的
        observe(val);
      }
    })
  }
}

View Code

 

當前代碼的效果是頁面中能夠顯示數據了，下一篇咱們說說根據發佈訂閱原理，使得咱們改變data中的數據，頁面上的數據也會跟着變化