一套代碼小程序&Web&Native運行的探索04——數據更新

接上文：一套代碼小程序&Web&Native運行的探索03

對應Git代碼地址請見：https://github.com/yexiaochai/wxdemo/tree/master/mvvm

參考：

https://github.com/fastCreator/MVVM（極度參考，十分感謝該作者，直接看Vue會比較吃力的，但是看完這個作者的代碼便會輕易很多，可惜這個作者沒有對應博客說明，不然就爽了）

https://www.tangshuang.net/3756.html

https://www.cnblogs.com/kidney/p/8018226.html

http://www.cnblogs.com/kidney/p/6052935.html

https://github.com/livoras/blog/issues/13

之前我們完成了簡陋的從模板到虛擬DOM從虛擬DOM到HTML的代碼，我們這里圖簡單沒有對屬性和樣式做特殊處理，還是按照一般的模板方式進行的解析，后續看看這塊怎么處理吧，今天我們的任務是完成setData時候同步更新我們的HTML的操作，這里首先我們來看看一般的MVVM中數據變化更新是怎么完成的，在這個基礎上進行后續的代碼可能各位看得更清晰。

一般的MVVM雙向綁定

一般來說，我們數據變化的時候都是一個發布訂閱模式，我們調用setData的時候會執行類似這樣的代碼：

function setData(data) {
  //做下數據變更
  //......

  //會通知對應數據對象數據發生變化了,這個數據對應的所有dom節點都會發生改變
  this.notifyAll();
}

而在vue中我們是直接做這種操作，dom就發生了變化：

this.name = '葉小釵';

這個是因為，他使用了訪問器屬性：

var obj = { };
// 為obj定義一個名為 name 的訪問器屬性
Object.defineProperty(obj, "name", {

  get: function () {
    console.log('get', arguments);
  },
  set: function (val) {
    console.log('set', arguments);
  }
})
obj.name = '葉小釵'
console.log(obj, obj.name)
/*
 set Arguments ["葉小釵", callee: ƒ, Symbol(Symbol.iterator): ƒ]
 get Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]
*/

如果這里寫這樣的代碼：

<div id="a">
</div>
<input type="text" id="b">

<script type="text/javascript" >

function setData(data) {
  //做下數據變更
  //......
  //會通知對應數據對象數據發生變化了,這個數據對應的所有dom節點都會發生改變
  this.notifyAll();
}

function getElById(id) {
  return document.getElementById(id);
}

var obj = {};
// 為obj定義一個名為 name 的訪問器屬性
Object.defineProperty(obj, "name", {
  set: function (val) {
    getElById('a').innerHTML = val;
    getElById('b').value = val;
  }
})

getElById('b').addEventListener('input', function(e) {
  obj.name = e.target.value;
});

</script>

文本框中的字符串和div的便會同步更新，這個便是最簡化的雙向綁定代碼了，真實情況下我們的代碼可能是這樣的：

① 將data中的數據（這里是name屬性），與兩個dom對象進行映射一個是input另一個是空字符串（可以想象為span）

② 當data中name字段發生變化，或者view中導致name發生變化（控制台或者事件監聽）

③ data數據變化時，文本節點同步發生變化（不管是控制台js腳本導致還是輸入變化）

PS：我們這里與小程序保持一致，真正做更新時候采用setData方法進行

這里便開始引入編譯過程：

<div id="app">
  <input type="text" v-model="name">
  {{name}}
</div>

<script type="text/javascript" >

  function getElById(id) {
    return document.getElementById(id);
  }

  //這塊代碼僅做功能說明,不用當真
  function compile(node, vm) {
    let reg = /\{\{(.*)\}\}/;

    //節點類型
    if(node.nodeType === 1) {
      let attrs = node.attributes;
      //解析屬性
      for(let i = 0, l = attrs.length; i < l; i++) {
        if(attrs[i].nodeName === 'v-model') {
          let name = attrs[i].nodeValue;
          node.value = vm.data[name] || '';
          //此處不做太多判斷,直接綁定事件
          node.addEventListener('input', function (e) {
            //賦值操作
            let newObj = {};
            newObj[name] = e.target.value;
            vm.setData(newObj);
          });

          break;
        }
      }
    } else if(node.nodeType === 3) {

        if(reg.test(node.nodeValue)) {
          let name = RegExp.$1; // 獲取匹配到的name
          name = name.trim();
          node.nodeValue = vm.data[name] || '';
        }
    }
  }

  //獲取節點
  function nodeToFragment(node, vm) {
    let flag = document.createDocumentFragment();
    let child;

    while (child = node.firstChild) {
      compile(child, vm);
      flag.appendChild(child);
    }

    return flag;
  }

  function MVVM(options) {
    this.data = options.data;
    let el = getElById(options.el);
    this.$dom = nodeToFragment(el, this)
    this.$el = el.appendChild(this.$dom);

//    this.$bindEvent();
  }

  MVVM.prototype.setData = function (data) {
    for(let k in data) {
      this.data[k] = data[k];
    }
    //執行更新邏輯
  }

  let mvvm = new MVVM({
    el: 'app',
    data: {
      name: '葉小釵'
    }
  })

</script>

這個時候input輸入更改，對應屬性也會發生變化，但是我們屬性發生變化並沒有引起所有的dom發生變化，這個是不對的，這里我們便需要劫持所有的數據對象，這里引入發布訂閱模式：

<div id="app">
  <input type="text" v-model="name">
  {{name}}
</div>

<script type="text/javascript" >

  function getElById(id) {
    return document.getElementById(id);
  }

  //主體對象,存儲所有的訂閱者
  function Dep () {
    this.subs = [];
  }

  //通知所有訂閱者數據變化
  Dep.prototype.notify = function () {
    for(let i = 0, l = this.subs.length; i < l; i++) {
      this.subs[i].update();
    }
  }

  //添加訂閱者
  Dep.prototype.addSub = function (sub) {
    this.subs.push(sub);
  }

  let globalDataDep = new Dep();

  //觀察者,框架會接觸data的每一個與node相關的屬性,
  //如果data沒有與任何節點產生關聯,則不予理睬
  //實際的訂閱者對象
  //注意,只要一個數據對象對應了一個node對象就會生成一個訂閱者,所以真實通知的時候應該需要做到通知到對應數據的dom,這里不予關注
  function Watcher(vm, node, name) {
    this.name = name;
    this.node = node;
    this.vm = vm;
    if(node.nodeType === 1) {
      this.node.value = this.vm.data[name];
    } else if(node.nodeType === 3) {
      this.node.nodeValue = this.vm.data[name] || '';
    }
    globalDataDep.addSub(this);

  }

  Watcher.prototype.update = function () {
    if(this.node.nodeType === 1) {
      this.node.value = this.vm.data[this.name ];
    } else if(this.node.nodeType === 3) {
      this.node.nodeValue = this.vm.data[this.name ] || '';
    }
  }

  //這塊代碼僅做功能說明,不用當真
  function compile(node, vm) {
    let reg = /\{\{(.*)\}\}/;

    //節點類型
    if(node.nodeType === 1) {
      let attrs = node.attributes;
      //解析屬性
      for(let i = 0, l = attrs.length; i < l; i++) {
        if(attrs[i].nodeName === 'v-model') {
          let name = attrs[i].nodeValue;
          if(node.value === vm.data[name]) break;

//          node.value = vm.data[name] || '';
          new Watcher(vm, node, name)

          //此處不做太多判斷,直接綁定事件
          node.addEventListener('input', function (e) {
            //賦值操作
            let newObj = {};
            newObj[name] = e.target.value;
            vm.setData(newObj, true);
          });

          break;
        }
      }
    } else if(node.nodeType === 3) {

        if(reg.test(node.nodeValue)) {
          let name = RegExp.$1; // 獲取匹配到的name
          name = name.trim();
//          node.nodeValue = vm.data[name] || '';
          new Watcher(vm, node, name)
        }
    }
  }

  //獲取節點
  function nodeToFragment(node, vm) {
    let flag = document.createDocumentFragment();
    let child;

    while (child = node.firstChild) {
      compile(child, vm);
      flag.appendChild(child);
    }

    return flag;
  }

  function MVVM(options) {
    this.data = options.data;
    let el = getElById(options.el);
    this.$dom = nodeToFragment(el, this)
    this.$el = el.appendChild(this.$dom);

//    this.$bindEvent();
  }

  MVVM.prototype.setData = function (data, noNotify) {
    for(let k in data) {
      this.data[k] = data[k];
    }
    //執行更新邏輯
//    if(noNotify) return;
    globalDataDep.notify();
  }

  let mvvm = new MVVM({
    el: 'app',
    data: {
      name: '葉小釵'
    }
  })

</script>

mvvm.setData({name: 'hello world'})

這段短短的代碼，基本將數據變化如何引起的dom變化說的比較清楚了，幾個關鍵流程是：

① 設置全局的發布訂閱模式

② 在模板編譯的時候，一旦碰到數據節點與dom節點發生關系時，則新增一個訂閱者，我們這里的發布者沒有狀態概念，真實的情況應該是以data為一個集合的分組，這樣可以做到安data進行更新

③ 數據變化時候執行setData，底層調用發布者除非對應訂閱者更新數據，這里只是簡單的屬性&文本更新，真實情況會復雜的多，我們這里為保持小程序邏輯，沒有實現訪問器屬性部分代碼

有了以上代碼的理解，我們再回到我們昨天的代碼繼續完成這個流程便會清晰的多

完成setData代碼

根據之前的學習，我們知道添加訂閱者一定是發生在編譯時期，data跟node產生關聯的時候，但是我們這里需要發布訂閱者相關代碼，由於我們這里的訴求還要簡單一些並不想去考慮屬性樣式這些特殊性，所以我們對TextParser做點改造，先實現之：

注意這里的核心是，每次數據改變的時候都會觸發觀察者的update，這樣會引起重新生成虛擬樹（vnode），但是到底要不要重新渲染，怎么渲染后面會直接由snabbdom接手，我們只是將這種關系完成，代碼比較分散大家可以到github上面看：https://github.com/yexiaochai/wxdemo/tree/master/mvvm

然后今天的學習到此為止，我們明天開始處理事件部分的代碼，感覺代碼逐漸有些慢了，等組件部分完成后我們畫點流程圖重新梳理下邏輯