使用模板引擎Trimpath

使用模板引擎，让开发模式更清晰，也让职责更明确，对维护对开发都是一件双赢的事情。

曾经接触过SmartTemplate和Velocity，如果纯从编写前端模板来说，都不是太难的事情，大部分流行的模板引擎都支持类似的语法，如Smarty以及本文要介绍的JS模板引擎Trimpath。

如果一个项目，需要前端大量的重绘数据来展现，大量的DOM树会随用户的操作而产生变化，这时，无论从功能上，还是性能上，以及维护的方便性 上，Trimpath template都是一个不错的选择。唯一遗憾的是，已经有近2年的时间没有更新了，是没有bug还是作者已经放弃掉了都不得而知。因为是好的东西，就不 管那么多了。

Trimpath支持的语法：

1）变量声明

{var yihui = '一回'}
${yihui} // 一回

2）变量（表达式）调节器

Trimpath的变量调节器是可以扩展的，在使用上和Smarty几乎看不出区别：
{var yihui = '<hr />'}
${yihui|escape|capitalize} // &LT;HR /&GT;

Trimpath默认支持以下调节器：capitalize，escape（h），default，eat。同时支持表达式的调节，如：
${new Date()|toFormat:'YYYY-MM-DD'}
你也可以根据自己的需要进行扩展，上面的toFormat就是自定义的。

3）条件控制

{var yihui = 'b'}
{if yihui == 'a'}
      ${yihui}等于a
{else}

{elseif}
      ${yihui}不等于a
{/if}

4）循环控制

假设数据为：
var datas = [
   {'type' : 'market', 'name' : '市场基金', 'value' : 102.44},
{'type' : 'channel', 'name' : '渠道基金', 'value' : 54},
{'type' : 'customer', 'name' : '客服考核', 'value' : 98}
];

模板可以这样写：
<table width="400" cellspacing="0" cellpadding="0" border="1">
{for x in datas}
     <tr>
      <td>${x.type}</td>
       <td>${x.name}</td>
       <td>${x.value}</td>
    </tr>
{forelse}
   <tr>
       <td>没有数据</td>
    </tr>
{/for}
</table>
这样书写，是不是要比字符串拼接更直观，维护也方便呢？

5）支持宏定义

宏可以理解为能够完成一定功能的函数，将通用的功能组织起来，有利于代码复用：
{macro htmlList(list, optionalListType)}
    {var listType = optionalListType != null ? optionalListType : "ul"}
    <${listType}>
      {for item in list}
        <li>${item}</li>
      {/for}
    </${listType}>
{/macro}

${htmlList([1,2,3], 'ol')}

6）CDATA区域

CDATA区域的内容将不被Trimpath解析，会原样输出
{cdata}hello,${yihui}{/cdata}

7）内联JS代码

eval区域内可以直接书写JS代码：
<select onchange="sel_onchange()">
    <option value="1">1</option>
    <option value="2">2</option>
</select>
{eval}
   sel_onchange = function() {
      alert('我不小心被change了');
   }
{/eval}