asfman
android developer
posts - 90,  comments - 213,  trackbacks - 0
使用模板引擎Trimpath

使用模板引擎,让开发模式更清晰,也让职责更明确,对维护对开发都是一件双赢的事情。

曾经接触过SmartTemplate和Velocity,如果纯从编写前端模板来说,都不是太难的事情,大部分流行的模板引擎都支持类似的语法,如Smarty以及本文要介绍的JS模板引擎Trimpath。

如果一个项目,需要前端大量的重绘数据来展现,大量的DOM树会随用户的操作而产生变化,这时,无论从功能上,还是性能上,以及维护的方便性上,Trimpath template都是一个不错的选择。唯一遗憾的是,已经有近2年的时间没有更新了,是没有bug还是作者已经放弃掉了都不得而知。因为是好的东西,就不管那么多了。

Trimpath支持的语法:

1)变量声明

{var yihui = '一回'}
${yihui} // 一回


2)变量(表达式)调节器

Trimpath的变量调节器是可以扩展的,在使用上和Smarty几乎看不出区别:
{var yihui = '<hr />'}
${yihui|escape|capitalize} // &LT;HR /&GT;

Trimpath默认支持以下调节器:capitalize,escape(h),default,eat。同时支持表达式的调节,如:
${new Date()|toFormat:'YYYY-MM-DD'}
你也可以根据自己的需要进行扩展,上面的toFormat就是自定义的。


3)条件控制

{var yihui = 'b'}
{if yihui == 'a'}
      ${yihui}等于a
{else}
      ${yihui}不等于a
{/if}


4)循环控制

假设数据为:
var datas = [
   {'type' : 'market', 'name' : '市场基金', 'value' : 102.44},
{'type' : 'channel', 'name' : '渠道基金', 'value' : 54},
{'type' : 'customer', 'name' : '客服考核', 'value' : 98}
];

模板可以这样写:
<table width="400" cellspacing="0" cellpadding="0" border="1">
{for x in datas}
     <tr>
      <td>${x.type}</td>
       <td>${x.name}</td>
       <td>${x.value}</td>
    </tr>
{forelse}
   <tr>
       <td>没有数据</td>
    </tr>
{/for}
</table>
这样书写,是不是要比字符串拼接更直观,维护也方便呢?


5)支持宏定义

宏可以理解为能够完成一定功能的函数,将通用的功能组织起来,有利于代码复用:
{macro htmlList(list, optionalListType)}
    {var listType = optionalListType != null ? optionalListType : "ul"}
    <${listType}>
      {for item in list}
        <li>${item}</li>
      {/for}
    </${listType}>
{/macro}

${htmlList([1,2,3], 'ol')}


6)CDATA区域

CDATA区域的内容将不被Trimpath解析,会原样输出
{cdata}hello,${yihui}{/cdata}


7)内联JS代码

eval区域内可以直接书写JS代码:
<select onchange="sel_onchange()">
    <option value="1">1</option>
    <option value="2">2</option>
</select>
{eval}
   sel_onchange = function() {
      alert('我不小心被change了');
   }
{/eval}

posted on 2010-08-10 18:05 汪杰 阅读(455) 评论(1)  编辑 收藏 引用 所属分类: javascript

FeedBack:
# re: Trimpath
2010-08-10 18:06 | 汪杰
rimpath JavaScript 是不个轻量级的,基于JavaScript的,跨浏览器,采用APL/GPL开放源代码协议的,可以让你轻松进行基于模板编程方式的纯JS引擎。

它有如下的特点:
1、采用标准的JavaScript编写,支持跨浏览器
2、模板语法类似于:FreeMarker,Velocity,Smarty
3、采用简易的语言来描述大段的字串以及Dom/DHTML操作
4、可以很方便的解析XML文件格式的数据到指定模板。

采 用该引擎,可以让它来完全处理View方面的事情,服务端Module直接输出Data就可以。让你的MVC模式连成一体,而且由于View由浏览器来处 理,大大减少了服务器的负担,用来构建Ajax技术的网络信息系统应用是一个非常好的选择。下面将通过翻译该站的文章来给大家介绍这个JST引擎的使用。

网站地址:

http://trimpath.com/project/wiki/JavaScriptTemplates

如果大家等不及看我翻译或者不满意翻译质量,请看上面网站的原文。

hred 2005-11-21 17:18
JST十分钟简介

JST API
JST Markup Syntax
JST Standard Modifiers
JST Downloads
JST Community Wiki
JST Browser Compatibility
JST Online Demo

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


[Copy to clipboard]

当你引用了template.js文件之后,脚本将创建一个名叫“trimpath”的物件给你使用。

TrimPath Object
这个物件是一个全局的单一变量,也是所有trimpath组件的访问入口,除了它自身,我们尝试建立一个清晰的命名空间给您使用。

下面是 Trimpath 定义的方法:

TrimPath.parseDOMTemplate ( elementId, optionalDocument )

得到页面中ID为elementId的Dom组件的InnerHTML,并将其解析成一个模板,这个方法返回一个templateObject对象(下面将详细描述),解析出错时将抛出一个异常,下面是这个方法的参数:
elementId DOM组件,其innerhtml将用来做模板
optionalDocument 一个可选参数,在使用iframe,frameset或者默认多文档时会有用
通常用来做模板的DOM元素是一个隐藏的
[Copy to clipboard]

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);
[Copy to clipboard]

添加自定义标识符

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

var myModifiers = {
hello : function(str, greeting) {
if (greeting == null)
greeting = “Hello”;
return greeting + “, ” + str;
},
zeroSuffix : function(str, totalLength) {
return (str + “000000000000000″).substring(0, totalLength);
}
};
var myData = {
firstName : “John”,
getCurrentPoints : function() { /* Do something here… */ return 12; }
}

myData._MODIFIERS = myModifiers;

“${firstName}”.process(myData) == “John”
“${firstName|hello}”.process(myData) == “Hello, John”
“${firstName|hello:”Buenos Dias”}”.process(myData) == “Buenos Dias, John”
“${firstName|hello:”Buenos Dias”|capitalize}”.process(myData) == “BUENOS DIAS, JOHN”

“${getCurrentPoints()}”.process(myData) == “12″
“${getCurrentPoints()|zeroSuffix:4}”.process(myData) == “1200″
[Copy to clipboard]

顺其自然 2005-11-22 12:11
东东不错,可惜没时间研究

hred 2005-12-01 16:02
JST 的语法和语句

语法

${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]]]

一个带参数的表达式例子
${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}

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

比如:
Visit our ${% emitLink(‘Solutions and Products’,
{ color: ‘red’, blink: false }) %} page.

The extra spaces are actually not ne
cessary, like…
${%customer.firstName%}
${%customer.firstName|capitalize%}

语句
JST语句就像是javascript语句一样,也有if/else/for/function这些句子

分支控制语句

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

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

例子

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

Login

*JST引擎还包含一个辅助函数defined(str),这个可以测试一个变量是否已经被定义。

比如这段代码判断管理员发送了消息给你

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

循环语句

{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 可以是一个数组,对象或者为空,而且只能被赋值一次
例子

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}

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

}
} else {
You have no recent orders.
}

定义变量

{var varName}
{var varName = varInitExpr}
*varName必须是一个合法的javascript变量名
*varInitExpr必须是一个没有包含”}”的字符串

例子:

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

宏定义
{macro macroName(arg1, arg2, …argN)}
…body of the macro…
{/macro}

*宏类似于一个javascript函数,不同点在于宏的主体是另外一个包含了诸如控制语句、循环语句的JST模板

*宏的名称必须是一个合法javascript变量名
*宏的返回值是一个字符创
*使用宏可以采用这种语法 :${macroName()}
一个使用宏的例子

{macro htmlList(list, optionalListType)}
{var listType = optionalListType != null ? optionalListType : “ul”}
<${listType}>
{for item in list}
${item}
{/for}

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

运行上述语句将出现
*1
*2
*3
这样的列表。只需将数据列表赋值给htmlList这个宏,就会帮你把数据通过

方式列出来,聪明的你很快就会把它改成 等应用了。
从宏的访问域来说,默认情况下它是每个模板私有的,但是如果你想定义一个宏库的话,那么也许你需要在process()之前先定义可以导出宏:contextObject['exported'] ={};
下面是例子:
{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 文本区段

{cdata}
…text emitted without JST processing…
{/cdata}

{cdata EOF}
…text emitted without JST processing…
EOF  回复  更多评论
  
只有注册用户登录后才能发表评论。

<2019年10月>
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789

常用链接

留言簿(15)

随笔分类(1)

随笔档案(90)

文章分类(727)

文章档案(712)

相册

收藏夹

http://blog.csdn.net/prodigynonsense

友情链接

最新随笔

搜索

  •  

积分与排名

  • 积分 - 384283
  • 排名 - 6

最新随笔

最新评论

阅读排行榜

评论排行榜