前端模板引擎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" : "电竞热点"
        }
    ];

我们可能会这样写：

    
新闻列表
    

这样写也实现了填充数据并生成静态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);

示例完整代码：

    
    
    
    
    



    
新闻列表
    

官方下载地址：http://handlebarsjs.com/
参考文章：https://www.cnblogs.com/yldf55/p/5147996.html

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。