TrimPath 模板引擎使用指南

jaysun 发布于2019-08-20 12:34 / 915人阅读

摘要：类似中的赋值语句宏声明主体部分部分用来告诉模板引擎不用做任何解析渲染，直接输出。对于每个模板来说是私用的。如果想公用，可以保存引用到上下次调用方法的时候再手动挂载上。

博客原文同步：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 属性

...

修饰符 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)}
    ${name}
{/macro}

${link("http://google.com", "google")}      => google
${link("http://facebook.com", "facebook")}  => facebook

示例

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}

重量：${weight|toFixed:2}

内存：${ram|capitalize}

网络：
{for item in networks}
  {if item_index!=0}|{/if}
  ${item}
{/for}";

template.process(data)

上面的代码输出：

名称: iPhone 6 Plus

重量：480.00

内存：16GB

网络：
  移动（TD-LTE)
 | 联通(TD-LTE)
 | 电信(FDD-LTE)

云服务器 GPU云服务器模板引擎 python模板引擎 ejs模板引擎 smarty模板引擎

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81065.html

【归档存储 UArchive】UArchive 工具使用说明

摘要：介绍因产品升级，将暂停维护。只能依赖于工具进行相关操作。下载存档下载一个激活的存档，必须指定。请注意，在当前版本参数不能省略，这是一个，我们将在稍后的版本修正它删除存档删除一个存档必须指定。介绍(Introduction)因产品升级，UArchive 将暂停维护。请使用 US3 对象存储归档类型，以获取更优惠更可靠的归档存储服务：US3 产品价格UArchive是UCLOUD公司的归档存储产...

Tecode 2022-06-28 19:00 评论0 收藏0
京东单品页前端开发那些不得不说的事儿

摘要：是负责展示京东商品的落地页面。比如京东首页，正常情况加载完页面一共有多个节点，基本上全部用于展示商品信息广告图和内容布局，页面上的三方异步服务也比较少。原文：https://keelii.github.io/2016/07/31/something-have-to-say-with-JD-item 简介详情页也叫做单品页，域名以「item.jd.com/skuid.html」为格式...

FleyX 2019-08-22 10:36 评论0 收藏0
Express 文档（使用模板引擎）

摘要：一些与一起使用的流行模板引擎是和，应用程序生成器使用作为其默认值，但它也支持其他几个。有关可与一起使用的模板引擎列表，请参阅模板引擎，另请参阅比较模板引擎等。，使用的模板引擎，例如，要使用模板引擎。使用模板引擎模板引擎使你可以在应用程序中使用静态模板文件，在运行时，模板引擎用实际值替换模板文件中的变量，并将模板转换为发送到客户端的HTML文件，这种方法可以更轻松地设计HTML页面。...

gxyz 2019-08-23 14:21 评论0 收藏0
浅谈web中前端模板引擎的使用

摘要：置换型模板引擎的优点实现简单，缺点效率低，无法满足高负载的应用请求。用途百度词条模板引擎可以让网站程序实现界面与数据分离，业务代码与逻辑代码的分离，提升开发效率，良好的设计也提高了代码的复用性。前端模板的出现使得前后端分离成为可能。模板引擎模板引擎-百度词条什么是模板引擎？（百度词条）模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据分离而产生的，它可以生成...

妤锋シ 2019-08-23 12:36 评论0 收藏0
Hello 2019! Hanjst/汉吉斯特模板语言及引擎创新发布

摘要：值此一元复始之际，恭祝朋友们新年万事如意寄望汉吉斯特能帮助大家从各种模板中解脱出来，为人类做出更大的贡献。汉吉斯特模板语言及引擎是一种基于的模板语言及解析引擎，她可以运行在客户端，也可以运行在服务器端。年元旦，汉吉斯特正式对外公布。 Hello 2019! Hanjst/汉吉斯特模板语言及引擎创新发布。值此一元复始之际，恭祝朋友们新年万事如意！寄望 Hanjst/汉吉斯特能帮助...

shiguibiao 2019-08-23 14:50 评论0 收藏0