MVVM 簡單模擬框架實作

tags: `JavaScript`, `Vuejs`, `MVVM`

背景

某天閒來無事時，剛好搜尋到一篇介紹 MVVM 的好文，仔細閱讀後覺得收穫頗多，決定將一些想法跟理解記錄下來所誕生。

何謂 MVVM？

在實作之前，先簡單提一下什麼是 MVVM，它是一種軟體設計架構的模式，會在 Model 及 View 之間建立一層 ViewModel，來幫助 Model 及 View 之間的交互操作，可以簡化開發的一些繁瑣重複的動作。

在 Front End 開發上，撇除 CSS 不談，最主要的工作就是將資料數據渲染在畫面上，而在瀏覽器中，也配置有許多這類型的方法，統稱為 Element Methods，這些 methods 在 MVC 的架構下，就是負責處理 Model 與 View 的交互，JQuery 主要也就是在做這件事情，但這些 methods 始終都必須要透過人工的操作來完成交互，而 MVVM 的架構下，就是將這些繁瑣的動作都交由 ViewModel 來代勞，我們只需要處理及更新資料，ViewModel 會根據更新的資料去完成更新 View 的動作。

實作練習

實作前說明

實現 MVVM 的方式不限於一種，本文採用 Vuejs 的數據劫持+訂閱發布方式實作，主要專注在 MVVM 概念的理解與實踐，具體功能不會一一仔細去深入研究。

首先，要完成 MVVM 的架構，必須包含五個主要的模組：

Observer：對數據進行劫持設定
Dep：訂閱器用來儲存被劫持資料的 watchers 依賴
Watcher：儲存被劫持資料更新時需執行的動作
Compiler：編譯模板，對不同類型節點解析並加入 watcher
MVVM：整合所有模組，提供使用者調用

思路整理

由於所要完成的最終步驟稍顯龐大與複雜，我會分成兩個部分來說明，第一部分是各別模組的實踐，第二部分才會將模組進行整合。

最終實踐上，程式碼會如下順序進行執行：

使用者建立實例，對 MVVM 模組傳入資料
MVVM 模組分別將傳入的資料依序傳遞給 Observer 及 Compiler 處理
Observer 模組對資料設定劫持機制
Compiler 解析元素，根據傳入的資料進行編譯後加入 watcher
Watcher 在 Compiler 中被建立時，會自動將自己掛載到對應的資料 Dependency 裡
完成 compile，並在後續資料更新時，調用該資料所有 Dependency 裡掛載的 watchers，執行與編譯該節點時相同的動作。

Observer 模組的實踐

首先第一步來看 Observer 是怎麼做到劫持資料的，主要是使用 defineProperty 屬性來對物件的所有屬性進行遞回劫持，包括子屬性與新值，初步實踐如下：

function observe(data) {
  if (!data || typeof data !== 'object') return;
  Object.keys(data).forEach((key) => defineReactive(data, key, data[key]));
}

function DefineReactive(data, key, val) {
  observe(val); // 子屬性遞迴
  Object.defineProperty(data, key, {
    enumerable: true, // 可遍歷
    configurable: false, // 不可再 define
    get() {
      return val;
    },
    set(newValue) {
      console.log(key, '監聽到變化'); // 劫持動作
      val = newValue;
      observe(newValue); // 遞回新值
    }
  });
}

Dep 模組的實踐

以上已可初步劫持資料的變化了，但一個單一資料可能會被用在多個地方，我們需要一個獨立的地方來儲存每一個資料的 watchers（被用一次必須產生一個新 watcher 去處理），因此我們需要一個訂閱器來儲存 watchers，訂閱器代碼如下：

function Dep() {
  this.subs = [];
}

Dep.prototype = {
  // 添加 watcher
  addSub(watcher) {
    this.subs.push(watcher);
  },
  // 通知執行所有相依 watchers
  notify() {
    this.subs.forEach((watcher) => watcher.update());
  }
}

接著，因為每個資料都必須創建一個新的訂閱器來儲存屬於他自己的所有 watchers，所以具體在剛剛 defineReactive 方法中使用如下：

// 上略...

function DefineReactive(data, key, val) {
  const dep = new Dep(); // 創建屬於它自己的訂閱器
  observe(val);
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: false,
    // 暫略...
    set(newValue) {
      console.log(key, '監聽到變化');
      val = newValue;
      observe(newValue);
      dep.notify(); // 通知所有 watchers
    }
  });
}

完成通知的設定後，還剩下一個問題，==怎麼添加 watchers 給 dep？==，剛剛有提到，每個資料都有屬於自己的訂閱器實例，訂閱器是在 defineReactive 方法中創建的，也就是說加入 watcher 的動作必定是在閉包內進行，因此，我們先假設後續會透過在 Dep.target屬性中掛載 watcher 實例，此時就把它加入進去 dep 中。

function DefineReactive(data, key, val) {
  const dep = new Dep(); // 訂閱器
  observe(val);
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: false,
    get() {
      Dep.target && dep.addSub(Dep.target); // 將掛載的 watcher 加入實例
      return val;
    },
    // 略...
  });
}

此時我們須先記著，待會在 Watcher 的模組中，我們必須將 watcher 實例掛載到 Dep.target 這個地方後，強制拿取一次對應的資料，才能觸發他的 get 來加入 watcher。

Compiler 模組的實踐

為什麼先跳過 Watcher 模組呢？因為 Watcher 模組中有許多實作的概念必須先講到 Compiler 之後才能夠理解為什麼要寫那樣，所以我覺得先講 Compiler 比較有助於理解喔～

在 Compiler 中，我們主要會需要知道編譯的對象，以及拿來編譯的資料，再根據節點類型做對應的編譯方式，另外由於初次編譯會大量操作到 DOM 節點，我們會先將需要編譯的元素轉為文檔碎片 Fragment 的形式處理，待最後解析編譯完成後再一次塞回原來的元素中，具體實踐如下：

function Compiler(el, data) {
  this.$el = el;
  this.$data = data;
  if (this.$el) {
    this.$fragment = this.node2Fragment(this.$el);
    this.init();
    this.$el.appendChild(this.$fragment);
  }
}

Compiler.prototype = {
  init() {
    // 解析的對象是文檔碎片
    this.compileElement(this.$frament);
  },
  node2Fragment(el) {
    const fg = document.createDocumentFragment();
    let child = null;
    while (child = el.firstChild) {
      fg.appendChild(child);
    }
    return fg;
  }
}

接著，來完成解析節點的 compileElement 方法，其中 _getDataVal用來取得屬性內容裡寫的物件路徑，並返回該路徑的資料：

Compiler.prototype = {
  // 上略...
  // 第一步：分析節點類型
  compileElement(el) {
    const childNodes = el.childNodes, self = this;
    childNodes.forEach((node) => {
      if (self.isElementNode(node)) {
        self.compile(node);
      } else if (self.isTextNode(node)) {
        self.compileText(node);
      }
      // 若節點中還有子節點，遞迴此步驟
      if (self.hasChildNodes(node)) {
        self.compileElement(node);
      }
    });
  },
  // 第二步：編譯不同類型的節點
  // 1. 編譯標籤：比對屬性指令，並調用對應的指令函數後
  compile(node) {
    const attrs = node.attributes, self = this;
    [...attrs].forEach((attr) => {
      const attrName = attr.name;
      // 判斷是否為 v- 開頭的屬性
      if (self.isDirective(attrName)) {
        const dir = attrName.substring(2); // 指令名稱
        const exp = attr.value; // 指令內容
        // 事件屬性
        if (self.isEventDirective(dir)) {
          self.directives['eventHandler'](node, self._getDataVal(exp), dir, self.$data);
        // 一般
        } else {
          self.directives[dir](node, self._getDataVal(exp));
        }
        // 移除專用屬性
        node.removeAttribute(attrName);
      }
    });
  },
  /* -- 工具方法 -- */
  isElementNode(node) {
    return node.nodeType === 1;
  },
  isTextNode(node) {
    return node.nodeType === 3;
  },
  hasChildNodes(node) {
    return node.childNodes && node.childNodes.length;
  },
  isDirective(attrName) {
    return attrName.indexOf('v-') == 0;
  },
  isEventDirective(dir) {
    return dir.indexOf('on') === 0;
  },
  _getDataVal(exp) {
    let val = this.$data;
    exp = exp.split('.');
    exp.forEach((k) => {
      val = val[k];
    });
    return val;
  },
  /* 指令清單 */
  directives: {
    text(node, value) {
      node.textContent = value;
    },
    html(node, value) {
      node.innerHTML = value;
    },
    show(node, value) {
      node.style.display = Boolean(value) ? null : 'none';
    },
    eventHandler(node, value, dir, data) {
      const eventType = dir.split(':')[1];
      const fn = value;
      if (eventType && fn) {
        node.addEventListener(eventType, fn.bind(data), false);
      }
    }
  }
}

以上只完成了一般標籤節點的編譯，我們還剩文字節點的編譯須完成，此部分因為牽涉到標籤模板的概念，必須岔開來説明，請見諒～

題外話：標籤模板編譯

標籤模板編譯的實踐方式也有很多，常見的像是直接比對法，或是正則比對法等等，我們這次使用的是 new Function 的方式，用正則比對並將字串替換後放入 new Function 來幫助我們編譯字串中的所有變數，render 方法代碼如下：

function removeWrapper(arr) {
  let ret = [];
  arr.forEach((exp) => {
    ret.push(exp.replace(/[\{|\}]/g, '').trim());
  });
  return ret;
}

function render(str, data) {
  const self = this;
  let exps = null;
  str = String(str);
  const t = function(str) {
    const re = /\{\{\s*([^\}]+)?\s*\}\}/g;
    exps = self.removeWrapper(str.match(re));
    str = str.replace(re, '" + data.$1 + "');
    return new Function('data', 'return "'+ str +'";');
  };
  let r = t(str);
  return {
    exps,
    value: r(data)
  };
}

具體實踐的原理不是本篇的重點，就不深入討論了，此簡單的 render 函數會返回編譯完成的字串，以及所有使用到的 exps，之所以要得到 exps 是因為後續加入 watchers 時必須用到。

回歸正題：Compiler 模組的實踐

我們將剛剛上面的 render 函數加入 prototype 中，並繼續完成 compileText 方法：

Compiler.prototype = {
  // 上略...
  // 第一步：分析節點類型
  compileElement(el) {
    const childNodes = el.childNodes, self = this;
    childNodes.forEach((node) => {
      if (self.isElementNode(node)) {
        self.compile(node);
      } else if (self.isTextNode(node)) {
        self.compileText(node);
      }
      // 若節點中還有子節點，遞迴此步驟
      if (self.hasChildNodes(node)) {
        self.compileElement(node);
      }
    });
  },
  // 第二步：編譯不同類型的節點
  // 1. 編譯標籤：比對屬性指令，並調用對應的指令函數
  // 略...
  // 2. 字串編譯：比對字串中所有用到的 exp
  compileText(node) {
    const text = node.textContent,
          self = this,
          reg = /\{\{(.*)\}\}/;
    if (reg.test(text)) {
      const { exps, value } = self.render(text.trim(), self.$data);
      self.directives.text(node, value);
    }
  },
  render(str, data) {
    const self = this;
    let exps = null;
    str = String(str);
    const t = function(str) {
      const re = /\{\{\s*([^\}]+)?\s*\}\}/g;
      exps = self.removeWrapper(str.match(re));
      str = str.replace(re, '" + data.$1 + "');
      return new Function('data', 'return "'+ str +'";');
    };
    let r = t(str);
    return {
      exps,
      value: r(data)
    };
  },
  removeWrapper(arr) {
    let ret = [];
    arr.forEach((exp) => {
      ret.push(exp.replace(/[\{|\}]/g, '').trim());
    });
    return ret;
  },
  // 略...
  /* 指令清單 */
  directives: {
    text(node, value) {
      node.textContent = value;
    },
    html(node, value) {
      node.innerHTML = value;
    },
    show(node, value) {
      node.style.display = Boolean(value) ? null : 'none';
    },
    eventHandler(node, value, dir, data) {
      const eventType = dir.split(':')[1];
      const fn = value;
      if (eventType && fn) {
        node.addEventListener(eventType, fn.bind(data), false);
      }
    }
  }
}

以上我們已經完成了基本的初次編譯了，接下來要在每個編譯動作完成時，都加入一個 watcher 來幫助我們之後更新資料時，能夠再次進行局部編譯的動作，因此我們將 compile 及 compileText 方法做點修改如下：

Compiler.prototype = {
  // 上略...
  compile(node) {
    const attrs = node.attributes, self = this;
    [...attrs].forEach((attr) => {
      const attrName = attr.name;

      if (self.isDirective(attrName)) {
        const dir = attrName.substring(2);
        const exp = attr.value;
        // 事件屬性
        if (self.isEventDirective(dir)) {
          self.directives['eventHandler'](node, self._getDataVal(exp), dir, self.$vm);
        // 一般
        } else {
          self.directives[dir](node, self._getDataVal(exp));
          new Watcher(this.$data, exp, function(value) {
            self.directives[dir](node, value);
          });
        }
        node.removeAttribute(attrName);
      }
    });
  },
  compileText(node) {
    const text = node.textContent,
          self = this,
          reg = /\{\{(.*)\}\}/;
    if (reg.test(text)) {
      const { exps, value } = self.render(text.trim(), self.$data);
      self.directives.text(node, value);
      // 字串節點中，所有用到的 exp 都需依序加入監聽器
      exps.forEach((exp) => {
        new Watcher(this.$data, exp, function() {
          const { value } = self.render(text.trim(), self.$data);
          self.directives.text(node, value);
        });
      });
    }
  },
  // 下略...
}

到此為止，我們完成了基本的 Compiler 了，接著繼續講到 Watcher 模組～！！加油加油！

Watcher 模組的實踐

經過 Compiler 的實作後，接下來最重要的 Watcher 扮演著串起 Compiler 及 Observer 溝通的橋樑，也是整個 MVVM 的靈魂，前面最開頭我們提到了在 Dep.target 上掛載 watcher 實例，接著必須在創建 watcher 實例時，對指定的資料進行一次 get 的動作，才能強制將 watcher 加入訂閱器中，具體實現如下：

function Watcher(data, exp, cb) {
  this.$data = data;
  this.$exp = exp;
  this.$cb = cb;
  this.init();
}

Watcher.prototype = {
  update() {
    this.run();
  },
  init() {
    this._hasInit = false;
    this.value = this.get(); // 初始化同時自動調用
    this._hasInit = true;
  },
  run() {
    const value = this.get();
    const oldValue = this.value;
    if (value !== oldValue) {
      this.value = value;
      this.$cb.call(this.$data, value, oldValue); // 調用綁定的 compile 動作
    }
  },
  get() {
    !this._hasInit && (Dep.target = this); // 掛載 watcher(只可在初始化時掛載，避免重複掛載)
    const value = this._getDataVal(this.$exp); // 強制調用一次目標的 get 觸發劫持動作
    Dep.target = null; // 加入完成，必須移除暫存的 watcher
    return value;
  },
  /* 工具方法 */
  _getDataVal(exp) {
    let val = this.$data;
    exp = exp.split('.');
    exp.forEach((k) => {
      val = val[k];
    });
    return val;
  }
}

恭喜你！！看到這邊您已經掌握了整個架構的主要核心模組了，最後只剩下 MVVM 構造器，也就是使用者調用的模組摟～

MVVM 模組的實踐（第二部分）

MVVM 的角色就是，將前面所有模組組合起來，使用 Observer 劫持資料變化，透過 Compiler 解析編譯模板，透過 Watcher 完成 Observer 對 Compiler 的聯繫，另外最重要的就是將所有資料綁定到 MVVM 的實例上，方便使用者輕鬆使用，具體構造器代碼如下：

function MVVM(options) {
  this.$options;
  this.$data = this.$options.data;
  this.$computed = this.$options.computed;
  this.$methods = this.$options.methods;
  
  // 先將所有資料綁定到 MVVM 實例上
  this.walk(this.$data, (key) => this._proxyData(key));
  this.walk(this.$computed, (key) => this._proxyComputed(key));
  this.walk(this.$methods, (key) => this._proxyMethods(key));
  
  // 再進行初始化，因為 Compiler 必須用到所有的 computed 跟 methods
  this.$el = this.$options.el || document.body;
  this.init();
}

MVVM.prototype = {
  init() {
    new Observer(this.$data);
    new Compiler(this.$el, this);
  },
  walk(data, fn) {
    return Object.keys(data).forEach(fn);
  },
  /* Proxys */
  _proxyData(key) {
    const self = this;
    Object.defineProperty(self, key, {
      enumerable: true,
      configurable: false,
      get() {
        return self.$data[key];
      },
      set(nV) {
        self.$data[key] = nV;
      }
    });
  },
  _proxyComputed(key) {
    const self = this;
    const computed = this.$computed;
    if (typeof computed === 'object') {
      Object.defineProperty(self, key, {
        get: typeof computed[key] === 'function' 
                ? computed[key]
                : computed[key].get,
        set: typeof computed[key] !== 'function'
                ? computed[key].set
                : function() {}
      });
    }
  },
  _proxyMethods(key) {
    const self = this;
    const methods = this.$methods;
    if (typeof methods === 'object') {
      Object.defineProperty(self, key, {
        get: typeof methods[key] === 'function' 
                ? () => methods[key] 
                : function() {},
        set: function() {}
      });
    }
  }
}

到此，一個簡單的 MVVM 架構算是完成了，實際已可簡單編譯模板以及加入事件了，使用範例如下：

<div id="app">
  Hello World
  <h3>Title</h3>
  <p>{{ info }}</p>

  <div>
    <button v-on:click="toggleName">Toggle</button>
    <p v-show="showName">{{ name }}</p>
  </div>
</div>

const vm = new MVVM({
  el: '#app',
  data: {
    name: 'Johnny',
    age: 100,
    showName: true
  },
  computed: {
    info() {
      return this.name + ' ' + this.age;
    }
  },
  methods: {
    toggleName() {
      this.showName = !this.showName;
    }
  }
});

以上，就是基本 MVVM 的概念流程實作，當然文中有許多地方一定還可以改善寫法或不夠周全的部分，也請各路高手多多包涵，本文僅作為 MVVM 加深理解以及筆記的方式存在，再次感謝您的閱讀～

參考文獻：