在我们实际的开发过程中，可能会遇到使用ajax去后台获取一堆的数据，然后动态的渲染到页面上。比如：去后台获取一个list集合，然后将数据以表格的形式展示在页面上。另外一种可能发生的情况就是页面上需要批量增加数据信息等等。如果我们前台使用html动态的拼接的话，不利于后期的维护，而且也不利于阅读。因此就需要一个前台模板引擎帮我们解决这个问题。

    laytpl是一个前端模板引擎，可以解决我们上面遇到的问题，并且使用简单，开发方便，模板渲染的效率也高。

    laytpl官方网址: ​​ http://laytpl.layui.com/​​

一、laytpl的语法简单使用：

{{ d.field }}

输出文本，不转义html

{{= d.field }}

输出文本，转义html

{{# if(条件){ }} ...{{# }else{ }}...{{# } }}

if else的写法

{{# for(循环的内容) { }}....{{# } }}

for循环的写法

二、基于上方语法的一个小例子

     代码示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>基本使用</title>
    <script type="text/javascript" src="../js/laytpl.js"></script>
  </head>
  <body>
    <!-- 1.编写模板 -->
    <script type="text/html" id="template">
      <h3> hello {{ d.world }} </h3>
      <h3> 你好: {{= d.redWorld }} </h3>
      <h3> if条件的使用 {{# if(d.sex=='0') {}} 男 {{# }else { }} 女 {{# } }}</h3>
      <h3> for循环的使用: </h3>
      <ul>
        {{# var num = 1;}}
        {{# for(var i=0;i<d.datas.length;i++){}}
          <li> {{d.datas[i].title}} -- {{num++}}</li>
        {{#}}}
      </ul>
    </script>
    
    <!-- 2.定义输出的视图 -->
    <div id="outputView"></div>
    
    <!-- 3.渲染模版 -->
    <script type="text/javascript">
      var data = {
        world : '<span style="color:red"> word </span>',
        redWorld : '<span style="color:red"> word </span>',
        sex : '1',
        datas : [{title:'文章一'},{title:'文章二'},{title:'文章三'},{title:'文章四'}]
      };
      laytpl(getById('template').innerHTML).render(data, function(html){
        getById('outputView').innerHTML = html;
      });
      
      function getById(id){
        return document.getElementById(id);
      }
    </script>
  </body>
</html>

    输出结果：
    js模板引擎laytpl的使用_数据

三、实现一个动态增加行和删除行的例子(模拟页面上的批量增加数据的操作)

     代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>基本使用</title>
    <script type="text/javascript" src="../js/laytpl.js"></script>
    <style type="text/css">table,tr,td,th,thead,tbody{border-collapse: collapse;}</style>
  </head>
  <body>
    <!-- 1.编写模板 -->
    <script type="text/html" id="template">
      <tr>
        <td> <input type="text" name="username"/> </td>
        <td> 男:<input type="radio" name="sex" value="0"/> 女:<input type="radio" name="sex" value="1"/> </td>
        <td> <input type="text" name="age" value="{{d.age}}"/> </td>
        <td> <input type="button" value=" + " onclick="add(this)" /> <input type="button" value=" - " onclick="removeTr(this)" /> </td>
      </tr>
    </script>
    <!-- 2.定义输出的视图 -->
    <table border="1">
      <thead>
        <tr>
          <th>用户名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="outputView">
      </tbody>
    </table>
    <!-- 3.渲染模版 -->
    <script type="text/javascript">
      function loadTemplate(age){
        laytpl(getById('template').innerHTML).render({ age : age || 20 }, function(html){
          getById('outputView').innerHTML += html;
        }); 
      }
      loadTemplate();
      function add($this){
        loadTemplate( Math.round(Math.random()*100) );
      }
      function removeTr($this){
        $this.parentNode.parentNode.remove();
      }
      function getById(id){
        return document.getElementById(id);
      }
    </script>
  </body>
</html>

   效果：
   js模板引擎laytpl的使用_laytpl_02