Wu Yudong's Blog

最近在看一个源码的过程中发现了一个很简洁强大的模板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什么的。

<div id="wrapper"></div>
<script>
//渲染所需模板
var template = '{{^isRosen}}谁是Rosen？ 不认识！{{/isRosen}}';

//渲染所需数据

var data = {
	list : [ 
		{ name : 'Rosen' }, 
		{ name : 'JIM' } 
	],
	isRosen : false
};

// 模板的编译、渲染
var result = Hogan.compile(template).render(data);

// 输出结果 
$('#wrapper').html(result);

//输出：
//谁是Rosen？ 不认识！
</script>

5、{{.}}

代表枚举类型里的当前元素，枚举类型没有索引名，只能用{{.}}

<div id="wrapper"></div>
<script>
//渲染所需模板
var template = '{{#list}}<span>{{.}}</span>{{/list}}';

//渲染所需数据

var data = {
	list : ['Wu', 'He']
};

// 模板的编译、渲染
var result = Hogan.compile(template).render(data);

// 输出结果 
$('#wrapper').html(result);

//输出：
//<span>Wu</span><span>He</span>

</script>

6、{{!}}

表示注释

简单的总结一下：

{{data}} 转义的变量

{{{data}}} 不转义的变量

{{#list}} {{/list}} 列表循环 / 真值判断

{{^list}} {{/list}} 空列表 / 非真值判断

{{.}} 枚举的当前元素

{{!}} 我是注释

关于Hogan.js

Comments