TrimPath 模板引擎使用指南

2019年8月31日 150次阅读 来源: keelii

博客原文同步：https://keelii.github.io/2016/11/21/trimpath-template-engine/

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 字符实体，比方： & 转换成 &amp;

  • 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)
    原文作者：keelii
    原文地址: https://segmentfault.com/a/1190000007608561
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞