摘要：原文地址一個框架一個響應式的組件系統，通過把頁面抽象成一個個組件來增加復用性降低復雜性主要特色就是數據操縱視圖變化，一旦數據變化自動更新所有關聯組件所以它的一大特性就是一個數據響應系統，當然有了數據還需要一個模板解析系統即幫我們把數據模板生

原文地址：https://gmiam.com/post/evo.html

Vue 一個 MVVM 框架、一個響應式的組件系統，通過把頁面抽象成一個個組件來增加復用性、降低復雜性

主要特色就是數據操縱視圖變化，一旦數據變化自動更新所有關聯組件~

所以它的一大特性就是一個數據響應系統，當然有了數據還需要一個模板解析系統

即 HTMLParse 幫我們把數據模板生成最終的頁面，但每次數據變動都重新生成 HTML 片段掛載到 DOM 性能肯定慢的沒法說

所以還需要 Virtual DOM 把最少的變動應用到 DOM 上，以提升性能

基本上述三項組裝到一起也就出來了我們自己的 Vue 框架 Evo

下面先介紹下 Virtual DOM

所謂的 Virtual DOM 就是用 JS 來模擬 DOM 樹（因為 JS 操作比 DOM 快很多）

每次數據變動用新生成的樹與之前的樹做比對，計算出最終的差異補丁到真正的 DOM 樹上

Vue 2.0 底層基于 Snabbdom 這個 Virtual DOM 做了優化與整合

具體可以到這里查看更多 https://github.com/snabbdom/s...

這個庫的主要特色是簡單、模塊化方便擴展與出色的性能

一個簡單例子

var snabbdom = require("snabbdom");
var patch = snabbdom.init([ // Init patch function with chosen modules
  require("snabbdom/modules/class").default, // makes it easy to toggle classes
  require("snabbdom/modules/props").default, // for setting properties on DOM elements
  require("snabbdom/modules/style").default, // handles styling on elements with support for animations
  require("snabbdom/modules/eventlisteners").default, // attaches event listeners
]);
var h = require("snabbdom/h").default; // helper function for creating vnodes

var container = document.getElementById("container");

var vnode = h("div#container.two.classes", {on: {click: someFn}}, [
  h("span", {style: {fontWeight: "bold"}}, "This is bold"),
  " and this is just normal text",
  h("a", {props: {href: "/foo"}}, "I"ll take you places!")
]);
// Patch into empty DOM element – this modifies the DOM as a side effect
patch(container, vnode);

var newVnode = h("div#container.two.classes", {on: {click: anotherEventHandler}}, [
  h("span", {style: {fontWeight: "normal", fontStyle: "italic"}}, "This is now italic type"),
  " and this is still just normal text",
  h("a", {props: {href: "/bar"}}, "I"ll take you places!")
]);
// Second `patch` invocation
patch(vnode, newVnode); // Snabbdom efficiently updates the old view to the new state

不難看出 patch 就是一個模塊化的功能聚合，你也可以根據核心的 Hook 機制來提供自己的功能模塊

然后通過 snabbdom/h 來創建 vnodes，最后用 patch 做更新處理

這個庫的代碼量不大，實現的非常靈活，有興趣的可以讀讀源碼，另外也建議讀讀這篇文章 https://github.com/livoras/bl... 以更好的了解內部原理

不過從上面的語法可以看出使用起來相當麻煩，所以我們需要一種簡單的書寫方式來幫我們解析成對應的語法規則

也就是要說的 HTMLParse

Vue 2.0 的 Parse 原型基于 John Resig 的 HTML Parser，這個 Parser 寫的很小巧，可以到這里了解 http://ejohn.org/blog/pure-ja...

基本的 HTML 解析用法

var results = "";
        
HTMLParser(html, {
  start: function( tag, attrs, unary ) {
    results += "<" + tag;

    for ( var i = 0; i < attrs.length; i++ )
      results += " " + attrs[i].name + "="" + attrs[i].escaped + """;

    results += (unary ? "/" : "") + ">";
  },
  end: function( tag ) {
    results += "";
  },
  chars: function( text ) {
    results += text;
  },
  comment: function( text ) {
    results += "";
  }
});

return results;

可以看出它把 HTML 解析后對應的節點數據都傳入了處理函數，Vue 在它的基礎上做了升級與優化處理，在拿到對應的節點數據后做一些自己的解析處理，如 分析 v-if、v-for、v-on 等屬性做指令處理，也就出來了 Vue 的模板系統~

下面在說下響應系統

數據響應主要是依據 ES5 的 getter 與 setter 來做數據變化的鉤子處理，比如下面

Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: ()=>{
    // some handle
    return val
  },
  set: newVal => {
    if(newVal === val)
      return
    val = newVal
    //some handle
  }
})

這樣取值與賦值的過程中都可以做一些我們自己的處理，比如 set 的時候我們可以判斷值是否真的發生了變化，變化了可以觸發我們的重新渲染函數，做虛擬 DOM 比對處理更新界面

不過說明下并不是一旦有數據變動我們就要做重新渲染，看這個例子

 new Vue({
      template: `
        

          

            name: {{name}}
          
          

            age: {{age}}
          
        
`,
      data: {
        name: "js",
        age: 24,
        height: 180
      }
    })

    setTimeout(function(){
      demo.height = 181
    }, 3000)

可以看到 height 的變動與我們的模板完全無關，如果做重渲染會造成浪費，所以 Vue 做了一個收集依賴

Vue 在第一次渲染的時候會讀取需要的數據，所以它在 get 的時候做了手腳（依賴收集），后面只有依賴的數據變動才會觸發重渲染

想更詳細的了解數據響應的可以看看這個 https://segmentfault.com/a/11...

不過 ES5 的 setter、getter，使用與處理起來還是有些麻煩與不便

所以數據方面我選擇了這個 https://github.com/nx-js/obse... 使用 Proxy 的庫做響應處理（畢竟現在不考慮兼容性~）

實現原理與上面的差不多，只不過更簡單，功能更強一些~

上面就是我們主要參考的技能點，讓我們加些代碼把它們連起來，這樣自己的框架就出來了~

最終的實現代碼在這里 https://github.com/ygm125/evo

evo = easy + vue + o，快來幫我 star 吧~

下面來個例子，跑起來

    
{{ message }}

    {{index}}、{{item.text}}

    

    
first
    
not

當然實現一個完整的東西還是有很多路要走的，希望大家都能越走越遠，也能越走越近~