from: http://lzyy.org/blog/archives/38
首先来说说，为什么要用javascript模板。以PHP为例，PHP本身就可以穿插于HTML之间，所以也算是一种模板语言，缺点就是代码看起来会有点乱，尤其是融合了各种循环，判断，赋值等等操作（也不方便格式化），没有做到结构和数据分离。当然PHP也有很多的模板引擎，使用这些模板引擎的一个缺陷就是，效率不如原生的PHP高。没错，可以生成缓存文件，但对于更新相对频繁的站点就不行了。这个时候或许可以考虑javascript模板技术了。
使用了javascript模板，就把解析压力交给了浏览器，服务端只需要提供要用到的数据即可。
这里要介绍的是JST(JAVASCRIPT TEMPLATE)，它有什么特点呢？
- 文件体积小压缩后只有6K
- 兼容主流浏览器包括IE6
- 使用方便待会看下面的demo就知道了
- 功能齐全，使用灵活如果用过php的模板，那么对JST的用法应该就会比较熟悉了
使用方法
无论是数据还是模板，JST都是把这些放在textarea里的，当然你可以设置为隐藏，这样textarea就相当于一个容器了，为什么是textarea？因为textarea的innerHTML能够非常好地保持数据结构，而且不会被浏览器解析。所以是理想的藏身之所。
要使用JST，第一步当然是载入对应的js文件
<html>
<head>
<script language="javascript" src="trimpath/template.js"></script>
...
</head>
...
</html>
然后创建数据，一些objet和array
<script language="javascript">
var data = {
products : [ { name: "mac", desc: "computer",
price: 1000, quantity: 100, alert:null },
{ name: "ipod", desc: "music player",
price: 200, quantity: 200, alert:"on sale now!" },
{ name: "cinema display", desc: "screen",
price: 800, quantity: 300, alert:"best deal!" } ],
customer : { first: "John", last: "Public", level: "gold" }
};
</script>
接下来就是待解析的模板了，放在了一个id为cart_jst的textarea里
<textarea id="cart_jst" style="display:none;">
Hello ${customer.first} ${customer.last}.<br/>
Your shopping cart has ${products.length} item(s):
<table>
<tr><td>Name</td><td>Description</td>
<td>Price</td><td>Quantity &amp; Alert</td></tr>
{for p in products}
<tr><td>${p.name|capitalize}</td><td>${p.desc}</td>
<td>$${p.price}</td><td>${p.quantity} : ${p.alert|default:""|capitalize}</td>
</tr>
{forelse}
<tr><td colspan="4">No products in your cart.</tr>
{/for}
</table>
{if customer.level == "gold"}
We love you! Please check out our Gold Customer specials!
{else}
Become a Gold Customer by buying more stuff here.
{/if}
</textarea>
下面这个就是关键的解析语句了，还是很简单的
<script language="javascript">
//一句话搞定解析并赋值,cart_jst是textarea的id，data是之前定义的数据
//现在result已经包含解析过的模板文件内容了
var result = TrimPath.processDOMTemplate("cart_jst", data);
//也可以分两步走，先解析，再赋值
var myTemplateObj = TrimPath.parseDOMTemplate("cart_jst");
var result = myTemplateObj.process(data);
//也可以给这个模板一个新的数据源
var result2 = myTemplateObj.process(differentData);
//输出结果
someOutputDiv.innerHTML = result;
</script>
最后的内容就像这样
Hello John Public.<br/>
Your shopping cart has 3 item(s):
<table>
<tr><td>Name</td><td>Description</td>
<td>Price</td><td>Quantity &amp; Alert</td></tr>
<tr><td>MAC</td><td>computer</td>
<td>$1000</td><td>100 : </td>
</tr>
<tr><td>IPOD</td><td>music player</td>
<td>$200</td><td>200 : ON SALE NOW!</td>
</tr>
<tr><td>CINEMA DISPLAY</td><td>screen</td>
<td>$800</td><td>300 : BEST DEAL!</td>
</tr>
</table>
We love you! Please check out our Gold Customer specials!
也可以不把模板放到textarea里，直接解析String也是可以的
<script language="javascript">
var myStr = "Hello ${customer.first} ${customer.last}, Welcome back!";
result = myStr.process(data);
//或者直接使用process方法，还省去了一个中间变量
result = "Hello ${customer.first} ${customer.last}, Welcome back!".process(data);
//The result: "Hello John Public, Welcome back!"
//跟下面的效果是一样
result = "Hello " + customer.first + " " + customer.last + ", Welcome back!";
//或者先解析，再赋值
var myTemplateObj = TrimPath.parseTemplate(myStr);
var result = myTemplateObj.process(data);
var result2 = myTemplateObj.process(differentData);
</script>
提示：也可以把jst模板文件放到服务端，等要用时再去load，如$.getScript()
模板语言
真是麻雀虽小，五脏俱全啊，看看下面的例子就知道了
跟Smarty一样，JST也可以通过在变量后面加|在模板里”包装”变量
${customer.firstName}
${customer.firstName|capitalize}
${customer.firstName|default:"no name"|capitalize}
if else判断语句
{if customer != null &amp;&amp; customer.balance > 1000}
We love you!
{/if}
{if user.karma > 100}
Welcome to the Black Sun.
{elseif user.isHero}
Sir, yes sir! Welcome!
{if user.lastName == "Yen"}
Fancy some apple pie, sir?
{/if}
{/if}
<a href="/login{if returnURL != null &amp;&amp; returnURL != 'main'}?goto=${returnURL}{/if}">Login</a>
循环输出
{for x in customer.getRecentOrders()}
//这里的x_index指代循环的次数，使用方法为"变量名_index"
${x_index} : ${x.orderNumber} <br/>
//如果customer.getRecentOrders()长度为0或为null
{forelse}
You have no recent orders.
{/for}
自定义变量
{var temp = crypto.generateRandomPrime(4096)}
Your prime is ${temp}
cdata，不接受解析，保持原来的数据，就跟xml里的CDATA一样，有两种使用方法，效果都一样
{cdata}
...text emitted without JST processing...
{/cdata}
{cdata EOF}
...text emitted without JST processing...
EOF
在模板内执行javascript
{eval}
//str是从js处传过来的参数
//如TrimPath.parseDOMTemplate('ev').process({str:'hello JST'});
alert(str);
{/eval
{eval EOF}
跟上面的一样
EOF
以上演示代码直接从官方网站拿来的，为了照顾像我一样看见E文就头大的同学
注意
如果在textarea的模板里又套了一个textarea会出错，可以通过自定义变量解决，或者避免这样的情况发生。
<textarea id="myTemplate" style="display:none">
{var textarea = "textarea"}
<form>
<${textarea} name="myField">
Some stuff here
</${textarea}>
</form>
</textarea>