Handlebars—前端引擎模版
博客说明
文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！
简介
Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样可以保证模板加载和运行的速度
官网
Handlebars官网地址
特点
优势
Handlebars使用起来方便简洁，可快速创建模板；
扩展性强，可根据自己的需要自定义Helpers，例如常见的类型转换、时间格式转换等；
视图与逻辑分离，解耦性强；
被广泛推广，轻量级、兼容性强；
劣势
代码不清晰，比较混乱，可读性差
拓展性不强，如果需要填充的内容数据类型不够直观、需要转换，这种写法转换起来比较麻烦
假设页面布局结构变动，那么逻辑代码维护起来麻烦
使用
使用CDN
<script type="text/javascript" src="//cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script>
案例
each block helper
可以使用内置的{{#each}}helper遍历列表块内容，用this来引用遍历的元素
<ul> {{#each name}} <li>{{this}}</li> {{/each}}</ul>
这里的this指的是数组里的每一项元素，和上面的Block很像，但原理是不一样的这里的name是数组，而内置的each就是为了遍历数组用的，更复杂的数据也同样适用。
if else block helper
{{#if}}就你使用JavaScript一样，你可以指定条件渲染DOM，如果它的参数返回false，undefined, null, “” 或者 [] (a “falsy” value), Handlebar将不会渲染DOM，如果存在{{#else}}则执行{{#else}}后面的渲染
{{#if list}}
<ul id="list">
{{#each list}}
<li>{{this}}</li>
{{/each}}</ul>
{{else}}
<p>{{error}}</p>
{{/if}}
这里{{#if}}判断是否存在list数组，如果存在则遍历list，如果不存在输出错误信息
unless block helper
{{#unless}}这个语法是反向的if语法也就是当判断的值为false时他会渲染DOM 例如：
{{#unless data}}
<ul id="list"> {{#each list}}
<li>{{this}}</li> {
{/each}}</ul> {{else}}
<p>{{error}}</p>
{{/unless}}
with block helper
{{#with}}一般情况下，Handlebars模板会在编译的阶段的时候进行context传递和赋值。使用with的方法，我们可以将context转移到数据的一个section里面（如果你的数据包含section）。 这个方法在操作复杂的template时候非常有用。
<div class="entry">
<h1>{{title}}</h1>
{{#with author}} <
h2>By {{firstName}} {{lastName}}</h2>
{{/with}}</div>
感谢
Handlebars
百度百科
以及勤劳的自己
