juicer學習筆記

什么是juicer(what)

Juicer 是一個高效、輕量的前端 (Javascript) 模板引擎，使用 Juicer 可以是你的代碼實現數據和視圖模型的分離(MVC)。 除此之外，它還可以在 Node.js 環境中運行。

通過這個例子直觀的展現出前端模板引擎的好處所在，這么做能夠完全剝離html和代碼邏輯，便於多人協作和后期的代碼維護。

一個完善的模板引擎應該兼顧這幾點

1. 語法簡明
2. 執行效率高
3. 安全性
4. 錯誤處理機制
5. 多語言通用性

a.語法

• 循環： {@each}…{@/each}
• 判斷：{@if}…{@else if}…{@else}…{@/if}
• 變量（支持函數）：${varname|function}
• 注釋：{# comment here}

b.安全性

• juicer對數據輸出做了安全轉義，如果不想被轉義，可以使用$${varname}。

c.錯誤處理

• 如果沒有錯誤處理機制，在模版編譯和渲染出現錯誤的時候，js會停止加載
• juicer的錯誤處理機制會在出現錯誤時跳過當前步驟並在控制台上提示Juicer Compile Exception: Unexpected token ,”，不會因為錯誤導致后續js無法執行

實現原理

1. 對模版引擎進行語法分析
2. 分析后生成原生的javascript代碼字符串
3. 將生成的代碼轉化成可重用的function

使用方法

2. 編譯模版並根據所給的數據立即渲染出結果

juicer(tpl, data);

3. 僅編譯模版，暫不渲染

var compiled_tpl = juicer(tpl);

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

var compiled_tpl = juicer(tpl);

var html = compiled_tpl.render(data);
5.自定義模板語法邊界符，下邊是 Juicer 默認的邊界符。你可以借此解決 Juicer 模板語法同某些后端語言模板語法沖突的情況.

juicer.set({
    'tag::operationOpen': '{@',
    'tag::operationClose': '}',
    'tag::interpolateOpen': '${',
    'tag::interpolateClose': '}',
    'tag::noneencodeOpen': '$${',
    'tag::noneencodeClose': '}',
    'tag::commentOpen': '{#',
    'tag::commentClose': '}'
});

---

語法

a. ${變量}

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

${name}
${name|function}
${name|function, arg1, arg2}

b. 內聯輔助函數 {@helper} ... {@/helper}

{@helper numberPlus}
    function(number) {
        return number + 1;
    }
{@/helper}

var tpl = 'Number: ${num|numberPlus}';

juicer(tpl, {
    num: 123
});

//輸出 Number: 124

c. 循環遍歷 {@each} ... {@/each}

如果你需要對數組進行循環遍歷的操作，就可以像這樣使用 each .

{@each list as item}
	${item.prop}
{@/each}

如果遍歷過程中想取得當前的索引值，也很方便.

{@each list as item, index}
	${item.prop}
	${index} //當前索引
{@/each}

d. 判斷 {@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}

e. 注釋 {# 注釋內容}

為了后續代碼的可維護性和可讀性，我們可以在模板中增加注釋.

{# 這里是注釋內容}