js模板引擎之art-template

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}}

本文为个人整理，如有不足之处，望指正。

注：转载请引用。