構(gòu)建一個(gè)使用 Virtual-DOM 的前端模版引擎

作者：戴嘉華
轉(zhuǎn)載請(qǐng)注明出處并保留原文鏈接（ https://github.com/livoras/blog/issues/14 ）和作者信息。

  
{title}
  

    {each users as user i}
    

      
      NO.{i + 1} - {user.name}
      {if user.isAdmin}
        I am admin
      {elseif user.isAuthor}
        I am author
      {else}
        I am nobody
      {/if}
    
    {/each}
  

var data = {
  title: "Users List",
  users: [
    {id: "user0", name: "Jerry", isAdmin: true},
    {id: "user1", name: "Lucy", isAuthor: true},
    {id: "user2", name: "Tomy"}
  ]
}

  
Users List
  

    

       
       NO.1 - Jerry
       I am admin
    
    

       
       NO.2 - Lucy
       I am author
    
    

       
       NO.3 - Tomy
       I am nobody
    
  

// setup codes
// ...

var render = template(tplString) // template 把模板編譯成 render 函數(shù)而不是 HTML 字符串
var root1 = render(state1) // 根據(jù)初始狀態(tài)返回的 virtual-dom

var dom = root.render() // 根據(jù) virtual-dom 構(gòu)建一個(gè)真正的 dom 元素
document.body.appendChild(dom)

var root2 = render(state2) // 狀態(tài)變更，重新渲染另外一個(gè) virtual-dom
var patches = diff(root1, root2) // virtual-dom 的 diff 算法
patch(dom, patches) // 更新真正的 dom 元素

function render (state) {
  return el("div", {}, [
    el("h1", {}, [state.title]),
    el("ul", {}, state.users.map(function (user, i) {
       return el("li", {"class": "user-item"}, [
         el("img", {"src": "/avatars/" + user.id}, []),
         el("span", {}, ["No." + (i + 1) + " - " + user.name],
         (user.isAdmin 
           ? "I am admin"
           : uesr.isAuthor 
             ? "I am author"
             : "")
       ])
    }))
  ])
}

{each users as user i }
 
 {user.name} 
 ...
{/each}

{if user.isAdmin}
 ...
{elseif user.isAuthor}
 ...
{elseif user.isXXX}
 ...
{/if}

Stat -> Frag Stat | ε
Frag -> IfStat | EachStat | Node | text

IfStat -> "{if ...}" Stat {ElseIf} [Else] "{/if}"
ElseIf -> "{elseif ...}" Stat
Else -> "{else}" Stat|e

EachStat -> "{each ...}" Stat "{/each}"

Node -> OpenTag NodeTail
OpenTag -> "/[w-d]+/" {Attr}
NodeTail -> ">" Stat "/<[wd]+>/" | "/>"

Attr -> "/[w-d]/+" Value
Value -> "=" "/"[sS]+"/" | ε

Stat -> Frag Stat | ε
Frag -> IfStat | EachStat | Node | text

IfStat -> "{if ...}" Stat ElseIfs Else "{/if}"
ElseIfs -> ElseIf ElseIfs | ε
ElseIf -> "{elseif ...}" Stat
Else -> "{else}" Stat | ε

EachStat -> "{each ...}" Stat "{/each}"

Node -> OpenTag NodeTail
OpenTag -> "/[w-d]+/" Attrs
NodeTail -> ">" Stat "/<[wd]+>/" | "/>"

Attrs -> Attr Attrs | ε 
Attr -> "/[w-d]/+" Value
Value -> "=" "/"[sS]+"/" | ε

module.exports = {
  TK_TEXT: 1, // 文本節(jié)點(diǎn)
  TK_IF: 2, // {if ...}
  TK_END_IF: 3, // {/if}
  TK_ELSE_IF: 4, // {elseif ...}
  TK_ELSE: 5, // {else}
  TK_EACH: 6, // {each ...}
  TK_END_EACH: 7, // {/each}
  TK_GT: 8, // >
  TK_SLASH_GT: 9, // />
  TK_TAG_NAME: 10, // " }
{ type: 1, label: "NO." }
{ type: 1, label: "{i + 1} - " }
{ type: 1, label: "{user.name}" }
{ type: 13, label: "" }
{ type: 2, label: "{if user.isAdmin}" }
{ type: 1, label: "I am admin
        " }
{ type: 4, label: "{elseif user.isAuthor}" }
{ type: 1, label: "I am author
        " }
{ type: 5, label: "{else}" }
{ type: 1, label: "I am nobody
        " }
{ type: 3, label: "{/if}" }
{ type: 13, label: "" }
{ type: 7, label: "{/each}" }
{ type: 13, label: "" }
{ type: 13, label: "

拿到 tokens 以后就可以就可以按順序讀取 token，根據(jù)模板的 LL(1) 文法進(jìn)行語(yǔ)法分析。語(yǔ)法分析器，也就是 parser，一般可以采取遞歸下降的方式來(lái)進(jìn)行編寫。LL(1) 不允許語(yǔ)法中有沖突（ conflicts )，需要對(duì)文法中的產(chǎn)生式求解 FIRST 和 FOLLOW 集。

FIRST(Stat) = {TK_IF, TK_EACH, TK_TAG_NAME, TK_TEXT}
FOLLOW(Stat) = {TK_ELSE_IF, TK_END_IF, TK_ELSE, TK_END_EACH, TK_CLOSE_TAG, TK_EOF}
FIRST(Frag) = {TK_IF, TK_EACH, TK_TAG_NAME, TK_TEXT}
FIRST(IfStat) = {TK_IF}
FIRST(ElseIfs) = {TK_ELSE_IF}
FOLLOW(ElseIfs) = {TK_ELSE, TK_ELSE}
FIRST(ElseIf) = {TK_ELSE_IF}
FIRST(Else) = {TK_ELSE}
FOLLOW(Else) = {TK_END_IF}
FIRST(EachStat) = {TK_EACH}
FIRST(OpenTag) = {TK_TAG_NAME}
FIRST(NodeTail) = {TK_GT, TK_SLASH_GT}
FIRST(Attrs) = {TK_ATTR_NAME}
FOLLOW(Attrs) = {TK_GT, TK_SLASH_GT}
FIRST(Value) = {TK_ATTR_EQUAL}
FOLLOW(Value) = {TK_ATTR_NAME, TK_GT, TK_SLASH_GT}

上面只求出了一些必要的 FIRST 和 FOLLOW 集，對(duì)于一些不需要預(yù)測(cè)的產(chǎn)生式就省略求解了。有了 FIRST 和 FOLLOW 集，剩下的編寫遞歸下降的 parser 只是填空式的體力活。

var Tokenizer = require("./tokenizer")
var types = require("./tokentypes")

function Parser (input) {
  this.tokens = new Tokenizer(input)
  this.parse()
}

var pp = Parser.prototype

pp.is = function (type) {
  return (this.tokens.peekToken().type === type)
}

pp.parse = function () {
  this.tokens.index = 0
  this.parseStat()
  this.eat(types.TK_EOF)
}

pp.parseStat = function () {
  if (
    this.is(types.TK_IF) ||
    this.is(types.TK_EACH) ||
    this.is(types.TK_TAG_NAME) ||
    this.is(types.TK_TEXT)
  ) {
    this.parseFrag()
    this.parseStat()
  } else {
    // end
  }
}

pp.parseFrag = function () {
  if (this.is(types.TK_IF)) return this.parseIfStat()
  else if (this.is(types.TK_EACH)) return this.parseEachStat()
  else if (this.is(types.TK_TAG_NAME)) return this.parseNode()
  else if (this.is(types.TK_TEXT)) {
    var token = this.eat(types.TK_TEXT)
    return token.label
  } else {
    this.parseError("parseFrag")
  }
}

// ...

完整的 parser 可以查看 parser.js。

遞歸下降進(jìn)行語(yǔ)法分析的時(shí)候，可以同時(shí)構(gòu)建模版語(yǔ)法的樹狀表示結(jié)構(gòu)——抽象語(yǔ)法樹，模板語(yǔ)法有以下的抽象語(yǔ)法樹的節(jié)點(diǎn)類型：

Stat: {
    type: "Stat"
    members: [IfStat | EachStat | Node | text, ...]
}

IfStat: {
    type: "IfStat"
    label: ,
    body: Stat
    elifs: [ElseIf, ...]
    elsebody: Stat
}

ElseIf: {
    type: "ElseIf"
    label: ,
    body: Stat
}

EachStat: {
    type: "EachStat"
    label: ,
    body: Stat
}

Node: {
    type: "Node"
    name: ,
    attributes: