成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

TrimPath 模板引擎使用指南

jaysun / 926人閱讀

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

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

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 屬性


  ...
修飾符 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)}
    ${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: [
        "移動(dòng)（TD-LTE)",
        "聯(lián)通(TD-LTE)",
        "電信(FDD-LTE)"
    ]
}

data._MODIFIERS = {
    toFixed: function(n, num) {
        return n.toFixed(num)
    }
}

var template = "
名稱: ${name}

重量：${weight|toFixed:2}

內(nèi)存：${ram|capitalize}

網(wǎng)絡(luò)：
{for item in networks}
  {if item_index!=0}|{/if}
  ${item}
{/for}";

template.process(data)

上面的代碼輸出：

名稱: iPhone 6 Plus

重量：480.00

內(nèi)存：16GB

網(wǎng)絡(luò)：
  移動(dòng)（TD-LTE)
 | 聯(lián)通(TD-LTE)
 | 電信(FDD-LTE)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81065.html

相關(guān)文章

  • 【歸檔存儲(chǔ) UArchive】UArchive 工具使用說明

    摘要：介紹因產(chǎn)品升級(jí)，將暫停維護(hù)。只能依賴于工具進(jìn)行相關(guān)操作。下載存檔下載一個(gè)激活的存檔，必須指定。請(qǐng)注意，在當(dāng)前版本參數(shù)不能省略，這是一個(gè)，我們將在稍后的版本修正它刪除存檔刪除一個(gè)存檔必須指定。介紹(Introduction)因產(chǎn)品升級(jí)，UArchive 將暫停維護(hù)。請(qǐng)使用 US3 對(duì)象存儲(chǔ)歸檔類型，以獲取更優(yōu)惠更可靠的歸檔存儲(chǔ)服務(wù)：US3 產(chǎn)品價(jià)格UArchive是UCLOUD公司的歸檔存儲(chǔ)產(chǎn)...

    Tecode 評(píng)論0 收藏0

  • 京東單品頁前端開發(fā)那些不得不說的事兒

    摘要：是負(fù)責(zé)展示京東商品的落地頁面。比如京東首頁，正常情況加載完頁面一共有多個(gè)節(jié)點(diǎn)，基本上全部用于展示商品信息廣告圖和內(nèi)容布局，頁面上的三方異步服務(wù)也比較少。 原文：https://keelii.github.io/2016/07/31/something-have-to-say-with-JD-item 簡介 詳情頁也叫做單品頁，域名以「item.jd.com/skuid.html」為格式...

    FleyX 評(píng)論0 收藏0

  • Express 文檔（使用模板引擎）

    摘要：一些與一起使用的流行模板引擎是和，應(yīng)用程序生成器使用作為其默認(rèn)值，但它也支持其他幾個(gè)。有關(guān)可與一起使用的模板引擎列表，請(qǐng)參閱模板引擎，另請(qǐng)參閱比較模板引擎等。，使用的模板引擎，例如，要使用模板引擎。 使用模板引擎 模板引擎使你可以在應(yīng)用程序中使用靜態(tài)模板文件，在運(yùn)行時(shí)，模板引擎用實(shí)際值替換模板文件中的變量，并將模板轉(zhuǎn)換為發(fā)送到客戶端的HTML文件，這種方法可以更輕松地設(shè)計(jì)HTML頁面。...

    gxyz 評(píng)論0 收藏0

  • 淺談web中前端模板引擎的使用

    摘要：置換型模板引擎的優(yōu)點(diǎn)實(shí)現(xiàn)簡單，缺點(diǎn)效率低，無法滿足高負(fù)載的應(yīng)用請(qǐng)求。用途百度詞條模板引擎可以讓網(wǎng)站程序?qū)崿F(xiàn)界面與數(shù)據(jù)分離，業(yè)務(wù)代碼與邏輯代碼的分離，提升開發(fā)效率，良好的設(shè)計(jì)也提高了代碼的復(fù)用性。前端模板的出現(xiàn)使得前后端分離成為可能。 模板引擎 模板引擎-百度詞條 什么是模板引擎？（百度詞條） 模板引擎（這里特指用于Web開發(fā)的模板引擎）是為了使用戶界面與業(yè)務(wù)數(shù)據(jù)分離而產(chǎn)生的，它可以生成...

    妤鋒シ 評(píng)論0 收藏0

  • Hello 2019! Hanjst/漢吉斯特 模板語言及引擎創(chuàng)新發(fā)布

    摘要：值此一元復(fù)始之際，恭祝朋友們新年萬事如意寄望漢吉斯特能幫助大家從各種模板中解脫出來，為人類做出更大的貢獻(xiàn)。漢吉斯特模板語言及引擎是一種基于的模板語言及解析引擎，她可以運(yùn)行在客戶端，也可以運(yùn)行在服務(wù)器端。年元旦，漢吉斯特正式對(duì)外公布。 Hello 2019! Hanjst/漢吉斯特 模板語言及引擎創(chuàng)新發(fā)布。 值此一元復(fù)始之際，恭祝 朋友們新年萬事如意！寄望 Hanjst/漢吉斯特能幫助...

    shiguibiao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<