前端成神之路-模板引擎
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 οnclick="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;本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-01-31 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录