谈到handlebars，我们不禁产生疑问，为什么要使用这样的一个工具呢？它究竟能为我们带来什么样的好处？如何使用它呢？
一、handlebars可以干什么？
首先，我们来看一个案例：
有这样的html结构：
<div class="demo">
<h1>name</h1>
<p>content</p>
</div>
这个结构会在html文件中反复使用，并且每次h1和p标签的内容都不同。
一种常见的做法是：
每次都写一遍该结构。
这样难免显得过于繁琐！
我们是否可以将html结构提取出来，每次传入不同的值来达到目的呢？
当然可以，这便是handlebars模板引擎的最简单的应用。
二、handlebars环境配置
要使用handlebars，首先是要引入handlebars。
例如，我们要在index.html文件中使用handlebars，可以通过cdn用script标签引入：
<script src="https://cdn.bootcss.com/handlebars.js/4.0.11/handlebars.min.js"></script>
也可以下载handlebars，然后用script标签引入，如：
<script type="text/javascript" src="./handlebars.js"></script>
三、模板、expressions
handlebars声称模板引擎，显然它的使用离不开模板。就像下面这样：
<script type="text/x-handlebars-template" id="tpl">
<div class="demo">
<h1>{{name}}</h1>
<p>{{content}}</p>
</div>
</script>
首先我们使用了一个script标签，并将type属性设置为"text/x-handlebars-template"，这表明我们声明了一个handlebars模板，这个模板的id为"tpl"。
你可能不知道{{name}}和{{content}}的意思，这是handlebars的expressions，形如{{value}}。handlebars模板会自动匹配{{value}}，并将其替换为value的值，value可以是对象甚至是函数。你可能产生疑问：这里，模板中的name和content从何而来呢？
的确，在使用handlebars模板的时候，需要为模板传入name和content的值，后文我们再详述。
我们已经发现，handlebars模板是一个script标签，我们如何将其插入HTML中呢？
四、编译、渲染
为了将handlebars模板插入HTML，我们在index.html的body标签中输入如下代码：
（为了简化操作，我们在以下代码之前先引入了jquery。）
<script type="text/javascript">
var obj={name:'lsz',content:'handlebars is good!'};//定义一个对象用于存放需要插入模板的数据
var t=$('#tpl').html();//获取到handlebars模板，并将其中的html代码转换成html字符串，t是字符串
console.log(t);
var f=Handlebars.compile(t);//使用handlebars对转换后的html字符串进行编译，f是函数
console.log(f);
var h=f(obj);//将obj作为参数传入f函数，实现将数据插入模板之中，h是html字符串
console.log(h);
$('body').html(h);//将插入数据后的html字符串转换为dom元素，插入到body元素中，
</script>
由此我们总结出使用handlebars模板的步骤：
1、通过dom操作获取handlebars模板；
2、对handlebars模板进行编译，得到函数；
3、给函数传入参数并运行；
4、将函数返回值插入dom。
我们可以封装一个函数专门用于渲染：（也是在安装了jquery的情况下）
function renderTemplate(templateSelector,data,htmlSelector) {
var t=$(templateSelector).html();
var f=Handlebars.compile(t);
var h=f(data);
$(htmlSelector).html(h);
}
前面我们已经谈到函数的参数传值是按值传递，对于以上的函数，我们可能产生疑问：
templateSelector、htmlSelector仅仅得到传入字符串的副本，data得到的是传入对象的内存地址的副本，是否真能影响dom树结构呢？
答案是显然的，这是因为：
虽然templateSelector、htmlSelector的确得到字符串副本，但实际起作用的是函数内部的jquery语句，jquery语句通过templateSelector、htmlSelector的值获取了dom元素，故而会影响dom树结构。