[[180688]]

TrimPath 是一款輕量級(jí)的前端 JavaScript 模板引擎，語法類似 FreeMarker, Velocity，主要用于方便地渲染 json 數(shù)據(jù)

語法 Syntax

表達(dá)式 Expressions

表達(dá)式和修飾符(其它模板語言中叫做過濾器 filter)中間用 | 分割且 不能有空格

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

語句 Statements

控制流 Control Flow

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

循環(huán) Loops

{for varName in listExpr} 
{/for} 
 
{for varName in listExpr} 
    ...循環(huán)主體... 
{forelse} 
    ...當(dāng) listExpr 是 null 或者 length 為 0 ... 
{/for} 

變量聲明 Variable Declarations

變量聲明語句用花括號(hào) {} 括起來，不需要關(guān)閉。類似 JavaScript 中的賦值語句

{var varName} 
{var varName = varInitExpr} 

宏聲明 Macro Declarations

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

CDATA 部分 CDATA Text Sections

CDATA 部分用來告訴模板引擎不用做任何解析渲染，直接輸出。比如展示一個(gè)模板字符串本身

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

In-line JavaScript

eval blocks 用來執(zhí)行 JavaScript 代碼片段

{eval}  
...模板渲染的時(shí)候執(zhí)行的 JavaScript 代碼...  
{/eval 

minify blocks 用來壓縮內(nèi)容中的換行符，比如壓縮 HTML 屬性

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

修飾符 Modifier

修飾符用來處理上一個(gè)表達(dá)式的結(jié)果，并輸出內(nèi)容。類似于 Linux shell 中的 pipe 命名，可以串聯(lián)

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

內(nèi)置修飾符

• capitalize 返回大寫內(nèi)容
• default:valueWhenNull 如果內(nèi)容為 null，返回 valueWhenNull
• eat 返回空內(nèi)容，一般用于表達(dá)式求值后又不想展示輸出的內(nèi)容
• escape 轉(zhuǎn)換 HTML 字符實(shí)體，比如： & 轉(zhuǎn)換成 &
• 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 一般用來封裝可復(fù)用 HTML 模板，類似函數(shù)的功能。對(duì)于每個(gè)模板來說 macro 是私用的。如果想公用 macro，可以保存 macro 引用到 contextObject 上(下次調(diào)用 process() 方法的時(shí)候再手動(dòng)掛載上!? )。需要在調(diào)用 process() 方法之前給 contextObject 設(shè)置一個(gè)空的 exported 屬性：contextObject['exported'] = {}這個(gè)公用的 macro 設(shè)計(jì)的有點(diǎn)奇葩，可以參考這個(gè) 示例

{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: [ 
        '移動(dòng)（TD-LTE)', 
        '聯(lián)通(TD-LTE)', 
        '電信(FDD-LTE)' 
    ] 
} 
 
data._MODIFIERS = { 
    toFixed: function(n, num) { 
        return n.toFixed(num) 
    } 
} 
 
var template = '\ 
名稱: ${name}<br>\ 
重量：${weight|toFixed:2}<br>\ 
內(nèi)存：${ram|capitalize}<br>\ 
網(wǎng)絡(luò)：\ 
{for item in networks}\ 
  {if item_index!=0}|{/if}\ 
  ${item}\ 
{/for}'; 
 
template.process(data) 

上面的代碼輸出：

名稱: iPhone 6 Plus<br> 
重量：480.00<br> 
內(nèi)存：16GB<br> 
網(wǎng)絡(luò)： 
  移動(dòng)（TD-LTE) 
 | 聯(lián)通(TD-LTE) 
 | 電信(FDD-LTE) 

【本文是51CTO專欄作者周琪力的原創(chuàng)稿件，轉(zhuǎn)載請(qǐng)注明出處】

戳這里，看該作者更多好文