JST(JavaScript Trimpath)前端模板引擎简介

JST(JavaScript Trimpath)前端模板引擎简介及应用

　　今天在做某系统日志列表的时候用到了这个玩意儿。刚开始只是根据别人的例子照葫芦画瓢完成了日志列表及对应详情，晚上有空了才仔细去网上找了找对应的资料，细细的品味了一下。现在把应用总结下。

　　1、Trimpath简介

　　 Trimpath JavaScript 是个轻量级的，基于JavaScript的，跨浏览器，采用APL/GPL开放源代码协议的，可以让你轻松进行基于模板编程方式的纯JS引擎。
　　它有如下的特点：
    　　 ①、采用标准的JavaScript编写，支持跨浏览器
    　　 ②、模板语法类似于：FreeMarker，Velocity,Smarty
    　　 ③、采用简易的语言来描述大段的字串以及Dom/DHTML操作
　　采用该引擎，可以让它来完全处理View方面的事情，服务端Module直接输出Data就可以。让你的MVC模式连成一体，而且由于View由浏览器来处理，大大减少了服务器的负担，用来构建Ajax技术的网络信息系统应用是一个非常好的选择。

　　对应的官方网站是：https://code.google.com/p/trimpath/wiki/JavaScriptTemplates。今天到网站看了一下，貌似这个引擎已经很久没有更新过了，最新的内容也是2010年的东东。不过还好，用起来还算方便。

　　2、简单应用

　　废话不多说了，现在把简单的应用介绍一下：

　　①第一步在HTML页面安装template.js。如下：

 <html>

     <head>

         <script language="javascript" src="template.js"></script>

     </head>

 </html>

　　②创建数据，这个数据可以是静态写好的数据，也可以是ajax从服务器端读来的数据，下面简单期间采用静态写好的数据：

 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" }

 };

　　③创建JST模板如下：

　　需要符合如下格式：

 <textarea id="elementId" style="display:none;"> template body </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 & 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>

　　④下面需要在HTML的body下创建我们常用的holder或者container或者别的你喜欢的名字：

 <div id="outputDiv">

 </div>

　　⑤编写对应的核心代码，其实就简单的几行，也是JST的核心函数，如下：

 <script language="javascript">

 //key function

 var result = TrimPath.processDOMTemplate("cart_jst", data);

 //instead  you can also use next two function

 var myTemplateObj = TrimPath.parseDOMTemplate("cart_jst");

 var result = myTemplateObj.process(data);

 //display in DOM

 document.getElementById("outputDiv").innerHTML = result;

 </script>

　　其中第三行的代码与第五行、六行的代码一样的功能，在你写的时候用其中之一即可。

　　⑥下面是运行结果，当然如果你加上对应的样式，会更好看的！

 Hello John Public.

 Your shopping cart has 3 item(s):

 Name    Description    Price    Quantity & Alert

 MAC    computer    $1000    100 :

 IPOD    music player    $200    200 : ON SALE NOW!

 CINEMA DISPLAY    screen    $800    300 : BEST DEAL!

 We love you! Please check out our Gold Customer specials!

　　3、API

　　想着自己去翻译下对应的API，但是去官网下载文档和JS文件，怎想速度太慢，等了半天都没下下来，就去网上找了下别人写好的，只好“拿来”主义了。

　　附原文地址：http://my.oschina.net/crazyinsomnia/blog/3542

首先到下载页面下载 template.js
然后在你的JSP/ASP/PHP等文件中引用

CODE:

当你引用了template.js文件之后，脚本将创建一个名叫“trimpath"的物件给你使用。
TrimPath Object
这个物件是一个全局的单一变量，也是所有trimpath组件的访问入口，除了它自身，我们尝试建立一个清晰的命名空间给您使用。
下面是 Trimpath 定义的方法：

CODE:

TrimPath.parseDOMTemplate ( elementId, optionalDocument )

得到页面中ID为elementId的Dom组件的InnerHTML，并将其解析成一个模板，这个方法返回一个templateObject对象（下面将详细描述），解析出错时将抛出一个异常，下面是这个方法的参数：
elementId DOM组件，其innerhtml将用来做模板
optionalDocument 一个可选参数，在使用iframe，frameset或者默认多文档时会有用
通常用来做模板的DOM元素是一个隐藏的<textarea>，如下面的例子

CODE:

<textarea id="elementId" style="display:none;"> template body </textarea>

TrimPath.processDOMTemplate ( elementId, contextObject, optionalFlags, optionalDocument )
一个辅助函数，里面调用了TrimPath.parseDOMTemplate() 和 then the process() 方法以获得templateObject。输出的是templateObject.process() 中返回的对象。解析出错时将抛出一个错误。下面是这个方法的参数：
elementId 包含模板内容的DOM元素ID
contextObject 参考templateObject.process()
optionalFlags 参考templateObject.process()
optionalDocument 参考TrimPath.parseDOMTemplate
TrimPath.parseTemplate ( templateContentStr, optionalTemplateName )
解析模板方法，将一个字符串做为模板解析并返回一个templateObject
参数表：
templateContentStr 符合JST语法的字符串，例如: "Hello ${firstName} ${lastName}"
optionalTemplateName 一个可选的字符串用来指定模板名称，辅助查错。
The templateObject
TrimPath.parseTemplate() 和 TrimPath.parseDOMTemplate()的成功运行将产生一个 templateObject 它只有一个主方法
templateObject.process ( contextObject, optionalFlags )
这个方法将模板和数据结合在一起，可以重复调用，如果没有重新解析，templateObjects的缓存和重用将获得最好的系统性能。这个函数的返回值是一个经过“渲染”过的模板的字符串。
参数contextObject 必须是一个对象，并将成为模板的一个访问域，比如一个模板是：${a}，那么contextObject.a必须是可以访问到的。同样${a.b.c}, contextObject.a.b.c也是可以访问到的。
注意：contextObject 可以是javascript中的任意对象，包含字符串, 数字, 日期, 对象和函数。所以${groupCalender(new Date())} 可以这样来调用contextObject.groupCalender(new Date())。当然，你必须自己编程实现groupCalender() 这个函数。
参数optionalFlags 可以是空值，也可以是一个下面列表描述的对象：
throwExceptions 默认是false,当true的时候，process() 方法将重新抛出异常，当false的时候，任何异常将停止解析模板，并在方法返回值包含一个出错信息。
keepWhitespace 默认是falsel，当值为true时，模板的空白将保留。当为false时，空白（换行、空格、TAB）将被截取。
String.prototype.process() 方法
String.prototype.process ( contextObject, optionalFlags )
做为一个便捷的方式为string对象加入一个process（）的方法，让它来执行解析模板的动作。参数跟process()一样。

CODE:

var result = "hello ${firstName}".process(data)
// ...is equivalent to...
var result = TrimPath.parseTemplate("hello ${firstName}").process(data);

添加自定义标识符
如果要采用自定义标识符，你必须把他们放在_MODIFERS 这个对象中，这些标识符集将被添加到contextObject 对象中，然后最终传给process()解析。每一个自定义标识符必须是一个函数并且至少有一个字符串参数输入和一个字符串输出。
例子：

CODE:

JST 的语法和语句
语法

CODE:

${expr}
${expr|modifier}
${expr|modifier1|modifier2|...|modifierN}
${expr|modifier1:argExpr1_1}
${expr|modifier1:argExpr1_1,argExpr1_2,...,argExpr1_N}
${expr|modifier1:argExpr1_1,argExpr1_2|...|modifierN:argExprN_1,argExprN_2,...,argExprN_M}

表达式可以是除了“}”之外的任何合法的javascript字符串
标识符看起来像这种结构：modifierName[:argExpr1[,argExpr2[,argExprN]]]
一个带参数的表达式例子

CODE:

${customer.firstName}
${customer.firstName|capitalize}
${customer.firstName|default:"no name"|capitalize}
${article.getCreationDate()|default:new Date()|toCalenderControl:"YYYY.MM.DD",true,"Creation Date"}
${(lastQuarter.calcRevenue() - fixedCosts) / 1000000}

一个表达式也可以像下面一样通过添加“％”字符来标识，这个可以避免在你的表达式中出现“}”时出错的情况。
比如：

CODE:

Visit our ${% emitLink('Solutions and Products',
{ color: 'red', blink: false }) %} page.
The extra spaces are actually not necessary, like...
${%customer.firstName%}
${%customer.firstName|capitalize%}

语句
JST语句就像是javascript语句一样，也有if/else/for/function这些句子
分支控制语句

CODE:

{if testExpr}
{elseif testExpr}
{else}
{/if}

上述testExpr 是一个合法的javascript判定式
例子

CODE:

{if customer != null && 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 && returnURL != 'main'}?goto=${returnURL}{/if}">Login</a>

*JST引擎还包含一个辅助函数defined(str)，这个可以测试一个变量是否已经被定义。
比如这段代码判断管理员发送了消息给你

CODE:

{if defined('adminMessage')}
System Administrator Important NOTICE: ${adminMessage}
{/if}

循环语句

CODE:

{for varName in listExpr}
{/for}
{for varName in listExpr}
...main body of the loop...
{forelse}
...body when listExpr is null or listExpr.length is 0...
{/for}

*varName 必须是一个javascript的合法变量名
*listExpr 可以是一个数组，对象或者为空，而且只能被赋值一次
例子

CODE:

Two variables are bound in the main body of the loop:
__LIST__varName - holds the result of evaluating listExpr.
varName_index - this is the key or counter used during iteration.
Examples:
{for x in customer.getRecentOrders()}
${x_index} : ${x.orderNumber} <br/>
{forelse}
You have no recent orders.
{/for}
Converted pseudo-code for the above...
var __LIST__x = customer.getRecentOrders();
if (__LIST__x != null && __LIST__x.length > 0) {
for (var x_index in __LIST__x) {
var x = __LIST__x[x_index];
${x_index} : {$x.orderNumber} <br/>
}
} else {
You have no recent orders.
}

定义变量
{var varName}
{var varName = varInitExpr}
*varName必须是一个合法的javascript变量名
*varInitExpr必须是一个没有包含"}"的字符串
例子：

CODE:

{var temp = crypto.generateRandomPrime(4096)}
Your prime is ${temp}.

宏定义
{macro macroName(arg1, arg2, ...argN)}
...body of the macro...
{/macro}
*宏类似于一个javascript函数，不同点在于宏的主体是另外一个包含了诸如控制语句、循环语句的JST模板
*宏的名称必须是一个合法javascript变量名
*宏的返回值是一个字符创
*使用宏可以采用这种语法：${macroName()}
一个使用宏的例子

CODE:

{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}

运行上述语句将出现

QUOTE:

*1
*2
*3

这样的列表。只需将数据列表赋值给htmlList这个宏，就会帮你把数据通过<li>方式列出来，聪明的你很快就会把它改成<option><td>等应用了。
从宏的访问域来说，默认情况下它是每个模板私有的，但是如果你想定义
一个宏库的话，那么也许你需要在process()之前先定义可以导出宏：contextObject['exported'] ={};
下面是例子：

CODE:

{macro userName(user)}
{if user.aliasName != null && user.aliasName.length > 0}
${user.aliasName}
{else}
${user.login}
{/if}
{/macro}
${exported.userName = userName |eat}

另外，你也可以设置 contextObject['exported'] = contextObject;它也可以正常的工作。
CDATA 文本区段
[code]
{cdata}
...text emitted without JST processing...
{/cdata}
{cdata EOF}
...text emitted without JST processing...
EOF

JST(JavaScript Trimpath)前端模板引擎简介的更多相关文章

前端模板引擎doT.js的用法
简介一款简单好用的前端模板引擎用法 <script type="text/javascript" src="js/doT.min.js">< ...
Mustache.js前端模板引擎源码解读
mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...
artTemplate-优秀的前端模板引擎
artTemplate-优秀的前端模板引擎 1.html中引入artTemplate的js文件: <script type="text/javascript" src=&qu ...
SS - DIY一个前端模板引擎.(一)
前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码. 个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离. 为了理解模板引 ...
DIY一个前端模板引擎.(一)
前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码.个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离.为了理解模板引擎原 ...
前端模板引擎doT.js的使用
前言我们在做前端开发时,经常需要根据后台返回的json数据动态生成html并插入到页面中显示.最简单的方法就是通过jQuery去遍历数据拼接html,如以下: <script> var ...
TrimPath - Js模板引擎
当页面中引用template.js文件之后,脚本将创建一个TrimPath对象供你使用. parseDOMTemplate(elementId,optionalDocument) //获得模板字符串代 ...
jquery template.js前端模板引擎
作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...
Smarty 模板引擎简介
前言 Smarty是一个使用PHP写出来的模板引擎,是目前业界最著名的PHP模板引擎之一.它分离了逻辑代码和外在的内容,提供了一种易于管理和使用的方法,用来将原本与HTML代码混杂在一起PHP代码逻辑 ...

随机推荐

iOS开发资源：几个类似Path 2.0侧滑菜单的效果实现
IIViewDeckController/ViewDeck 类似 Path 2.0 的视图左右滑动的效果,可向左或者向右顺滑的滑动.支持ARC和non-ARC,默认ARC. https://githu ...
【ajax】FormData
Intellij IDEA 工具快捷键
IntelliJ Idea 常用快捷键列表 Alt+回车导入包,自动修正Ctrl+N 查找类Ctrl+Shift+N 查找文件Ctrl+Alt+L 格式化代码Ctrl+Alt+O 优化导入的类 ...
Debian 入门安装与配置2
Debian 入门安装与配置2 1. C/C++开发必装软件 atp-get install gcc 这个不用说,用来编译C程序 apt-get install g++ 用来编译C++程序 ap ...
Java 内部类和匿名类实现JButton动作 ActionListener类
import javax.swing.*; import java.awt.*; import java.awt.event.*; public class ControlCircle2 extend ...
CoreOS 835.12.0 稳定版安装
导读 CoreOS是一个基于Docker的轻量级容器化Linux发行版,为Docker而生,CoreOS作为Docker生态圈中的重要一员,日益得到各大云服务商的重视,发展风头正劲. CoreOS宣称 ...
android:clipToPadding 和 android:clipChildren 解决ListView设置padding后 padding不跟随改动
clipToPadding就是说控件的绘制区域是否在padding里面的,true的情况下如果你设置了padding那么绘制的区域就往里缩, clipChildren是指子控件是否超过padding ...
C++ Primer : 第十二章 : 动态内存之shared_ptr类
在C++中,动态内存是的管理是通过一对运算符来完成的:new ,在动态内存中为对象分配空间并返回一个指向该对象的指针,delete接受一个动态对象的指针,销毁该对象,并释放该对象关联的内存. 动态内 ...
颜色追踪块CamShift---33
原创博客:转载请标明出处:http://www.cnblogs.com/zxouxuewei/ 颜色追踪块CamShift滤波器. 首先确保你的kinect驱动或者uvc相机驱动能正常启动:(如果你使 ...
JavaWeb学习记录（二十二）——模式字符串与占位符
一.Java代码案例 @Test public void test10(){ int planet=7; String event="a disturban ...

JST(JavaScript Trimpath)前端模板引擎简介

JST(JavaScript Trimpath)前端模板引擎简介的更多相关文章

随机推荐

热门专题