摘要：要實現(xiàn)最小化刷新，我們要將模板中的每個綁定都收集起來。思考題在最后的實現(xiàn)下，我們把模板改為下面這樣雖然很少會有人這樣寫，就會出現(xiàn)重復的實例，該如何解決這個問題，參考早期源碼學習系列之四如何實現(xiàn)動態(tài)數(shù)據(jù)綁定

上一篇文章我們了解了怎樣實現(xiàn)一個簡單模板引擎。但這個模板引擎只適合靜態(tài)模板，因為它是將模板整體編譯成字符串進行全量替換。如果每次數(shù)據(jù)改變都進行一次替換，會有兩個最主要的問題：

性能差。DOM 操作本身就非常大的開銷，更別說每一次都替換這么大的量。

破壞事件綁定。這個是最麻煩的，如果我們沒有給解綁移除 DOM 綁定的事件，還會造成內(nèi)存泄露。而且每一次替換都要重新綁定事件。

因此，沒有人會將這種模板引擎用來編譯動態(tài)模板。那我們?nèi)绾尉幾g動態(tài)模板呢？

回答這個問題之前，我們先要了解前端的世界何時出現(xiàn)了動態(tài)模板：它是由 MVVM 框架帶來的，動態(tài)模板是 MVVM 框架的視圖層（view）。我們知道的 MVVM 框架有 knockout.js、angular.js、avalon 和 vue。

對于這些框架，大部分人最熟悉的應該就是 vue，所以我下面也是以 vue 1.0 作為參考，來實現(xiàn)一個功能更簡單的動態(tài)模板引擎。它是框架自帶的一個功能，讓框架能夠響應數(shù)據(jù)的改變。從而刷新頁面。

MVVM 動態(tài)模板的特點是能最小化刷新：哪個變量改變了，與之相關的節(jié)點才會更新。這樣我們就能避免上面提到的靜態(tài)模板的兩大問題。

要實現(xiàn)最小化刷新，我們要將模板中的每個綁定都收集起來。這個收集工作是框架在完成第一次渲染前就已經(jīng)完成了，每個綁定都會生成一個 Directive 實例：

class Directive {
  constructor(vm, el, exp, update) {
    this.vm = vm
    this.el = el
    this.exp = exp
    this.update = update
    this.watchers = []
    this.get = getEvaluationFn(exp).bind(this, vm.$data)

    this.bind()
  }
}

function getEvaluationFn(exp) {
  return new Function("data", "with(data) { return " + exp + "}")
}

我們知道，每個綁定都由指令和指令值（指令值可能是表達式，可能是語句，也可能就是一個變量，還可能是框架自定義的語法）構(gòu)成，每種指令都有對應的刷新函數(shù)（update）。如節(jié)點值的綁定的刷新函數(shù)是：

function updateTextNode() {
  const value = this.get()
  this.el.nodeValue = value
  console.log(this.exp + " updated: " + value)
}

有了刷新函數(shù)，那如何做到在數(shù)據(jù)改變時調(diào)用刷新函數(shù)更新節(jié)點的值呢？我們就還要將每個指令里的相關變量都跟這個 Directive 實例關聯(lián)起來。我們用一個 $binding 對象來記錄，它的鍵是變量，值是 Binding 實例：

class Binding {
  constructor() {
    this.subs = []
  }

  addChild(key) {
    return this[key] || new Binding()
  }

  addSub(watcher) {
    this.subs.push(watcher)
  }
}

那上面的 subs 里添加的為什么不是 Directive 實例呢，而是 watcher 呢？它其實是 Watcher 的實例，這是為了以后能夠?qū)崿F(xiàn) $watch 方法提前引入的概念，Watcher 實例的 cb 既可以是指令的刷新函數(shù)，也可以是 $watch 方法的回調(diào)函數(shù)：

class Watcher {
  constructor(vm, path, cb, ctx) {
    this.id = ++uid
    this.vm = vm
    this.path = path
    this.cb = cb
    this.ctx = ctx || vm

    this.addDep()
  }
}

class Directive {
  bind() {
    this.watchers.push(new Watcher(this.vm, this.exp, this.update, this))
  }
}

我們先考慮最簡單的情況，指令值就是一個變量，根據(jù)上面的思路，我們就可以寫出最簡單的實現(xiàn)了，代碼就不貼了，有興趣的直接看源碼。

  
MVVM
  

    My name is {{name.first}}-{{name.last }},{{age}} years old
  

上面實現(xiàn)的動態(tài)模板是在我們假定了指令值是最簡單的變量的情況下實現(xiàn)的。那要是把上面的模板改為下面這樣呢？

MVVM
  

      My name is {{name.first}}-{{name.last }},{{"age: " + age}} years old
  
  
salary: {{ salary.toLocaleString() }}

那我們上面的實現(xiàn)有一些數(shù)據(jù)就不能動態(tài)刷新了，原因很簡單，就是我們是直接將 "age: " + age 和 Directive 實例關聯(lián)，而我們修改的只是 age，自然就找不到對應的實例了。那我們?nèi)绾谓鉀Q呢？

首先想到的肯定是按照現(xiàn)有的實現(xiàn)來擴展，讓它支持模板插值是表達式的情況。已有的實現(xiàn)是直接解析得到變量，那我們就繼續(xù)想辦法直接解析表達式得到變量。像 "age: " + age 這種表達式直接解析出 age 其實不難。但 salary.toLocaleString() 這種就不好做了，要是 salary.toLocaleString().slice(1) 這種可以說是沒辦法解析了。

既然這條路行不通，其實我們是有更簡單的方法。既然我們都已經(jīng)將 data 進行了代理，那我們就可以在 get 獲取變量值時進行依賴收集。因為我們本來就會運行 Directive 實例的求值函數(shù)進行初始值的替換，這就會觸發(fā)變量的 get 。具體的代碼怎么寫就不說了，詳細的修改和支持表達式的源碼。

當然現(xiàn)在只實現(xiàn)動態(tài)模板最簡單的插值指令。還有一些更復雜的指令如：if 和 for 的實現(xiàn)方式，下次有機會再分享。

在最后的實現(xiàn)下，我們把模板改為下面這樣（雖然很少會有人這樣寫），就會出現(xiàn)重復的 Watcher 實例，該如何解決這個問題？

MVVM

   hello，My name is {{name.first + "-" + name.last }}

vue早期源碼學習系列之四：如何實現(xiàn)動態(tài)數(shù)據(jù)綁定