JS模板引擎art-template

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qincidong/article/details/82621290

art-template 是一个简约、超快的模板引擎。
它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。

文档地址：https://aui.github.io/art-template/docs/index.html

gitHub地址：
https://github.com/aui/art-template

使用例子在github的example中有。

通常，在不借助模板引擎Ajax查询数据列表，需要自己手动拼写N多个tr和td。
比如：

$.get("${ctx}/student/list",function(r) {
    if (r.returncode == 0) {
      if (r.data) {
        var t = $('#list tbody').empty();
        for (var i=0;i< r.data.length;i++) {
          var item = r.data[i];
          var tr = "<tr><td>"+ (i+1)+"</td><td>" + item.name + "</td><td>" + item.age + "</td><td>" + item.scoreSum+ "</td><td>"+ item.scoreAvg + "<td></tr>";
          t.append($(tr));
        }
      }
    }
    else {
      layer.alert(r.errmsg);
    }
});

使用JS模板引起后：

<script type="text/javascript" src="${ctx}/asset/js/art-template/template-web.js"></script>
<script id="template" type="text/html">
    {{each data item index}}
    <tr>
        <td>{{index+1}}</td>
        <td>{{item['name']}}</td>
        <td>{{item['age']}}</td>
        <td>{{item['score_sum']}}</td>
        <td>{{item['score_avg']}}</td>
    </tr>
    {{/each}}
</script>
// 获取模板内容字符串
var templateHtml = $('#template').html();
// 编译模板
var render = template.compile(templateHtml);
$('#queryAll').click(function () {
    $.get("${ctx}/student/list", function (r) {
        if (r.returncode == 0) {
            if (r.data) {
                // 渲染模板
                var html = render(r);
                $('#list tbody').html(html);
            }
        }
        else {
            layer.alert(r.errmsg);
        }
    });
});