JS 模板引擎之JST模板
项目中有用到JST模板引擎，于是抽个时间出来，整理了下关于JST模板引擎的相关内容。
试想一个场景，当点击页面上列表的翻页按钮后，通过异步请求获得下一页的列表数据并在页面上显示出来。传统的JS做法是编译返回的数据后，依次遍历列表对象，并组装html代码和数据，最终生成总字符串，然后塞到指定的列表容器里。当数据比较庞大时，这种处理方式非常低效率。更加高效且稳定的方法就是使用JST模板引擎来完成。
定义
JST模板引擎是一款基于JS的轻量级的跨浏览器框架，采用APL/GPL开放源代码协议，可以轻松进行基于模板编程方式的JS引擎。它有以下特点。
1.采用标准的JS编写，支持跨浏览器
2.模板语言类似于：freemarker等
3.用简单的语法来描述字串以及操作DOM元素
4.方便的解析XML文件格式到指定模板
通过使用JST模板语言，可以大大减少服务器端的负担，服务器端只管输出数据就行，接下来的数据处理与显示由JST来完成，这在使用AJAX技术的应用里非常高效。
使用步骤
引用相关的库文件：template.js
当引用库文件后，脚本会创建一个trimpath对象，这个对象包换以下几种主要的方法。
1. TrimPath.parseDOMTemplate (elementId, optionalDocument)，获得模板对象。
这个方法是得到页面中ID为elementId的DOM对象，获得这个DOM的innerHTML,并将其解析为一个模板，这个方法返回一个templateObject对象，如果解析出错，则抛出异常。
两个参数：elementID为用作模板元素的ID，optionalDocument为可选参数。
一般将用作模板的DOM元素放在一个隐藏的textarea里，用textarea标签来放置内容，是因为textarea的innerHTML能够很好的保持数据结构，且不被浏览器解析。
2. TrimPath.parseTemplate (templateContentStr, optionalTemplateName)
解析模板方法，将一个字符串作为模板解析并返回一个templateObject。
两个参数：templateContentStr 符合JST语法的字符串。optionalTemplateName 模板名称，为可选参数。
TrimPath.parseTemplate() 和 TrimPath.parseDOMTemplate()的成功运行将产生一个 templateObject。 templateObject有一个主方法。templateObject.process ( contextObject, optionalFlags )
3. TemplateObject.process (contextObject, optionalFlags)
这个方法将模板和数据结合在一起，可以重复调用，如果没有重新解析，templateObjects的缓存和重用将获得最好的系统性能。这个函数的返回值是一个经过“渲染”过的模板的字符串。
两个参数：参数contextObject 必须是一个对象，并将成为模板的一个访问域。 它可以是JS中的任意对象，包含字符串, 数字, 日期, 对象和函数。
参数optionalFlags 可以是空值，也可以是一个下面列表描述的对象： throwExceptions 默认是false,当true的时候，process() 方法将重新抛出异常，当false的时候，任何异常将停止解析模板，并在方法返回值包含一个出错信息。 keepWhitespace 默认是falsel，当值为true时，模板的空白将保留。当为false时，空白（换行、空格、TAB）将被截取。
4. String.prototype.process() 方法
String.prototype.process ( contextObject, optionalFlags )
做为一个便捷的方式为string对象加入一个process（）的方法，让它来执行解析模板的动作。参数跟process()一样。
5. TrimPath.processDOMTemplate ( elementId, contextObject, optionalFlags, optionalDocument )
TrimPath.processDOMTemplate方法是调用TrimPath.parseDOMTemplate()和 then the process() 方法以获得templateObject，并输出templateObject.process()中返回的对象。
四个参数：elementID指模板内容的节点ID，contextObject, optionalFlags是templateObject.process()的参数，optionalDocument是TrimPath.parseDOMTemplate的参数。
JST的语法
1. 表达式
${expr}
${expr|modifier}
加%标识符是为了避免在表达式中出现“}”导致出错的情况。
${%customer.firstName%}
2. 分支控制语句
JST语句就像是javascript语句一样，也有if/else/for/function这些句子。
{if testExpr}
{elseif testExpr}
{else}
{/if}
3. for循环
item为单个元素，lists为数组，对象等。
{for item in lists}
{/for}
{list lists as item}
{/list }
4. 辅助函数defined，检测一个变量是否已经定义。
{if defined('aa')}
aa is defineds: ${aa}
{/if}
案例说明
1. 引用相关的JS库，template.js
2. 在隐藏的textarea里放上你想要显示的html模块内容，这块内容就是要在页面上渲染并展示的。
<#noparse>
<textarea name="jst" id="jst-mdl-spcart">
<li data-pid="${pid}" data-index="${index}" data-type="${type}"{if type==1} data-cl="${colorType}" data-st="${scaleType}"{/if}>
<div class="iteml">
<span class="checkbox u-icn{if checkStatus == 1} u-icn-1{/if}" onclick="mb.m.artspcart.sel(this)">选择</span>
</div>
<div class="itemr">
<div class="info">
{if type == 1}
<div class="pic{if colorType == 2} pic-1{/if}">
<a href="http://www.lofter.com/art/product-${pid}/" class="img {if scaleType==1}sz1{elseif scaleType==2}sz2{else}sz0{/if}" target="_blank"><img src="http://imgsize.ph.126.net/?imgurl=${showImg}_{if scaleType==1}100x100{elseif scaleType==2}75x112{else}145x96{/if}x1.jpg"></a>
</div>
{else}
<div class="pic">
<span class="bor"></span>
<span class="bor bor-1"></span>
<span class="bor bor-2"></span>
<a href="http://www.lofter.com/art/product-${pid}/" class="card" target="_blank"><img src="http://imgsize.ph.126.net/?imgurl=${showImg}_194x136x1.jpg"></a>
</div>
{/if}
</div>
</div>
</li>
</textarea>
</#noparse>
noparse是为了防止这块内容被解析掉，是ftl里的写法。
3. 当发送完请求，执行回调函数并返回list之后，可以采用如下的方式来渲染模板并展示在页面上。
function showTopTenInCity(cityData) {
var cityTopTenList={"cityTopTenList":cityData};
$("showCity").innerHTML = TrimPath.parseTemplate($("jst-mdl-spcart").value).process(cityTopTenList);
}
先使用TrimPath.parseTemplate()或TrimPath.parseDOMTemplate()生成一个模板对象，即templateObject，然后使用templateObject.process(data)解析该模板对象，生成模板和数据结合在一起的字符串。将要显示的容器的innerHTML设为这个字符串的值。这种代码展示渲染的过程比之前的字符串拼接更方便，更简洁。
