淺談vue原理（三）

時間  2021-01-02
標籤 html vue node 正則表達式 api app dom mvvm ide 函數 欄目 HTML 简体版
原文   原文鏈接

　　上一篇已經實現了發佈訂閱模式了，如今咱們實現從model->view的數據綁定，也就是當data中的數據改變後，頁面上的數據也要跟着變化；html

1.發佈訂閱代碼的實際應用vue

　　咱們思考一下，怎麼把咱們上一篇實現到的發佈訂閱模式用到咱們的vue中去呢？node

　　（1）Watcher應該什麼時機建立呢？正則表達式

　　以前說了一個{{xxx}}佔位符就表明一個watcher，那麼恰好在遍歷虛擬節點樹的時候會正則判斷每一個出現{{xxx}}的所在節點，此時建立watcher實例正合適；api

 

 （2）Watcher構造函數中作了什麼？app

　　在上圖中能夠看到Watcher中傳入了三個參數，其中根據第一個和第二個參數就能夠取到data中對應的{{user.name}}的值myVue[user][name]，因爲全部的屬性都綁定了有get方法，因此在獲取myVue[user][name]的時候就會觸發get方法，因此咱們能夠在get方法中添加新的邏輯，就是將當前Watcher註冊到Dep中一份；dom

（2.1）Watcher構造器（注意這裏最後設置爲null的這句，後面有用）：mvvm

 

（2.2）get方法新增邏輯：ide

 　

（3）那麼當咱們修改myVue.user.name=」hello「的時候會發生什麼？函數

　　因爲以前的數據劫持和數據代理，因此此時會觸發name這個屬性的set方法，咱們須要在這個set方法中添加邏輯，就是觸發Dep中全部的Watcher的回調方法，就是（1）中回調函數；

 

（4）在（3）調用notify以後，每一個watcher將會執行的行爲？

 

（5）大概捋一下思路：

　　（5.1）首先啓動項目，就會進行初始化，在編譯模板的階段會把html標籤中的全部{{}}佔位符都找到，咱們就在這個時候新建Watcher，並設置回調函數就是給每一個{{}}，以便於後續調用直接覆蓋這個佔位符

　　（5.2）在Watcher建立的時候，會因爲從data中取值的緣由，會觸發該屬性的get方法，咱們就把這個Watcher實例的指針丟到這個get方法中，實現註冊到Dep的邏輯

　　（5.3）在每一個屬性的set方法中加入了notify的機制，這是爲了保證只要咱們手動的將data數據修改以後，就會調用全部註冊到Dep中的Watcher的回調函數

　　（5.4）啓動完畢

　　（5.5）當咱們修改data中的數據的時候，首先會觸發set方法中的notify方法，直接調用全部的Watcher的update方法實現發佈，在update方法中會獲取data中修改的最新值（此時雖然也會觸發這個屬性的get方法，可是沒有target屬性，由於target屬性只會在建立Watcher的時候纔會賦值，建立完了以後就會設置爲null，不會去重複註冊同一個Watcher）

　  （5.6）獲取到了最新的值以後，傳到（5.1）中的回調函數，就能夠實現覆蓋虛擬節點中的佔位符{{}}，實現頁面的刷新，咱們就能看到效果

 

2.代碼

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];
      })


      // 建立Watcher，最主要的是傳入的這個回調函數，會覆蓋node節點中的佔位符{{xxx}}
      new Watcher(vm, RegExp.$1, function (newVal) {
        node.textContent = nodeText.replace(reg, newVal);
      })
      // 把值覆蓋到虛擬節點的佔位符{{}}這裏
      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) {
  let dep = new Dep();

  // 遍歷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 () {
        // 訂閱
        Dep.target && dep.addSub(Dep.target);
        return val;
      },
      set (newVal) {
        if (val === newVal) return;
        val = newVal;
        //當後續可能由於業務邏輯使得_data.message = {name: "小王"}，設置對象類型的屬性值，就須要遞歸的給對象中{name: "小王"}的每一個屬性也添加get和set方法
        //不然name是沒有get/set方法的
        observe(val);
        dep.notify();
      }
    })
  }
}


// ===============================發佈訂閱===============================
// 能夠看作是公衆號端
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 (vm, exp, fn) {
  // 這個能夠看做是用戶的標誌；注意，這個fn通常是一個回調函數
  this.vm = vm;
  this.exp = exp;
  this.fn = fn;

  Dep.target = this;
  let val = vm;
  let arr = exp.split(".");
  arr.forEach(item => {
    val = val[item];
  })
  Dep.target = null;
}

// 用戶端提供的對外api，讓公衆號端使用
Watcher.prototype.update = function () {
  let val = this.vm;
  let arr = this.exp.split(".");
  arr.forEach(item => {
    val = val[item];
  })
  this.fn(val);
}
View Code

 　　現階段，當咱們在控制檯修改myVue.user.name="xxx"的時候，頁面上也會跟着修改了

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程