#博学谷IT学习技术支持#
目录
简介
安装
使用步骤
编辑
art-template标准语法
值输出
原文输出
条件输出
循环输出
过滤器
模板引擎的实现原理
1.基本语法
2.分组
3.字符串的replace函数
4.多次replace
5.使用while循环replace
6.replace替换为真值
实现简易的模板引擎
1. 实现步骤
2. 定义模板结构
3. 预调用模板引擎
4. 封装template函数
5. 导入并使用自定义的模板引擎
简介
art-template 是一个简约、超快的模板引擎。
它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。
安装
在浏览器中访问 安装 - art-template (aui.github.io) 页面，找到下载链接后，鼠标右键， 选择“ 链接另存为 ”，将 art-template 下载到本地，然后，通过 <script> 标签加载到网页上进行使用。
使用步骤
① 导入 art-template
② 定义数据
③ 定义模板
④ 调用 template 函数
⑤ 渲染HTML结构
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 引入template-web.js --><script src="./node_modules/art-template/lib/template-web.js"></script>
</head>
<body><div id="container"></div><!-- 创建 script 标签创建模板,注意下面几点 --><!-- 1. type="text/该斜杠后可以是 html,template... 不是script即可)" --><!-- 2. 给 script 标签添加 id ，此 id 即为模板 id --><!-- 3.模板 script 标签必须在 template() 方法调用的 script 标签之前 --><script type="text/html" id="tpl">{{if user}}<h2>{{user.name}}</h2>{{/if}}</script><script>// 定义需要渲染的数据var user = {name: 'Template username'}var html = template('tpl', {user: user})var container = document.querySelector('#container');// 渲染HTML结构container.innerHTML = html;</script>
</body>
</html>
art-template标准语法
值输出
<script type="text/html" id="tpl-user"><h1>姓名：{{name}} 年龄：{{age}}</h1></script>var data = { name: '张三', age: 20}
在 {{ }} 语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。
例如：
{{value}}
{{obj.key}}
{{obj['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
原文输出
<script type="text/html" id="tpl-user">{{@ test}}</script>var data = {test:'<h3>测试原文输出</h3>'}
如果要输出的 value 值中，包含了 HTML 标签结构，则需要使用 原文输出 语法，才能保证 HTML 标签被正常渲染。
条件输出
如果要实现条件输出，则可以在 {{ }} 中使用 if … else if … /if 的方式，进行按需输出。
<script type="text/html" id="tpl-user"><div>{{if flag === 0}} flag的值是0{{else if flag === 1}}flag的值是1{{/if}}</div></script>var data = {flag: 1}
循环输出
如果要实现循环输出，则可以在 {{ }} 内，通过 each 语法循环数组，当前循环的索引使用 $index 进行访问， 当前的循环项使用 $value 进行访问
<script type="text/html" id="tpl-user"><ul>{{each hobby}}<li>索引是:{{$index}}，循环项是:{{$value}}</li>{{/each}}</ul></script>var data = { hobby: ['吃饭', '睡觉', '写代码']}
过滤器
{{value | filterName}} 过滤器语法类似 管道操作符 ，它的上一个输出作为下一个输入。
定义过滤器的基本语法如下：
template.defaults.imports.filterName = function(value){/*return处理的结果*/} 定义一个格式化时间的过滤器 dateFormat 如下：
<script type="text/html" id="tpl-user">
<div>注册时间：{{regTime | dateFormat}}</div></script>// 定义处理时间的过滤器template.defaults.imports.dateFormat = function (date) {var y = date.getFullYear()var m = date.getMonth() + 1var d = date.getDate()return y + '-' + m + '-' + d}模板引擎的实现原理
1.基本语法
exec() 函数用于 检索字符串 中的正则表达式的匹配。
如果字符串中有匹配的值， 则返回该匹配值 ，否则返回 null 。
RegExpObject.exec(string) 示例代码如下：
var str = 'hello' var pattern = /o/ console.log(pattern.exec(str))// 输出的结果["o", index: 4, input: "hello", groups: undefined] 2.分组
正则表达式中 ( ) 包起来的内容表示一个分组，可以通过分组来 提取自己想要的内容 ，示例代码如下：
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>",3.字符串的replace函数
replace() 函数用于在字符串中 用一些字符 替换 另一些字符 ，语法格式如下：
var result = '123456'.replace('123', 'abc')
// 得到的 result 的值为字符串 'abc456' 示例代码如下：
var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/
var patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1])
// replace 函数返回值为替换后的新字符串
// 输出的内容是：<div>我是name</div> console.log(str)4.多次replace
var str = '<div>{{name}}今年{{ age }}岁了</div>'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/
var patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1])
console.log(str) // 输出 <div>name今年{{ age }}岁了</div> patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1])
console.log(str) // 输出 <div>name今年age岁了</div> //多次替换直到输出null，表示没有要替换的了
patternResult = pattern.exec(str) c
onsole.log(patternResult) // 输出 null5.使用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>6.replace替换为真值
var data = {
name: '张三', age: 20
} 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>张三今年20岁了</div>实现简易的模板引擎
1. 实现步骤
① 定义模板结构
② 预调用模板引擎
③ 封装 template 函数
④ 导入并使用自定义的模板引擎
2. 定义模板结构
<!-- 定义模板结构 -->
<script type="text/html" id="tpl-user">
<div>姓名：{{name}}</div>
<div>年龄：{{ age }}</div>
<div>性别：{{ gender}}</div>
<div>住址：{{address }}</div>
</script>3. 预调用模板引擎
<script>
// 定义数据
var data = {
name: 'zs',
age: 28,
gender: '男',
address: '北京顺义马坡' }
// 调用模板函数
var htmlStr = template('tpl-user', data)
// 渲染HTML结构
document.getElementById('user-box').innerHTML = htmlStr
</script>4. 封装template函数
function template(id, data) {let str = document.getElementById(id).innerHTML;const reg = /{{\s*([a-zA-z]+)\s*}}/;let result = null;while (result = reg.exec(str)) {str = str.replace(result[0], data[result[1]])}return str;}5. 导入并使用自定义的模板引擎
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 导入自定义的模板引擎 --><script src="./js/template.js"></script>
</head>
