TrimPath 模板引擎使用指南

jaysun 發布于2019-08-20 12:34 / 920人閱讀

摘要：類似中的賦值語句宏聲明主體部分部分用來告訴模板引擎不用做任何解析渲染，直接輸出。對于每個模板來說是私用的。如果想公用，可以保存引用到上下次調用方法的時候再手動掛載上。

博客原文同步：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模板引擎

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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