JS模板引擎之JST语法

什么是模板引擎

首先来说说,为什么要用javascript模板。以PHP为例,PHP本身就可以穿插于HTML之间,所以也算是一种模板语言,缺点就是代码看起来会有点乱,尤其是融合了各种循环,判断,赋值等等操作(也不方便格式化),没有做到结构和数据分离。当然PHP也有很多的模板引擎,使用这些模板引擎的一个缺陷就是,效率不如原生的PHP高。没错,可以生成缓存文件,但对于更新相对频繁的站点就不行了。这个时候或许可以考虑javascript模板技术了。使用了javascript模板,就把解析压力交给了浏览器,服务端只需要提供要用到的数据即可。

皓眸大前端开发学习

这里要介绍的是JST(JAVASCRIPT TEMPLATE),它有什么特点呢?

1.文件体积小压缩后只有6K
2.兼容主流浏览器包括IE6
3.使用方便待会看下面的demo就知道了
4.功能齐全,使用灵活如果用过php的模板,那么对JST的用法应该就会比较熟悉了

使用方法

无论是数据还是模板,JST都是把这些放在textarea里的,当然你可以设置为隐藏,这样textarea就相当于一个容器了,为什么是textarea?因为textarea的innerHTML能够非常好地保持数据结构,而且不会被浏览器解析。所以是理想的藏身之所。
要使用JST,第一步当然是载入对应的js文件

1
2
3
4
5
6
7
<html>
<head>
<script language="javascript" src="trimpath/template.js"></script>
...
</head>
...
</html>

然后创建数据,一些objet和array

1
2
3
4
5
6
7
8
9
10
11
<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里

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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;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>

下面这个就是关键的解析语句了,还是很简单的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

最后的内容就像这样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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;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也是可以的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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也可以通过在变量后面加|在模板里”包装”变量

1
2
3
${customer.firstName}
${customer.firstName|capitalize}
${customer.firstName|default:"no name"|capitalize}

if else判断语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{if customer != null &amp;amp;&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;&amp;amp; returnURL != 'main'}?goto=${returnURL}{/if}">Login</a>

循环输出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{for x in customer.getRecentOrders()}
//这里的x_index指代循环的次数,使用方法为"变量名_index"
${x_index} : ${x.orderNumber} <br/>
//如果customer.getRecentOrders()长度为0或为null
{forelse}
You have no recent orders.
{/for}

{list customer.getRecentOrders() as x}
//这里的x_index指代循环的次数,使用方法为"变量名_index"
${x_index} : ${x.orderNumber} <br/>
//如果customer.getRecentOrders()长度为0或为null
{forelse}
You have no recent orders.
{/list}

实际使用中,好像有个问题,这里面取index的时候,好像只能用x_index否则出不来??

自定义变量

1
2
3
4
5
6
7
8
9
10
11
{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

1
2
3
4
5
6
7
8
9
{eval}
//str是从js处传过来的参数
//如TrimPath.parseDOMTemplate('ev').process({str:'hello JST'});
alert(str);
{/eval

{eval EOF}
跟上面的一样
EOF

以上演示代码直接从官方网站拿来的,为了照顾像我一样看见E文就头大的同学

注意
如果在textarea的模板里又套了一个textarea会出错,可以通过自定义变量解决,或者避免这样的情况发生。

1
2
3
4
5
6
7
8
<textarea id="myTemplate" style="display:none">
{var textarea = "textarea"}
<form>
<${textarea} name="myField">
Some stuff here
</${textarea}>
</form>
</textarea>

高级用法

如果你想在模板里面执行一段代码,改变数据模型的值,控制下方逻辑的变化,怎么办?好办的!

1
2
3
4
5
6
7
8
9
{if aa==1}
<div style="display:none;"> {bb = 1}</div>
{else}
<div >aa != 1</div>
{/if}

{if bb == 1}
<a> 只有aa==1时,才显示</a>
{/if}

发现奥妙了吗! 由于使用赋值语句返回的是false,所以我们将赋值语句 {bb = 1} 包含在不显示的div中,这样完美了。

谢谢!

转载请注明出处:http://www.haomou.net/2015/10/25/2015_jst/
有问题请留言。T_T 皓眸大前端开发学习 T_T