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设为这个字符串的值。这种代码展示渲染的过程比之前的字符串拼接更方便，更简洁。