1. 模板引擎结构
模板引擎，它可以根据程序员指定的 模板结构 和 数据，自动生成一个完整的HTML页面
好处
-
减少了字符串的拼接操作
-
使代码结构更清晰
-
使代码更易于阅读与维护
2. art-template模板引擎
2.1 简介
art-template 是一个简约，超快的模板引擎，中文官首页：http://aui.github.io/art-template/zh-cn/index.html
安装(⭐⭐⭐)
-
浏览器访问 http://aui.github.io/art-template/zh-cn/docs/installation.html
-
找到 安装 导航栏，找到下载链接，右键下载即可(在浏览器中实时编译)
基本使用(⭐⭐⭐)
通过传统方式渲染的过程，我们了解到，动态去渲染UI的时候需要大量去拼接字符串，比较的麻烦，而且复用性也不是很好
2.2 art-template使用步骤
- 导入 art-template
在window全局，就多了一个函数，叫做 template('模板id'，需要渲染的数据对象)
<script src="./lib/template-web.js"></script>
- 定义数据
var data = { name: 'zs', age: 20}
- 定义模板
- 模板的 HTML 结构，必须定义到 script 标签中，注意：需要把type属性改成 text/html
- 给 模板 添加一个 id
- 模板里面如果需要使用到传入的数据，利用 {{}} 来实现，例如：{{name}}，那么就会去找 我们调用 template() 函数 第二个参数里面对应的name属性的值
<script type="text/html" id="tpl-user">
<h1>{{name}} ------ {{age}}</h1>
</script>
- 调用 template 函数
函数的返回值就是拼接好的模板字符串
var htmlStr = template('tpl-user', data)
- 渲染HTML结构
最后我们需要把template返回的模板字符串设置到页面容器中
$('#container').html(htmlStr)
2.3 标准语法
什么是标准语法
art-template 提供了 {{}} 这种语法格式，在 {{}} 内可以进行 变量输出 或 循环数组 等操作，这种 {{}} 语法在 art-template 中被称为标准语法
输出：
{{value}}
{{obj.key}}
{{obj['key']}}
{{a?b:c}}
{{a || b}}
{{a + b}}
在 {{}} 语法中，可以进行 变量 的输出，对象属性的输出，三元表达式输出，逻辑或输出，加减乘除等表达式输出
原文输出：
{{@ value}}
如果输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证HTML标签被正常渲染
条件输出
如果要实现条件输出，则可以在 {{}} 中使用 if...else if.../if 的方式，进行按需输出
{{if value}} 按需输出的内容 {{/if}}
循环输出
如果要实现循环输出，则可以在{{}} 内，通过 each 语法循环数组，当前循环的索引使用 value 进行访问
{{each arr}}
{{$index}} {{$value}}
{{/each}}
过滤器
语法：
{{value | filterName}}
过滤器语法类似于 管道操作符，它的上一个输出作为下一个输入
定义过滤器的基本语法如下：
template.defaults.imports.filterName = function(value){/* return处理的结果*/}
案例-格式化时间过滤器
- 定义数据
var data = { regTime: new Date() }
- 定义过滤器
// 定义处理时间的过滤器
template.defaults.imports.dateFormat = function (date) {
var y = date.getFullYear()
var m = date.getMonth() + 1
var d = date.getDate()
return y + '-' + m + '-' + d
}
- 在模板引擎中使用过滤器
<script type="text/html" id="tpl-user">
<h3>{{regTime | dateFormat}}</h3>
</script>
3. 模板引擎的实现原理(⭐⭐)
正则与字符串操作
3.1 exec函数
exec() 函数用于 检索字符串 中的正在表达式的匹配
如果字符串中又匹配的值，则返回该匹配值，否则返回 null
RegExpObject.exec(string)
示例代码如下：
var str = 'hello'
var pattern = /o/
// 通过null 判断是否匹配到内容
// 匹配第一个满足条件的对象
// 输出结果['o',index:4,input:'hello',grouos:undefined]
console.log(pattern.exec(str))
分组
正则表达式中 （） 包起来的内容表示一个分组，可以通过分组来 提取自己想要的内容，示例代码如下
var str = '<div>我是{{name}}</div>'
// 字符串中提取内容
// ()能对正则表达式里面的内容，提取出来
var pattern = /{{([a-zA-Z]+)}}/ // 要匹配的内容
var result = pattern.exec(str)
console.log(result)
// 得到 name 相关的分组信息
// {''{{name}}'',''name'',index:7,input:''<div>我是{{name}}</div>'',groups:undefined}
字符串的 replace 函数
replace() 函数用于在字符串中 用一些字符 替换 另一些字符的
// replace(要替换的对象,要替换的内容)
str = str.replace(patternResult[0], user[n])
代码示例：
var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/
var user = {
name: 'tom',
age: 20
}
var patternResult = pattern.exec(str) // 匹配字符串里面的内容
// console.log(patternResult)
// {''{{name}}'',''name'',index:7,input:''<div>我是{{name}}
var n = patternResult[1]
// replace(要替换的对象,要替换的内容)
str = str.replace(patternResult[0], user[n])
// str = str.replace(patternResult[0], patternResult[1])
console.log(str)
多次replace：
var str = '<div>{{name}}今年{{ age }}岁了</div>'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/
// 第一次匹配
var res1 = pattern.exec(str)
str = str.replace(res1[0], res1[1])
console.log(str)
// 输出 <div>name今年{{age}}岁了</div>
// 第二次匹配
var res2 = pattern.exec(str)
str = str.replace(res2[0], res2[1])
console.log(str)
// 输出 <div>name今年age岁了</div>
// 第三次匹配
var res3 = pattern.exec(str)
console.log(res3)
// 输出 null
使用循环来replace：
因为用户输入的字符串长度不确定，我们replace次数不确定，所以我们可以利用while循环来进行
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>
3.1 实现简易的模板引擎
- 定义模板结构
<script type="text/html" id="tpl-user">
<div>姓名：{{name}}</div>
<div>年龄：{{ age }}</div>
<div>性别：{{ gender}}</div>
<div>住址：{{address }}</div>
</script>
- 预调用模板引擎
<script>
// 定义数据
var data = { name: 'zs', age: 28, gender: '男', address: '北京顺义马坡' }
// 调用模板引擎
var htmlStr = template('tpl-user', data)
// 渲染HTML结构
document.getElementById('user-box').innerHTML = htmlStr
</script>
- 封装 template 函数
function template(id, data) {
var str = document.getElementById(id).innerHTML
// 匹配文本两边的空格
var pattern = /{{\s*([a-zA-Z]+)\s*}}/
var pattResult = null
while (pattResult = pattern.exec(str)) {
str = str.replace(pattResult[0], data[pattResult[1]])
}
return str
}
- 导入并使用自定义的模板引擎
<script src="./js/template.js"></script>
网友评论