2008-12-21

【程式】JS : JavaScript Templates - JST

在寫PHP時,都是利用Smarty來將程式和樣版分開。

而現在的工作大部份都是使用JavaScript居多,

因為覺的將樣版跟程式分開還蠻不錯的。可以比較方便維護,

所以就對JavaScript的樣版研究了一下,

覺的JST這套還蠻不錯用的,有興趣的人也可以玩玩看。

下面介紹一個簡單的Sample。

//顯示結果區塊
<div id="ageDiv"></div>
 
//樣版
<textarea id="_AGE_JST" style="display:none;">
<h1>${uname}</h1>
年齡:${age}
</textarea>
 
//程式碼
<script language="JavaScript" type="text/JavaScript">
var data = {
  uname : 'chingwei',
  age : '18'
}
$('#ageDiv').html(TrimPath.processDOMTemplate("_AGE_JST", data));  //使用$要先載入JQuery
</script>

再貼上幾個我常用到的樣版:

{for x in rss.channel.item }
  {if x_index
      ${x.title}
      ${x.description}
    
  {/if}
{forelse}
  Empty...
{/for}
{if num>200} 
  大於200
{elseif num>100}
  大於100小於200
{else}
  小於100
{/if}
{if defined('user')}
  Hello, ${user}
{/if}

其實功能還有很多,但我用到的只是最簡單的,
他還可以在樣版中使用你定義好的JS Function,
可以到JavaScript Template Syntax看更多的用法。

最近在考慮要將他從程式中拿掉,因為我現在的頁面有大部份都是利用JST來產生的。
所以在時間上會比直接從PHP就產生好結果來的慢,如果電腦是非常老舊型的,
在頁面的產生就會花更多的時間了,而且IE JS的執行效能,真的…有慢到…
雖然用前端來產生,會減輕Server的效能,但…為了速度的考量,
我想我會將他拿掉了…唉~~

 

PS.

但我覺的他還是不錯用,而且如果沒大量使用,應該是ok的,他的速度也沒說慢的很誇張,只是我現在的狀況是能再快點,就要快……

0 comments:

張貼留言