淺談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中的數據，頁面上的數據也會跟着變化

淺談vue原理（二）

挑戰程序設計競賽 2.3章習題 poj 3046 Ant Counting

Shell/Python中的用戶名獲取

2024年初胡亂吐槽

一個mysql的group_concat導致的問題

java常用代碼整理

簡單記錄一次遠古版本dubbo發生的PermGen space異常

spring循環依賴上篇- spring整體啓動流程

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結