模板字符串=>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>"]
]]
]