1. 模板引擎
文档：http://aui.github.io/art-template/zh-cn/
Github: https://github.com/aui/art-template
1.1 Ajax 项目中存在的问题
- 数据和HTML字符串拼接导致代码混乱，拼接容易出错，增加修改难度。
- 业务逻辑和用户界面混合，代码不易维护。
for (var i = 0; i < result.length; i++) {
html += '<!DOCTYPE html>\
<html lang="en">\
<head>\
<meta charset="UTF-8">\
<title>'+ title +'</title>\
</head>\
<body>\
<h1 onclick="sayHi('+name+')">你好,'+name+' 我今年 '+age+'岁</h1>\
<ul>\
<li title="'+hobbies[0]+'">'+hobbies[0]+'</li>\
</ul>\
</body>\
</html>';
}1.2 模板引擎的作用
- 使用模板引擎提供的模板语法可以使数据和HTML字符串拼接的更加美观，代码易于维护。
- 模板引擎能够使用户界面的数据拼接和JavaScript业务逻辑分离，增加程序的可扩展性。
- 使用模板引擎可以提高开发效率。
<h1>你好, {{name}}, 我今年{{age}}岁</h1>
<ul>
{{each}}
<li>{{$value.hobbies}}</li>
{{/each}}
</ul>1.3 模板渲染
<script src="./js/template-web.js"></script>
<script type="text/html" id="tpl">
<div>
<span>{{name}}</span>
<span>{{age}}</span>
</div>
</script> // 将特定模板与特定数据进行拼接
const html = template('tpl',{
name: '张三',
age: 20
}); 2. 模板语法
模板语法的作用是告诉模板引擎数据和模板要如何进行拼接。
2.1 输出
将数据显示在模板中。
<h2>{{value}}</h2>
<h2>{{a ? b : c}}</h2>
<h2>{{a + b}}</h2>2.2 原文输出
如果数据中携带HTML标签，默认情况下，模板引擎不会解析标签，会将其转义后原文输出。
<h2>{{@ value }}</h2>2.3 条件判断
{{if 条件}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}{{if 条件}}
<div>条件成立 显示我</div>
{{else}}
<div>条件不成立 显示我</div>
{{/if}}2.4 循环
{{each target}}
{{$index}} {{$value}}
{{/each}}2.5 导入模板变量
<div>$imports.dataFormat(time)</div>template.defaults.imports.变量名 = 变量值;
$imports.变量名称function dateFormat（未格式化的原始时间）{
return '已经格式化好的当前时间'
}
template.defaults.imports.dateFormat = dateFormat;总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 1. 将模板引擎的库文件引入到当前页面 -->
<script src="/js/template-web.js"></script>
</head>
<body>
<div id="container"></div>
<!-- 2.准备art-template模板 -->
<script type="text/html" id="tpl">
<h1>{{username}} {{age}}</h1>
</script>
<script type="text/javascript">
// 3.告诉模板引擎将那个数据和哪个模板进行拼接
// 1) 模板id 2)数据 对象类型
// 方法的返回值就是拼接好的html字符串
var html = template('tpl', {username: 'zhangsan', age: 30});
document.getElementById('container').innerHTML = html;
</script>
</body>
</html>
评论 (0)