TrimPath 模板引擎使用指南-layui模板引擎

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)

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

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