【程式】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的，他的速度也沒說慢的很誇張，只是我現在的狀況是能再快點，就要快……