scourgen

JavaScript Templates(JST),JavaScript语言下的模板引擎

JavaScript Templates(简称JST)是TrimPath开发的一款JavaScript语言的模板引擎,它可以在任何网页的前端使用,并用来处理大量的,实时的数据的前台展示.JST也是vivipos的打印模板处理引擎.

JST使用的语言是JavaScript,而使用的数据格式则是普通的JSON格式.

简单示例:

<div id="tpl_id">Hello <b>${name}</div>
<script language="javascript" src="trimpath/template.js"></script>
<script>
var a={name:"scourgen"};
alert(TrimPath.processDOMTemplate("tpl_id", a));
</script>

则会alert出scourgen.

JST支持一下几种语法:

• 变量判断:

   ${name|default:"is null"} 

• 语句判断

  {if name=="scourgen"}
  scourgen is here
  {else}
  no people
  {/if}
  

• 赋值

  {var nameList=["scourgen","John","Shelly"]} 

• 循环

  {for name in nameList}
  Hello ${name}!
  {/for}
   

• 宏操作

  //借用官方的例子:</li>
  </ul>
  <a name="Macro_Declarations">  Examples:
  {macro htmlList(list, optionalListType)}
  {var listType = optionalListType != null ? optionalListType : "ul"}
  <${listType}>
  {for item in list}
  <li>${item}</li>
  {/for}
  </${listType}>
  {/macro}
  
  Using the macro...
  ${htmlList([ 1, 2, 3])}
  ${htmlList([ "Purple State", "Blue State", "Red State" ], "ol")}
  {var saved = htmlList([ 100, 200, 300 ])}
  ${saved} and ${saved}</a>

• 执行JS

  //借用官方的例子:</li>
  </ul>
  <a name="eval_blocks">  <select onchange="sel_onchange()"></select>
  {eval}
  sel_onchange = function() {
  ...Do some complicated javascript...;
  ...more js code here...;
  }
  {/eval}</a>

• HTML属性/CSS压缩

  //借用官方的例子:
  <a name="minify_blocks"> <select onchange="{minify}
  ...Do some complicated multi-line javascript...;
  ...more js code here...;
  this.enabled = false;
  {/minify}">
  <select onchange="{minify END_OF_JS}
  ...Do some complicated multi-line javascript...;
  ...more js code here...;
  this.enabled = false;
  END_OF_JS"></a>

用JST的好处

1. 提高性能:对于大数据量的,需要及时处理的数据操作,大可将数据的处理放到前台,减轻后台压力
2. JST语法简单,JST的语法和Smarty,Velocity类似,如果有以上模板系统开发经验的话,可以马上上手.
3. 增加系统扩展性,提供另外一种Model到View的途径
4. JST速度极快
   我用官方的demo作了两个测试,数据量分别是5和1000
   数据量为5条记录时:
   

   数据量为1000条记录时:
   

   可以看到,虽然记录数量增长了200倍,而运行时间和程序堆栈执行次数却只增长了39倍和117倍,而通过对Profile进行进一步分析,可以看出大部分时间是在入口函数以及DOM操作上,足以得出结论:JST的性能是很适合对大容量的数据进行处理的.