模板引擎

模板引擎作用

• 减少字符串拼接

• 在模板里面解析json，然后跟 html 内容拼接，性能会更好

artTemplate

art-template 是一个简约、超快的模板引擎。

网址：github.com/aui/artTemp…

中文使用文档：aui.github.io/art-templat…

<% 与 %> 符号包裹起来的语句则为模板的逻辑表达式
<%= content %>为输出表达式, 计算出来后, 将值传给需要的地方

artTemplate 使用步骤

引入模板文件
创建模板
将数据跟模板进行绑定
在模板里面编写代码解析数据
绑定数据和模板之后得到内容
将数据内容写到页面上面

例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-1.12.4.min.js"></script>
  <!-- 1、引入模板的文件 -->
  <script src="js/template-native.js"></script>
  <!-- 2、创建模板 -->
  <script type="text/html" id="tem">
    <!-- 3、添加模板中的结构 -->
    <% for (var i = 0 ; i < 5 ; i++) { %>
      <div>这是一个模板中的 div<%= i %></div>
      <div>这是一个模板中的 div<%= name %></div>
    <% } %>    
    <!-- 4、在模板中编写 js 代码解析数据 -->
  </script>
</head>
<body>
  <div class="box">

  </div>
  <script>
    // 5、将模板内的内容添加到 box 里面
    // template() 方法可以调用模板内容
    // 参数1： 调用的模板的id
    // 参数2：是一个对象型的数据，数据会传给模板，对象中的每个属性的属性名在模板中可以直接当变量名使用
    $(".box").html(template("tem", {name: "tom"}));
  </script>
</body>
</html>

Ajax(四) - 模板引擎

模板引擎

artTemplate