handlebars模板引擎使用初探1

谈到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树结构。