摘要：上集回顧從零開始手把手教你實(shí)現(xiàn)一個(gè)一上一集我們介紹了什么是，為什么要用，以及我們要怎樣來實(shí)現(xiàn)一個(gè)。完成后，在命令行中輸入安裝下依賴。最后返回這個(gè)目標(biāo)節(jié)點(diǎn)。明天，我們迎接挑戰(zhàn)，開始處理數(shù)據(jù)變動(dòng)引起的重新渲染，我們要如何新舊，生成補(bǔ)丁，修改。

從零開始手把手教你實(shí)現(xiàn)一個(gè)Virtual DOM（一）
上一集我們介紹了什么是VDOM，為什么要用VDOM，以及我們要怎樣來實(shí)現(xiàn)一個(gè)VDOM。我們?cè)賮砜匆幌逻@張藍(lán)圖，今天我們要實(shí)現(xiàn)的是這張圖的左半部分。

{
  "name": "vdom",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "compile": "babel index.js --out-file compiled.js"
  },
  "author": "",
  "license": "",
  "devDependencies": {
    "babel-cli": "^6.23.0",
    "babel-plugin-transform-react-jsx": "^6.23.0"
  }
}

這里主要主要兩點(diǎn)：

devDependencies中依賴babel-cli和babel-plugin-transform-react-jsx這兩個(gè)庫(kù)，前者提供Babel的命令行功能，后者主要幫我們把jsx轉(zhuǎn)化成js。

scripts中我們指定了一條命令：complile，每次當(dāng)我們?cè)诋?dāng)前目錄下的命令行中敲npm run compile時(shí)，babal就會(huì)將我們的index.js轉(zhuǎn)化后新建一個(gè)compile.js文件。

完成后，在命令行中輸入npm install安裝下依賴。

{
  "plugins": [
    ["transform-react-jsx", {
      "pragma": "h"  // default pragma is React.createElement
    }]
  ]
}

在babel的配置文件中，我們指定transform-react-jsx這個(gè)插件將轉(zhuǎn)化后的函數(shù)名設(shè)置為h。默認(rèn)的函數(shù)名是React.createElement，我們不依賴react，所以顯然換個(gè)自己的名字更合適。這里不清楚h是干什么的不要緊，等會(huì)看到代碼你就知道了。

這個(gè)HTML還是很直觀的，類似React，我們有一個(gè)根節(jié)點(diǎn)id是app。然后我們r(jià)ender函數(shù)最終生成的DOM會(huì)插入到app這個(gè)根節(jié)點(diǎn)里。注意我們引用的compile.js文件是babel根據(jù)等會(huì)要寫的index.js文件自動(dòng)生成的。

首先，我們用JSX來編寫“模板”：

function view() {
  return 

    
Detective Chinatown Vol 2
    
Ferdinand
    
Paddington 2
  
}

接下來，我們要將JSX編譯成js, 也就是hyperscript。我們先用Babel編譯一下，看這段JSX轉(zhuǎn)成js會(huì)是什么樣子，打開命令行，輸入npm run compile,得到的compile.js：

function view() {
  return h(
    "ul",
    { id: "filmList", className: "list" },
    h(
      "li",
      { className: "main" },
      "Detective Chinatown Vol 2"
    ),
    h(
      "li",
      null,
      "Ferdinand"
    ),
    h(
      "li",
      null,
      "Paddington 2"
    )
  );
}

可以看出h函數(shù)接收的參數(shù)，第一個(gè)參數(shù)是node的類型，比如ul,li，第二個(gè)參數(shù)是node的屬性，之后的參數(shù)是node的children，假如child又是一個(gè)node的話，就會(huì)繼續(xù)調(diào)用h函數(shù)。

清楚了Babel會(huì)將我們的JSX編譯成什么樣子后，接下來我們就可以繼續(xù)在index.js中來寫h函數(shù)了。

function flatten(arr) {
  return [].concat(...arr)
}

function h(type, props, ...children) {
  return {
    type,
    props: props || {},
    children: flatten(children)
  }
}

我們的h函數(shù)主要的工作就是返回我們真正需要的hyperscript對(duì)象，只有三個(gè)參數(shù)，第一個(gè)參數(shù)是節(jié)點(diǎn)類型，第二個(gè)參數(shù)是屬性對(duì)象，第三個(gè)是子節(jié)點(diǎn)的數(shù)組。

這里主要用了ES6的rest, spread參數(shù)，不清楚代碼中兩個(gè)...分別是什么意思的可以先去看我的介紹ES6文章30分鐘掌握ES6/ES2015核心內(nèi)容（上）。簡(jiǎn)單來說，rest就是上面的...children，它將函數(shù)多余的參數(shù)放到一個(gè)數(shù)組里，所以children此時(shí)變成了一個(gè)數(shù)組。而spread則是rest的逆運(yùn)算，也就是上面的...arr，它將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列。

flatten(children)這個(gè)操作是因?yàn)閏hildren這個(gè)數(shù)組里的元素有可能也是個(gè)數(shù)組，那樣就成了一個(gè)二維數(shù)組，所以我們需要將數(shù)組拍平成一維數(shù)組。[].concat(...arr)是ES6寫法，傳統(tǒng)的寫法是[].concat.apply([], arr)

我們現(xiàn)在可以先來看一下h函數(shù)最終返回的對(duì)象長(zhǎng)什么樣子。

function render() {
  console.log(view())
}

我們?cè)趓ender函數(shù)中打印出執(zhí)行完view()的結(jié)果，再npm run compile后，用瀏覽器打開我們的index.html，看控制臺(tái)輸出的結(jié)果。

可以，很完美！這個(gè)對(duì)象就是我們的VDOM了！

下面我們就可以根據(jù)VDOM, 來渲染真實(shí)DOM了。先改寫render函數(shù):

function render(el) {
  el.appendChild(createElement(view(0)))
}

createElement函數(shù)生成DOM，然后再插入到我們?cè)趇ndex.html中寫的根節(jié)點(diǎn)app。注意render函數(shù)式在index.html中被調(diào)用的。

function createElement(node) {
  if (typeof(node) === "string") {
    return document.createTextNode(node)
  }

  let { type, props, children } = node
  const el = document.createElement(type)
  setProps(el, props)
  children.map(createElement)
    .forEach(el.appendChild.bind(el))

  return el
}

function setProp(target, name, value) {
  if (name === "className") {
    return target.setAttribute("class", value)
  }

  target.setAttribute(name, value)
}

function setProps(target, props) {
  Object.keys(props).forEach(key => {
    setProp(target, key, props[key])
  })
}

我們來仔細(xì)看下createElement函數(shù)。假如說node，即VDOM的類型是文本，我們直接返回一個(gè)創(chuàng)建好的文本節(jié)點(diǎn)。否則的話，我們?nèi)〕鰊ode中類型，屬性和子節(jié)點(diǎn), 先根據(jù)類型創(chuàng)建相應(yīng)的目標(biāo)節(jié)點(diǎn)，然后再調(diào)用setProps函數(shù)依次設(shè)置好目標(biāo)節(jié)點(diǎn)的屬性，最后遍歷子節(jié)點(diǎn)，遞歸調(diào)用createElement方法，將返回的子節(jié)點(diǎn)插入到剛剛創(chuàng)建的目標(biāo)節(jié)點(diǎn)里。最后返回這個(gè)目標(biāo)節(jié)點(diǎn)。

還需要注意的一點(diǎn)是，jsx中class的寫成了className，所以我需要特殊處理一下。

大功告成，complie后瀏覽器打開index.html看看結(jié)果吧。

今天我們成功的完成了藍(lán)圖的左半部分，將JSX轉(zhuǎn)化成hyperscript，再轉(zhuǎn)化成VDOM，最后根據(jù)VDOM生成DOM，渲染到頁(yè)面。明天，我們迎接挑戰(zhàn)，開始處理數(shù)據(jù)變動(dòng)引起的重新渲染，我們要如何DIFF新舊VDOM，生成補(bǔ)丁，修改DOM。