1.模板引擎介绍
1.1 为什么要使用模板引擎
我们通过ajax获取到数据后,需要把数据渲染到页面中,在使用模板引擎前,我们的做法是大量的拼接字符串。
拼接字符串的缺点:1.代码可阅读性非常差;2.非常容易出错;3.不利于后期代码维护。
模板引擎的作用:用于渲染数据,代替拼接字符串的方式。
1.2 artTemplate
常见的模板引擎有BaiduTemplate、velocity.js、artTemplate等,artTemplate是使用最广泛,效率最高的模板引擎。
artTemplate的优点:
1. 拥有接近 JavaScript 渲染极限的的性能。
2. 调试友好:语法、运行时错误日志精确到模板所在行。
3. 支持在模板文件上打断点(Webpack Loader)。支持 Express、Koa、Webpack。
4. 支持模板继承与子模板。
5. 浏览器版本仅 6KB 大小。
2. artTemplate的使用步骤
① 引入模板引擎的js文件
<script src="template-web.js"></script>
② 准备模板
注意: 在模板中直接使用对象的属性名。
<!--
script标签的type属性只有为"text/javascript"时,才会被当做js代码执行。将type改为"text/template"后,script标签内代码不会被解析,也不会显示。
-->
<script type="text/template" id="tmp">
<p>姓名:{{ username }}</p>
<p>年龄:{{ age }}</p>
<p>性别:{{ sex }}</p>
</script>
③ 准备数据
注意: 传递给模板的数据必须是对象,如果不是要把数据包装成对象。
//数据是从后台获取的,随时变化的
var data = {
userName:"张三",
age:18,
sex:"男"
}
④ 将模板与数据进行绑定
//参数1:模板的id
//参数2:数据
//返回值:根据模板生成的字符串。
var str = template("tmp", data);
⑤ 将数据显示到页面中
var div = document.querySelector("div");
div.innerHTML = str;
3. 语法
① 输出
默认为编码输出。
{{属性名}} //编码输出,转义为字符串格式,不能解析html。可以防止数据中含有html字符串,避免引起xss攻击。
{{#属性名}} //不编码输出,可以解析html。
② if 判断语法
{{if 条件}}
//条件满足时执行的代码
{{else}}
//条件不满足时执行的代码
{{/if}}
③ each遍历语法
{{ each 数组名 value index }} //value为遍历的当前元素,index为当前下标
//循环体
{{ /each }}
//示例:
{{each data v i}}
<li>
<a href="{{v.url}}">
<img src="{{v.src}}" alt="">
<p>{{v.content}}</p>
</a>
</li>
{{/each}}
本文为个人整理,如有不足之处,望指正。