前端模板引擎Handlebars的使用总结（一）
2018-12-22 本文已影响4人
菜菜___
模板引擎，就是在定义好的模板上面填充与其对应的数据生成静态的html页面，即：
模板 + 数据 =====> html页面
模板引擎的作用是抽象公共页面来重用，并且达到【视图（包括展示渲染逻辑）与程序逻辑的分离】（mvvc，mvc等开发模式思想）
目前用过的类似模板引擎有JSP、freemarker，这两种都属于java范畴的，服务端解析。而作为前端的模板引擎，Handlebars脱颖而出，为前后端分离提供了方案。Handlebars是JavaScript 的一个语义模板库，通过对view和data的分离来快速构建Web模板。它在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样可以保证模板加载和运行的速度。
在了解模板引擎前，在加载一个新闻列表时，如下：
效果演示
假设这个列表需要填充的数据是以下json数组：
var JSON_DATA = [
{
"title" : "德国iPhone禁售令的最新相关信息",
"date" : "2018-12-21",
"tag" : "今日热点"
},
{
"title" : "RNG战胜EDG的最新相关信息RNG战胜EDG是怎么回事",
"date" : "2018-12-20",
"tag" : "电竞热点"
},
{
"title" : "德国iPhone禁售令的最新相关信息",
"date" : "2018-12-21",
"tag" : "今日热点"
},
{
"title" : "RNG战胜EDG的最新相关信息RNG战胜EDG是怎么回事",
"date" : "2018-12-20",
"tag" : "电竞热点"
}
];
我们可能会这样写：
<div class="news-list">
<h4>新闻列表</h4>
<ul id="newsList"></ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
var html = "";
for(var i in JSON_DATA){
html += '<li class="flex"><div class="left"><span></span></div><div class="right">';
html += '<h4>'+JSON_DATA[i].title+'</h4><div class="flex"><span>'+JSON_DATA[i].tag+'</span><span>'+JSON_DATA[i].date+'</span>';
html += '</div></div></li>';
}
$("#newsList").html(html);
</script>
这样写也实现了填充数据并生成静态html，但是缺点也很明显；
1.代码不清晰，比较混乱，可读性差
2.拓展性不强，如果需要填充的内容数据类型不够直观、需要转换，这种写法转换起来比较麻烦
3.假设页面布局结构变动，那么逻辑代码维护起来麻烦
与之对比起来，Handlebars的优点就显而易见了
1：Handlebars使用起来方便简洁，可快速创建模板；
2：扩展性强，可根据自己的需要自定义Helpers，例如常见的类型转换、时间格式转换等；
3：视图与逻辑分离，解耦性强；
4：被广泛推广，轻量级、兼容性强；
下面使用Handlebars来完成上面示例数据的填充：
1.在页面中引入Handlebars资源
<script type="text/javascript" src="//cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script>
2.使用<script>标签创建模板，id命名是为了后面进行编译的时候找到该模板。{{value}}嵌入变量，示例中使用了json数组的title、tag、date字段，实际情况根据自己所需要的字段填充
<script type="text/template" id="newsListTemplate">
<!--each遍历json数组-->
{{#each this}}
<li class="flex">
<div class="left">
<span></span>
</div>
<div class="right">
<h4>{{title}}</h4>
<div class="flex">
<span>{{tag}}</span>
<span>{{date}}</span>
</div>
</div>
</li>
{{/each}}
</script>
3.使用Handlebars.compile编译模板
//通过模板定义的id获取模板
var tpl = $("#newsListTemplate").html();
//预编译模板
var template = Handlebars.compile(tpl);
//传入需要填充的数据匹配
var html = template(JSON_DATA);
//插入模板到ul中
$("#newsList").html(html);
示例完整代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>Handlebar新闻列表示例</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.news-list > h4 {
padding: .3rem .2rem;
font-size: .32rem;
border-bottom: 1px solid #d2d2d2;
}
.news-list ul li{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin-left: .2rem;
padding: .45rem .3rem .45rem 0;
border-bottom: 1px solid #d2d2d2;
font-size: .3rem;
color: #4e4e4e;
}
.news-list ul li .left{
margin-right: .4rem;
}
.news-list ul li .left span{
display: block;
width: 1.8rem;
height: 1.2rem;
background-color: #d2d2d2;
}
.news-list ul li .right{
width: 100%;
}
.news-list ul li .right h4{
font-weight: normal;
margin-top: -.1rem;
margin-bottom: .12rem;
}
.news-list ul li .right div{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
}
.news-list ul li .right div span{
display: inline-block;
font-size: .24rem;
}
.news-list ul li .right div span:first-of-type{
padding: .02rem .04rem;
background-color: #4a6efc;
color: #fff;
}
</style>
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '85px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</head>
<body>
<div class="news-list">
<h4>新闻列表</h4>
<ul id="newsList"></ul>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script>
<script type="text/template" id="newsListTemplate">
<!--each遍历json数组-->
{{#each this}}
<li class="flex">
<div class="left">
<span></span>
</div>
<div class="right">
<h4>{{title}}</h4>
<div class="flex">
<span>{{tag}}</span>
<span>{{date}}</span>
</div>
</div>
</li>
{{/each}}
</script>
<script>
var JSON_DATA =
[
{
"title" : "德国iPhone禁售令的最新相关信息",
"date" : "2018-12-21",
"tag" : "今日热点"
},
{
"title" : "RNG战胜EDG的最新相关信息RNG战胜EDG是怎么回事",
"date" : "2018-12-20",
"tag" : "电竞热点"
},
{
"title" : "德国iPhone禁售令的最新相关信息",
"date" : "2018-12-21",
"tag" : "今日热点"
},
{
"title" : "RNG战胜EDG的最新相关信息RNG战胜EDG是怎么回事",
"date" : "2018-12-20",
"tag" : "电竞热点"
}
]
;
//通过模板定义的id获取模板
var tpl = $("#newsListTemplate").html();
//预编译模板
var template = Handlebars.compile(tpl);
//传入需要填充的数据匹配
var html = template(JSON_DATA);
//插入模板到ul中
$("#newsList").html(html);
</script>
</body>
</html>
官方下载地址：http://handlebarsjs.com/
参考文章：https://www.cnblogs.com/yldf55/p/5147996.html
原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。
