java handlebars_前端模板引擎Handlebars的使用总结（一）

模板引擎，就是在定义好的模板上面填充与其对应的数据生成静态的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" : "电竞热点"

}

];

我们可能会这样写：

新闻列表

var html = "";

for(var i in JSON_DATA){

html += '

'+JSON_DATA[i].title+'

'+JSON_DATA[i].tag+''+JSON_DATA[i].date+'';

html += '

}

$("#newsList").html(html);

这样写也实现了填充数据并生成静态html，但是缺点也很明显；

1.代码不清晰，比较混乱，可读性差

2.拓展性不强，如果需要填充的内容数据类型不够直观、需要转换，这种写法转换起来比较麻烦

3.假设页面布局结构变动，那么逻辑代码维护起来麻烦

与之对比起来，Handlebars的优点就显而易见了

1：Handlebars使用起来方便简洁，可快速创建模板；

2：扩展性强，可根据自己的需要自定义Helpers，例如常见的类型转换、时间格式转换等；

3：视图与逻辑分离，解耦性强；

4：被广泛推广，轻量级、兼容性强；

下面使用Handlebars来完成上面示例数据的填充：

1.在页面中引入Handlebars资源

2.使用

3.使用Handlebars.compile编译模板

//通过模板定义的id获取模板

var tpl = $("#newsListTemplate").html();

//预编译模板

var template = Handlebars.compile(tpl);

//传入需要填充的数据匹配

var html = template(JSON_DATA);

//插入模板到ul中

$("#newsList").html(html);

示例完整代码：

Handlebar新闻列表示例

* {

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;

}

(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);

新闻列表

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);

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe

95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。

欢迎留言交流。