认识Web和Web标准publish: false

模版引擎

引入

我们在使用ajax请求数据时，返回的如果是一个 JSON 格式的字符串，我们需要将其包装到对应的HTML代码中，再添加到页面上，才能看到效果。那么这个包装得过程有没有简单的方法呢?

假设在 js 中有如下数据：

  1.     var obj = {
  2.         name:"fox",
  3.         age:18,
  4.         skill:"卖萌"
  5.     };

希望包装为:

  1. <ul>
  2.   <li>姓名:fox</li>
  3.   <li>年龄:18</li>
  4.   <li>爱好:卖萌</li>
  5. </ul>

我们可以通过模板插件来实现。

模版插件的原理

我们定义一段文本作为模板,读取文本,使用特殊的符号<%= 属性名 %>,通过正则表达式找到这些特殊的符号进行替换,是不是就实现了这样的效果呢?

常见的模板引擎

  • BaiduTemplate(百度开发)

  • ArtTemplate(腾讯开发)：GitHub地址、文档地址。

  • velocity.js(淘宝开发)

  • Handlebars

ArtTemplate

标准语法：

  1.     {{if user}}
  2.       <h2>{{user.name}}</h2>
  3.     {{/if}}

渲染模板：

  1.     var data = {
  2.         `标签`,
  3.         list: [`文艺`, `博客`, `摄影`]
  4.     };
  5.     var html = template(`test`, data);
  6.     document.getElementById(`content`).innerHTML = html;

举例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/template-native-debug.js"></script>
  7.     <script src="js/jquery-2.2.0.js"></script>
  9.     <script id="tpl" type="text/html">
  10.         <h3><%= className %></h3>
  11.         <ul>
  12.             <% for(var i = 0; i< students.length;i++) { %>
  13.                 <li><%= i+1 %>. <%= students[i] %></li>
  14.             <% } %>
  15.         </ul>
  17.     </script>
  19.     <script>
  20.         var data = {
  21.             className:"前端1期",
  22.             students:["张飞","刘备","诸葛亮","甄姬","小乔","汪汪"]
  23.         };
  25.         $(function (){
  26.             var html = template("tpl",data);
  27.             $("#demo").html(html);
  28.         })
  29.     </script>
  30. </head>
  31. <body>
  33.     <div id="demo">
  35.     </div>
  36. </body>
  37. </html>

效果：

模板引擎 - 图1