标准模板引擎

npm安装

npm install art-template --save
浏览器中使用
下载 template-web.js
注意：以上两种方式区别在于能否使用模板文件。由于浏览器中不能读取文件系统，所以 template(filename, data) 不支持传入文件路径，只能在页面通过 document.getElementById(filename).innerHTML或者Jquery 来获取模板内容。或者直接传模版字符串。

模版语法

输出

<!-- 标准语法 -->
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}

<!-- 原始语法 -->
<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>

条件语句

   {{if val1}}
     ...
    {{else if val2}}
     ...
    {{else}}
     ...
    {{/if}}

<!-- 原始语法 -->
<% if (value) { %>
 ...
<% } %>

<% if (v1) { %>
 ...
<% } else if (v2) { %>
 ... 
<% } %>

循环

 <!-- 标准语法 -->
    {{each target}}
        {{$index}}    {{$value}}
    {{/each}}

<!-- 原始语法 -->
<% for(var i = 0; i < target.length; i++){ %>
    <%= i %>    <%= target[i] %>
<% } %>

<!--
    注意：
    1、target 支持 array 与 object 的迭代，其默认值为 $data。
    2、$value 与 $index 可以自定义：{{each target val key}}。
-->

变量

<!-- 标准语法 -->
{{set temp = data.sub.content}}

<!-- 原始语法 -->
<% var temp = data.sub.content; %>

过滤器
  注册过滤器

   // 过滤器1
    template.defaults.imports.dateFormat = function(date, format){
        /*[code..]*/
    };
    // 过滤器2
    template.defaults.imports.timestamp = function(value){
        return value * 1000
    };

    // 注意:过滤器函数第一个参数接受目标值。

使用过滤器

<!-- 标准语法 -->
{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}

<!-- 原始语法 -->
<%= $imports.dateFormat($imports.timestamp(date), 'yyyy-MM-dd hh:mm:ss') %>

<!-- {{value | filter}} 过滤器语法类似管道操作符，它的上一个输出作为下一个输入。 -->

核心方法

// 基于模板名渲染模板
template(filename, data);

// 将模板源代码编译成函数
template.compile(source, options);

// 将模板源代码编译成函数并立刻执行
template.render(source, data, options);