碼上快樂

相關內容    簡體    繁體

Juicer——a fast template engine

本文轉載自   查看原文   2018-07-10 14:39   944    juicer

https://blog.csdn.net/yutao_struggle/article/details/79201688

當前最新版本: 0.6.8-stable

Juicer 是一個高效、輕量的前端 (Javascript) 模板引擎，效率和易用是它追求的目標。 除此之外，它還可以運行在 Node.js 環境中。

名字的由來

倘若我們把數據比作新鮮可口的水果，把模板看做是水，Juicer 就是把水果和水榨出我們需要的HTML代碼片段的榨汁機。

juicer的引入

<script type=”text/javascript” src=”juicer-1.0.min.js”></script>

Juicer的使用方法

編譯模板並根據給定的數據立即渲染模板

juicer(tpl, data);

僅編譯模板暫不渲染，它會返回一個可重用的編譯后的函數

var compiled_tpl = juicer(tpl);

根據給定的數據，對之前編譯好的模板進行數據渲染

var compiled_tpl = juicer(tpl); 
var html = compiled_tpl.render(data);

注冊/注銷自定義函數（對象）

juicer.register(‘function_name’, function); 
juicer.unregister(‘function_name’);

自定義模板語法邊界符，下邊是 Juicer 默認的邊界符。你可以借此解決 Juicer 模板語法同某些后端語言模板語法沖突的情況

juicer.set({ 'tag::operationOpen': '{@', 'tag::operationClose': '}', 'tag::interpolateOpen': '${', 'tag::interpolateClose': '}', 'tag::noneencodeOpen': '$${', 'tag::noneencodeClose': '}', 'tag::commentOpen': '{#', 'tag::commentClose': '}' });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

默認參數配置

{ 
cache: true [false], 
strip: true [false], 
errorhandling: true [false], 
detection: true [false] 
}

參數更改：

juicer.set('strip',false); juicer.set('cache',false); 或 juicer.set({ 'strip': false, 'cache': false };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

語法

${變量}

使用 ${} 輸出變量值，其中 _ 為對數據源的引用（如 ${_}，常用於數據源為數組的情況）。支持自定義函數（通過自定義函數你可以實現很多有趣的功能，類似 ${data|links} 就可以 通過事先定義的自定義函數 links 直接對 data 拼裝出<a href=”..” alt=”..” /> ）.

${name}
${name|function} ${name|function, arg1, arg2}
  • 1
  • 2
  • 3

示例：

/*data數據*/ var json = { links: [ {href: 'http://juicer.name', alt: 'Juicer'}, {href: 'http://benben.cc', alt: 'Benben'}, {href: 'http://ued.taobao.com', alt: 'Taobao UED'} ] }; /*模板*/ var tpl = [ '{@each links as item}', '${item|links_build} <br />', '{@/each}' ].join(''); /*函數*/ var links = function(data) { return '<a href="' + data.href + '" alt="' + data.alt + '" />'; }; /*注冊自定義函數*/ juicer.register('links_build', links); /*編譯並渲染模板*/ juicer(tpl, json);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

以上代碼執行后會出現結果被轉義了：

&lt;a href=&quot;http://juicer.name&quot; alt=&quot;Juicer&quot; <br /> &lt;a href=&quot;http://benben.cc&quot; alt=&quot;Benben&quot; <br /> &lt;a href=&quot;http://ued.taobao.com&quot; alt=&quot;Taobao UED&quot; <br />
  • 1
  • 2
  • 3

轉義/避免轉義 
出於安全角度的考慮，${變量} 在輸出之前會對其內容進行轉義，如果你不想輸出結果被轉義，可以使用 $${變量} 來避免這種情況

內聯輔助函數{@helper}…{@/helper}

{@helper numberPlus}
    function(number) { return number + 1; } {@/helper} var tpl = 'Number: ${num|numberPlus}'; juicer(tpl, { num: 123 }); //輸出Number：124
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

循環遍歷 {@each} … {@/each}

對數組進行循環遍歷可取得元素或索引值

{@each list as item, index} ${item.prop} ${index} {@/each}
  • 1
  • 2
  • 3
  • 4

輔助循環{@each i in range(m,n)}

{@each i in range(5, 10)} ${i}; //輸出 5;6;7;8;9; {@/each}
  • 1
  • 2
  • 3

判斷{@if}…{@else if}…{@else}…{@/if}

{@each list as item,index} {@if index===3} the index is 3, the value is ${item.prop} {@else if index === 4} the index is 4, the value is ${item.prop} {@else} the index is not 3, the value is ${item.prop} {@/if} {@/each}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

注釋{# 注釋內容}

{# 我是注釋}
  • 1

子模板嵌套 {@include tpl, data}

HTML代碼：

<script type="text/juicer" id="subTpl"> I'm sub content, ${name} </script>
  • 1
  • 2
  • 3

javascript代碼：

var tpl = 'Hi, {@include "#subTpl", subData}, End.'; juicer(tpl, { subData: { name: 'juicer' } }); /*輸出：Hi, I'm sub content, juicer End.*/ //或者通過數據引入子模板，下述代碼也將會有相同的渲染結果： var tpl = 'Hi, {@include subTpl, subData}, End.'; juicer(tpl, { subTpl: "I'm sub content, ${name}", subData: { name: 'juicer' } });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

完整示例

模板頁面tpl_list.html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>公告消息</title> </head> {@each LIST as item,index} {@if item.NOTICE_READ==0} <ul> <li > <div> <ul> <li> <label >${item.NOTICE_TITLE}</label> <span>${item.NOTICE_TIME}</span> </li> <li> <label> ${item.NOTICE_CONTENT} </label> </li> </ul> </div> </li> </ul> {@/if} {@if item.NOTICE_READ==1} <ul> <li> <div> <ul> <li> <label>${item.NOTICE_TITLE}</label> <span>${item.NOTICE_TIME}</span> </li> <li> <label> ${item.NOTICE_CONTENT} </label> </li> </ul> </div> </li> </ul> {@/if} {@/each} </html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

主頁面notice.html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>公告消息</title> <script type="text/javascript" src="jquery-2.1.1.min.js"></script> <script type="text/javascript" src="juicer-1.0.min.js"></script> </head> <body> <div id="P040201"> <div class="page" data-page="noticeMessage" title="公告消息" > </div> <div class="page" data-page="noticeDetail" title="公告詳情"> </div> </div> </body> <script type="text/javascript" src="notice.js"></script> <script type="text/javascript"> me.init(); console.log("...end"); </script> </html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

notice.js

var panel, pages, pageA; var me = { init : function() { console.log("init"); panel = $("#P040201"); pages = panel.find(".page"); pageA = pages.filter("[data-page='noticeMessage']"); list ={ LIST : [ { "NOTICE_ID" : "1", "NOTICE_TITLE" : "貸款", "NOTICE_CONTENT" : "關於移動CRM的開發申請工作貸款流程審批關於移動CRM的開發申請工作貸款流程審批，關於移動CRM的開發申請工作貸款流程審批，關於移動CRM的開發申請工作貸款流程審批，關於移動CRM的開發申請工作貸款流程審批。", "NOTICE_TIME" : "2018-1-25 9:00", "NOTICE_READ" : "0" }, { "NOTICE_ID" : "2", "NOTICE_TITLE" : "jquery data", "NOTICE_CONTENT" : "在元素上存放或讀取數據,返回jQuery對象。當參數只有一個key的時候，為讀取該jQuery對象對應DOM中存儲的key對應的值，值得注意的是，如果瀏覽器支持HTML5，同樣可以讀取該DOM中使用 data-[key] = [value] 所存儲的值。參見最后一個示例。當參數為兩個時，為像該jQuery對象對應的DOM中存儲key-value鍵值對的數據。\ 如果jQuery集合指向多個元素，那將在所有元素上設置對應數據。 這個函數不用建立一個新的expando，就能在一個元素上存放任何格式的數據，而不僅僅是字符串。\ V1.4.3 新增用法, data(obj) 可傳入key-value形式的數據。", "NOTICE_TIME" : "2018-1-25 9:00", "NOTICE_READ" : "0" } ] }; me.initPageA(); }, initPageA : function() { $.get("tpl_list.html",function(tpl){ var tpl = juicer(tpl,list); pageA.html(tpl); }); } };


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 使用Juicer組裝HiC juicer學習筆記 Juicer 輕量級javascript模板引擎 Juicer模板引擎使用筆記 Fast RCNN Git – Fast Forward 和 no fast foward ENGINE=InnoDB fast-route的使用 LR FAST-LIO 模板（Template）
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM