mustache的底层实现机理**mushache
库不能用简单正则表达式思路实现**mustache库的机理什么是tokens?tokens的两种情况mustache库底层重点做的两件事tokens观察
mustache的底层实现机理
**mushache
库不能用简单正则表达式思路实现**
-
在较为简单的示例情况下可以使用这个则表达式实现
//模板字符串 <h1>我买了一个{{thing}},好{{mod}}阿</h1> //数据 { thing: '华为手机', mod: '开心' }
-
但当情况较为复杂时正则表达式的思路肯定时不行了。
//例如 <ul> {{#arr}} <li>{{.}}</li> {{/arr}} </ul>
-
正则表达式简单实现
var template = '<h1>买了个{{thing}},好{{mod}}阿</h1>' var data = { thing: '手机', mod: '开心' } // 最简单的模板引擎实现函数,利用正则replace()方法 // replace()的第二个参数可以是一个函数,这个函数提供捕获的东西的参数,就是$1 // 结合data对象进行智能替换 function render(templateStr,data){ return templateStr.replace(/\{\{(\w+)}}/g, function(findStr,$1){ return data[$1] }) } var result = render(template,data); console.log(result);//<h1>买了个手机,好开心阿</h1>
mustache库的机理
什么是tokens?
-
token时
**JS
的嵌套数组,即为模板字符**串的JS
表示 -
它是“抽象语法树”、“虚拟节点”等等的开山鼻祖
-
示例
//模板字符串 <h1>我买了一个{{thing}},好{{mod}}阿</h1> //tokens [ ["text","<h1>我买了一个"],//token ["name","thing"],//token ["text","好"],//token ["name","mod"],//token ["text","阿</h1>"],//token ]
非常具有创造性的,轰动性的模板解析原理
tokens的两种情况
-
无循环时
模板字符串编译为数组的形式即为tokens,然后结合数据解析为所需要的形式,
-
循环情况下的tokens,多重循环时继续嵌套
//模板字符串 <div> <ul> {{#arr}} <li>{{.}}</li> {{/arr}} </ul> </div> //编译后 [ ["text","<div><ul>"], ["#","arr",[ ["text","<li>"], ["name","."], ["text","</li>"] ]], ["text","</ul></div>"] ]
mustache库底层重点做的两件事
-
将模板字符串编译为tokens形式
-
将tokens结合数据,解析为
dom
字符串
tokens观察
-
操作源码
源码种在返回结果之前打印值
-
示例
var template = ` <ul> {{#arr}} <li> {{name}}的爱好 <ol> {{#hobbies}} <li>{{.}}</li> {{/hobbies}} </ol> </li> {{/arr}} </ul> ` Mustache.render(template, {})