關於Hogan.js
摘要：
最近在看一個原始碼的過程中發現了一個很簡潔強大的模板Hogan.js。這裡學習、實踐、記錄一下
Hogan的github地址為：https://github.com/twitter/hogan.js/
當然也可以直接引用cdn.bootcss.com上的資源
Hogan....
最近在看一個原始碼的過程中發現了一個很簡潔強大的模板Hogan.js。這裡學習、實踐、記錄一下
Hogan的github地址為：https://github.com/twitter/hogan.js/
當然也可以直接引用cdn.bootcss.com上的資源
Hogan.js 是 Mustache 模板引擎的另一套實現，增加了預編譯機制，使得模板字串可以在打包階段被預先處理成模板函式，這樣瀏覽器就不必再重複去編譯模板。
Hogan.js 同時提供了可以執行與_瀏覽器端，瀏覽器端負責用預編譯後的程式碼渲染頁面。
先看一個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/hogan.js/3.0.2/hogan.js"></script>
</head>
<body>
<div id="wrapper"></div>
<script>
var tab = {
data: {
"list":[
{"name":"lily", "age":18, "food":"蘋果"},
{"name":"lucy", "age":20, "food":"香蕉"}
]
},
init: function() {
this.onload()
},
onload: function() {
// 定義模板
var tpl =
'{{#list}}'+
'<div>我叫{{name}}, 今年{{age}}歲, 最愛吃{{food}}</div>'+
'{{/list}}'
var result = this.renderHtml(tpl, {list:this.data.list});
$('#wrapper').html(result)
},
renderHtml : function(tpl, data){
var template = Hogan.compile(tpl);
var result = template.render(data);
return result;
}
}
$(function() {
tab.init()
})
</script>
</body>
</html>
輸出結果：
我叫lily, 今年18歲, 最愛吃蘋果
我叫lucy, 今年20歲, 最愛吃香蕉
當然，tab中的程式碼還可以簡化為：
var tab = {
data: {
"list":[
{"name":"lily", "age":18, "food":"蘋果"},
{"name":"lucy", "age":20, "food":"香蕉"}
]
},
init: function() {
this.onload()
},
onload: function() {
// 定義模板
var tpl =
'{{#list}}'+
'<div>我叫{{name}}, 今年{{age}}歲, 最愛吃{{food}}</div>'+
'{{/list}}'
var result = Hogan.compile(tpl).render({list:this.data.list});
$('#wrapper').html(result)
},
}
1、{{name}}
<body>
<div id="wrapper"></div>
<script>
//渲染所需模板
var template = '<div>Hey! I am {{name}}!</div>';
//渲染所需資料
var data = {
name : 'Rosen'
};
// 模板的編譯、渲染
var result = Hogan.compile(template).render(data);
// 輸出結果
$('#wrapper').html(result);
//輸出：Hey! I am Rosen!
</script>
</body>
2、{{{name}}}
<body>
<div id="wrapper"></div>
<script>
//渲染所需模板
var template = '<div>Hey! I am {{{name}}}!</div>';
//渲染所需資料
var data = { name : '<span style="color:red">Rosen</span>' };
// 模板的編譯、渲染
var result = Hogan.compile(template).render(data);
// 輸出結果
$('#wrapper').html(result);
//輸出：Hey! I am Rosen!
</script>
</body>
3、{{#list}} {{/list}}
這個作用於迴圈，當然#標記還可以當做bool型的判斷。
<body>
<div id="wrapper1"></div>
<div id="wrapper2"></div>
<script>
//渲染所需模板
var template1 = '{{#list}} <span>{{name}}</span> {{/list}}';
var template2 = '{{#isRosen}}我就是Rosen啊！{{/isRosen}}';
//渲染所需資料
var data = {
list : [
{ name : 'Rosen' },
{ name : 'JIM' }
],
isRosen : true
};
// 模板的編譯、渲染
var result1 = Hogan.compile(template1).render(data);
var result2 = Hogan.compile(template2).render(data);
// 輸出結果
$('#wrapper1').html(result1);
$('#wrapper2').html(result2);
//輸出：
//Rosen JIM
//我就是Rosen啊！
</script>
</body>
4、{{^list}} {{/list}}
和上一個是相反的，就是非的邏輯。如果列表為空，或者非真值都會進這個分支，其中包括false，null，undefined，0什麼的。
未完……待續