Vue源码学习笔记-mustache模板引擎(二)-拆分tokens原理

175 阅读1分钟

模板字符串=>tokens=>(解析,数据)=>dom字符串

tokens js嵌套数组 模板字符串的JS表示形式

抽象语法树、虚拟节点等开山鼻祖

模板字符串
// HTML
<h1>我的测试模块:{{module}},好{{adj}}的模块</h1>
// 数据
{
    module: '客户模块',
    adj: '好',
}
// 拆分成tokens
[
  ["text""<h1>我的测试模块:"],
  ["name""module"],
  ["text"",好"],
  ["name""adj"],
  ["text""的模块</h1>"],
]
双层循环 模式
// html
 <div>
    <ol>
      {{#students}}
        <li>
          学生{{item.name}}的爱好<ol>
          {{#item.hobbies}}
            <li>
              {{.}}
            </li>
          {{/item.hobbies}}
          </ol>
        </li>
      {{/students}}
    </ol>
</div>
// html
// 拆分成tokens
  [
      ["text""<div><ol>" ],
      ["#""students", [
        ["text""<li>学生"],
        ["name""name"],
        ["text""的爱好<ol>", ["#","hobbies", [
                                                ["text""<li>"],
                                                ["name""."],
                                                ["text""</li>"]
                                              ]
        
                              ]
        ],
        ["text""</ol></li>"],
        ["text""</ol></div>"]
      ]]
    ]