handlebars的快速入门

文章转载自：https://www.jianshu.com/p/b697eff0f3e9

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

示例完整代码：

    
    
    
    
    



    
新闻列表