开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第20天，点击查看活动详情
数据变为视图的方法
纯DOM法 试用价值不高
每遍历一项，都用DOM方法创建li标签
最后将创建的子节点appendChild到父节点中，以达到页面视图更新的效果
数组join法 拼接字符串
通过for循环遍历数组的每一项，使用''++将html的内容与数据拼接在一起
最后使用join数组转字符串的方法拼好赋值给元素的innerHTML值上
es6中的反引号法 ${a}语法糖
//遍历arr数组，每遍历一项，就以字符串的视角将html字符串添加到list数组中
模板引擎 解决数据变为视图
mustache的使用
“胡子”的意思 欺辱标记{{}}非常像胡子
基本使用
Mustache.render(templateStr, data)
{{#arr}}
{{/arr}}
布尔值
{{#m}}{{/m}}
{
m: false
}
mustache底层原理
最简单的模板引擎的实现原理,利用的是正则表达式的replace()方法
replace()第二个参数，可以是一个函数，这个函数提供捕获的参数就是$1
function render(templateStr, data) {
return templateStr.replace(/{{(w+)}}/g, function(findstr, $1) {
return data[$1];
})
}
tokens是一个JS的嵌套数组，模板字符串的JS表示，抽象语法，虚拟节点
tokens
[
['text', "123"],
['text', thing ],
['text', "789"]
]
mutache库做两件事情：
1.将模板字符串便以为tokens的形式
2.将tokens结合数据，解析为dom字符串
模板字符串编译为tokens 结合数据最终解析为dom字符串
mustache
官方使用rollup打包的
我们使用webpack-dev-serve进行模块化打包， 可以更好的在浏览器调试
生成库是UMD的，只需要一个“通用头”
将模板字符串变为tokens
生成tokens数组
将零散的tokens嵌套起来
将tokens结合数据，解析为dom字符串
递归处理数组
学习源码注意事项
将独立的功能拆写为独立的js文件，通常是一个独立的类，且每个单独的功能必须能独立的单元测试
实现核心功能，非核心功能可不实现
每个模块单独封装，文件直接相互紧密联系，又各自分工
