前端模板引擎

一、不使用模板引擎

• 待渲染tbody

  <tbody id="subitemListBody">
  </tbody>
  

• js写法(用forEach渲染html标签)

  $.each(dataList, function (i, n) {
     html2 = "<tr>" +
        " <td>" +
        "      <span name=\"doctorName\">" + n.doctorName + "</span>" +
        "      <input type=\"hidden\" name='doctorId' value=" + n.doctorId + ">" +
        " </td>" +
        " <td name='groupOwner'>" + isCreater + "</td>" +
        " <td name='pricePer'>" + n.singlePrice + "</td>" +
        " <td>" +
        " <button type=\"button\" class=\"layui-btn layui-btn-xs layui-btn-danger del\">删除" +
        " </button>" +
        " </td>" +
        "     </tr>";
     $("#subitemListBody").append(html2);
  })
  

需要在js里面手写html标签，面临"",''以及引用变量用+n+等繁琐操作。烦人。。。

二、layui (laytpl)模板引擎

• 待渲染tbody

<tbody id="subitemListBody">
</tbody>

• 模板写法(具体使用文档www.layui.com/doc/modules…)

<script type="text/html" id="tpl">
    {{# layui.each(d,function(i,n){ }}
    <tr>
        <td>
            <span name="doctorName">{{n.doctorName }}</span>
        </td>
        {{# if (n.groupOwner == 1){ }}
        <td>否</td>
        {{# } }}
    </tr>
    {{# }); }}
</script>

• js写法
  1. 在layui引用laytpl模块
  2. 在调用接口回调中渲染模板

layui.use(['laytpl'], function () {
   laytpl =layui.laytpl;

$.ajax({
   url: ContextPath + '****',
   data: {},
   success: function (data) {
   laytpl(tpl.innerHTML).render(dataList,function (html) {
   document.getElementById("subitemListBody").innerHTML = html;
})

仅仅需要在js中写两句代码，顺便引用上laytpl模块即可轻松渲染html标签。省略了双引号单引号以及在js中写标签的烦恼！！！！

唯一的缺点就是模板的语法过于繁琐 ，虽然跟java语法一样，但是{{# }} 有点费劲，下边的模板引擎写法更加简洁。

三、art-template(腾讯出版)/目前停更

• 待渲染面

<tbody id="subitemListBody">
</tbody>

• 模板写法(具体使用文档aui.github.io/art-templat…)

<script type="text/html" id="tpl1">
    {{ each rows as value i }}
    <tr>
        <td>
            <span name="doctorName">{{value.doctorName }}</span>
        </td>
        {{if (value.groupOwner == 1) }}
        <td>是</td>
        {{else }}
        <td>否</td>
        {{/if }}
    </tr>
    {{/each }}
</script>

• js写法(只需要引用 template-web.js即可使用)

  并且只需要在回调函数中渲染模板即可

  $.ajax({
     url: ContextPath + '****',
     data: {},
     success: function (data) {
  	var html = template("tpl1", data);
  	document.getElementById("subitemListBody").innerHTML += html;
  })
  

写法只需要{{ }}引起来即可 if判断也省略了{} 记忆方便 对于循环的 rows 是渲染数据data中的字段即data.rows