Handlebars学习记录

学习缘由

Handlebars模板引擎从去年就关注了，因为使用类HTML格式/类Vue/类Angular的语法我比较习惯，所以就定在了学习计划中。目前公司后台渲染项目都是使用Handlebars模板引擎，所以这篇博文简单做下学习记录。

模板引擎是做什么的

模板引擎所做的工作简单的说就是：

输入模板字符串 + 数据 => 得到渲染过的字符串。

需要重申的是，得到的是经过数据填充的静态字符串。此外，根据页面的结构再拼接其余部分HTML片段，最后在发送到客户端。因此，在需要SEO场景条件下比较合适，比如：社交、新闻、博客、站点导航等网站是必须使用的。

此外，模板引擎除了Handlebarsjs还有：Jade templating、Underscore Templates、Mustache等。除非现有的各类模板引擎不适合自己的业务，建议在选择开源项目的时候还是选择口碑好一些、目前还在维护的项目。

Basic Usage

一、JS模板编译

可以将模板字符串写在*.hbs中，也可以是在') // 转化为 // 在html中显示字符串

如果上面具有攻击性的字符串未转义，将在浏览器中弹出alert对话框。

new Handlebars.SafeString(string)

标记内容是安全的，单独使用并不起什么作用：

new hbs.SafeString('')
// 返回
SafeString { string: '' }

需要和上面的escapeExpression组合使用：

Handlebars.registerHelper('link', function(text, url) {
  text = Handlebars.Utils.escapeExpression(text);
  url  = Handlebars.Utils.escapeExpression(url);

  var result = '' + text + '';

  return new Handlebars.SafeString(result);
});

模板渲染过程

在Express中默认使用的``hbs```模块渲染Handlerbars模板，渲染过程是这样子的：

查找路由对应的模板，进行编译，并将编译的结果保存为 A
查找layout.hbs，如果
- 存在：对layout.hbs进行编译，其中{{{body}}}标签替换成 A，并返回最终编译结果B
- 不存在：返回A

知识图谱

Handlerbars结构.png

使用建议

前端使用了自定义的Helper/Partial需要和后端同步，不要忘记。
如果是静态内容为主，那就直接服务端渲染好了，首屏加载速度快，不建议使用复杂的Helper/Partial，View层专注展示即可，数据格式在填充模板前处理好。非主要部分使用异步加载，比如的投稿管理/评论/推荐阅读使用的是Vue做异步内容渲染的。
如果是数据交互、动态的应用界面(比如中后台系统、查询系统)，那就不应该用拼模板的思路去做，而是用做应用的架构（MV*、组件树、组件/模块、数据驱动视图）思路去做。

参考

Handlebarsjs官网
有哪些好用的前端模板引擎？