一篇文章讲明白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}//代码效果参考：http://www.ezhiqi.com/zx/art_4832.html

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模块内容，这块内容就是要在页面上渲染并展示的。