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

作者: 菜菜___ | 来源:发表于2018-12-22 15:33 被阅读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后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。

网友评论

本文标题：前端模板引擎Handlebars的使用总结（一）

本文链接：https://www.haomeiwen.com/subject/skyikqtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

程序员

前端笔记

让前端飞