内容摘要：TrimPath 是一款轻量级的前端 JavaScript 模板引擎，语法类似 FreeMarker, Velocity，主要用于方便地渲染 json 数据语法 Syntax表达式 Expressio

TrimPath 是模板一款轻量级的前端 JavaScript 模板引擎，语法类似 FreeMarker,引擎 Velocity，主要用于方便地渲染 json 数据

语法 Syntax

表达式 Expressions

表达式和修饰符(其它模板语言中叫做过滤器 filter)中间用 | 分割且 不能有空格

${ expr} ${ expr|modifier} ${ expr|modifier1:arg1,使用arg2|modifier2:arg1,arg2|...|modifierN:arg1,arg2} 

语句 Statements

控制流 Control Flow

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

循环 Loops

{ for varName in listExpr} { /for} { for varName in listExpr}     ...循环主体... { forelse}     ...当 listExpr 是 null 或者 length 为 0 ... { /for} 

变量声明 Variable Declarations

变量声明语句用花括号 { } 括起来，不需要关闭。指南类似 JavaScript 中的模板赋值语句

{ var varName} { var varName = varInitExpr} 

宏声明 Macro Declarations

{ macro macroName(arg1, arg2, ...argN)}     ...macro 主体... { /macro} 

CDATA 部分 CDATA Text Sections

CDATA 部分用来告诉模板引擎不用做任何解析渲染，直接输出。引擎比如展示一个模板字符串本身

{ cdata}     ${ customer.firstName} ${ customer.lastName} { /cdata} 

In-line JavaScript

eval blocks 用来执行 JavaScript 代码片段

{ eval}  ...模板渲染的使用时候执行的 JavaScript 代码...  { /eval 

minify blocks 用来压缩内容中的换行符，比如压缩 HTML 属性

<div id="commentPanel" style="{ minify}       display:none;       margin: 1em;       border: 1px solid #333;       background: #eee;       padding: 1em;     { /minify}">   ... </div> 

修饰符 Modifier

修饰符用来处理上一个表达式的站群服务器指南结果，并输出内容。模板类似于 Linux shell 中的引擎 pipe 命名，可以串联

${ name|capitalize} ${ name|default:"noname"|capitalize} 

内置修饰符

capitalize 返回大写内容 default:valueWhenNull 如果内容为 null，使用返回 valueWhenNull eat 返回空内容，指南一般用于表达式求值后又不想展示输出的模板内容 escape 转换 HTML 字符实体，比如： & 转换成 & h 和 escape 效果一样

自定义修饰符

算定义修饰符可以持载到 contextObject 上的引擎 _MODIFIERS 属性上

var Modifiers = {  toFixed: function(n, num) {  return n.toFixed(num) } }  var out = { var nu = 12}${ nu|toFixed:2}.process({  _MODIFIERS: Modifiers }); 

宏 Macro

macro 一般用来封装可复用 HTML 模板，类似函数的使用功能。对于每个模板来说 macro 是私用的服务器租用。如果想公用 macro，可以保存 macro 引用到 contextObject 上(下次调用 process() 方法的时候再手动挂载上!? )。需要在调用 process() 方法之前给 contextObject 设置一个空的 exported 属性：contextObject[exported] = { }这个公用的 macro 设计的有点奇葩，可以参考这个 示例

{ macro link(href, name)}     <a href="${ href}">${ name}</a> { /macro} ${ link(http://google.com, google)}      => <a href="http://google.com">google</a> ${ link(http://facebook.com, facebook)}  => <a href="http://facebook.com">facebook</a> 

示例

var data = {      name: iPhone 6 Plus,     weight: 480,     ram: 16gb,     networks: [         移动（TD-LTE),         联通(TD-LTE),         电信(FDD-LTE)     ] } data._MODIFIERS = {      toFixed: function(n, num) {          return n.toFixed(num)     } } var template = \ 名称: ${ name}<br>\ 重量：${ weight|toFixed:2}<br>\ 内存：${ ram|capitalize}<br>\ 网络：\ { for item in networks}\   { if item_index!=0}|{ /if}\   ${ item}\ { /for}; template.process(data) 

上面的代码输出：

名称: iPhone 6 Plus<br> 重量：480.00<br> 内存：16GB<br> 网络：   移动（TD-LTE)  | 联通(TD-LTE)  | 电信(FDD-LTE) 

【本文是专栏作者周琪力的原创稿件，转载请注明出处】

戳这里，看该作者更多好文

服务器托管