共计 3834 个字符，预计需要花费 10 分钟才能阅读完成。
模板引擎，顾名思义，它可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面
art-template 使用步骤
- 导入
art-template
// 在 window 全局，多一个函数，叫做 template('模板的Id', 需要渲染的数据对象)
<script src="./template-web.js"></script>- 定义数据
<script>
// 定义需要渲染的数据
var data = {
name: '张三',
sex: '男',
age: 18
}
</script>- 定义模板
// 模板的 HTML 结构，必须定义到 script 中
<script type="text/html" id="tpl-user">
<h1>姓名：{{name}}</h1>
<h1>性别：{{sex}}</h1>
<h1>年龄：{{age}}</h1>
</script>- 调用
template函数
template('tpl-user', data)- 渲染 HTML 结构
var htmlStr = template('tpl-user', data)
var box = document.querySelector('.box')
box.innerHTML = htmlStrart-template 标准语法
art-template 提供了 {{ }} 这种语法格式，在 {{ }} 内可以进行 变量输出，或者循环数组等操作，这种 {{ }}语法在 art-template中被称为标准语法
输出-标准语法
在 {{ }} 语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出
{{ value }}
{{ obj.key }}
{{ obj.['key'] }}
{{ a ? b : c }}
{{ a || b }}
{{ a + b }}原文输出-标准语法
如果要输出value值中，包含了HTML标签结构，则需要使用原文输出语法，才能保证HTML标签被正常渲染
{{ @ value }}条件输出-标准语法
如果要实现条件输出，则可以在 {{ }} 中使用if ... else if ... /if的方式，进行按需输出
{{ if value }} 按需输出的内容 {{ /if }}
{{ if v1 }} 按需输出的内容 {{ else if v2 }} 按需输出的内容 {{ /if }}循环输出-标准语法
如果要实现循环输出，则可以在 {{ }} 内，提供 each 语法循环数组，当前循环的索引使用 $index 进行访问，当前的循环项使用 $value 进行访问
{{ each arr }}
{{ $index }} {{ $value }}
{{/each}}过滤器-标准语法
过滤器的本质，就是一个 function 处理函数
{{ value | filterName }}
templata.defaults.imports.filterName = function(value) {/* return处理的结果 */}var data = {
regTime: new Date()
}
<div>注册时间：{{ regTime | dateFormat }}</div>
template.defaults.imports.dateFormat = function(date) {
var y = date.getFullYear()
var m = date.getMonth() + 1
var d = date.getDate()
return y + '-' + m + '-' + d // 过滤器最后一定要return返回一个值
}模板引擎实现原理
正则与字符串操作
基本语法
exec() 函数用于检索字符串中的正则表达式的匹配
如果字符串中有匹配的值，则返回该匹配值，否则返回 null
RegExpObject.exec(string)
var str = 'hello'
var pattern = /o/
console.log(pattern.exec(str))
// 输出结果["o", index: 4, input: "hello", groups: undefined]分组
正则表达式中 () 包起来的内容表示一个分组，可以通过分组来提取自己想要的内容
var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/
var patternResult = pattern.exec(str)
console.log(patternResult)
// 得到 name 的分组信息
// ["{{name}}", "name", index: 7, input: "<div>我是{{name}}</div>", groups: undefined]字符串的 replace 函数
replace() 函数用于在字符串中用一些字符替换另一些字符
var result = '123456'.replace('123', 'abc')
console.log(result) // abc456
var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/
var patternResult = pattenr.exec(str)
console.log(str) // ["{{name}}", "name", index: 7, input: "<div>我是{{name}}</div>", groups: undefined]
str = str.replace(patternResult[0], patternResult[1]) // replace 函数返回值为替换后的新字符串
console.log(str) //<div>我是name</div>多次replace()
\s 表示匹配空格零个或多个
var str = '<div>我叫{{name}}今年{{ age }}岁了</div>'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/
// 第一次匹配
var res1 = pattern.exec(str)
console.log(str) // <div>我叫{{name}}今年{{ age }}岁了</div>
str = str.replace(res1[0], res1[1])
console.log(str) // <div>我叫name今年{{ age }}岁了</div>
// 第二次匹配
res2 = pattern.exec(str)
console.log(str) // <div>我叫name今年{{ age }}岁了</div>
str = str.replace(res2[0], res2[1])
console.log(str) // <div>我叫name今年age岁了</div>
// 第三次匹配
res3 = pattern.exec(str)
console.log(res3) // null使用 while 循环 replace()
var str = '<div>我叫{{name}}今年{{ age }}岁了</div>'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/
var patternResult = null
while (patternResult = pattern.exec(str)) {
str = str.replace(patternResult[0], patternResult[1])
}
console.log(str) // <div>我叫name今年age岁了</div>replace() 替换为真值
var data = { name: '张三', age: 18 }
var str = '<div>我叫{{name}}今年{{ age }}岁了</div>'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/
var patternResult = null
while (patternResult = pattern.exec(str)) {
str = str.replace(patternResult[0], data[patternResult[1]])
}
console.log(str) // <div>我叫张三今年18岁了</div>实现简易模板引擎
- 定义模板结构
<!-- 定义模板结构 -->
<script type="text/html" id="tpl-user">
<div>姓名：{{name}}</div>
<div>年龄：{{ age }}</div>
<div>性别：{{ sex}}</div>
<div>住址：{{address }}</div>
</script>- 预调用模板引擎
// 定义数据
var data = {
name: '张三',
age: 18,
sex: '男',
address: '翻斗花园'
}
// 调用模板函数
var htmlStr = template('tpl-user', data)
// 渲染HTML结构
document.getElementById('user-box').innerHTML = htmlStr- 封装
template函数
// 封装template函数
function template(id, data) {
var str = document.getElementById(id).innerHTML
var pattern = /{{\s*([a-zA-Z]+)\s*}}/
var patternResult = null
while (patternResult = pattern.exec(str)) {
str = str.replace(patternResult[0], data[patternResult[1]])
}
return str
}- 导入并使用自定义的模板引擎
<script src="./template.js"></script>正文完
