javascript/jquery模板引擎——Handlebars初体验
Posted 谜原
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript/jquery模板引擎——Handlebars初体验相关的知识，希望对你有一定的参考价值。
最近自己在建一个站，采用完全的前后端分离的方式，现在正在做前端的部分。其中有项功能是需要ajax调用后端接口，返回json数据后要动态的插入数据。但是一开始我自己是用最"传统"的通过js拼接html字符串，然后再用jq插入到页面中。比如说下面的这个例子，我要显示一个个人信息卡：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Index</title>
6 <script src="js/jquery.js"></script>
7 <style>
8 .person {
9 font-size:40px;
10 float:left;
11 padding:20px;
12 margin:30px;
13 background-color:pink;
14 }
15 </style>
16 </head>
17
18 <body>
19 <div class = "person" id="person_info">
20 </div>
21 </body>
22
23 <script>
24 var data = {
25 name:‘约翰莫里森‘,
26 home:‘美国‘,
27 job:‘摔跤手‘
28 };
29
30 var str = "";
31 str += "<div>姓名：" + data.name + "</div>";
32 str += "<div>出生地：" + data.home + "</div>";
33 str += "<div>职业：" + data.job + "</div>";
34
35 $(‘#person_info‘).html(str);
36 </script>
37 </html>
这里我得用自己"手动"拼接html字符串，况且这只是一个极其简单的例子，如果标签之间的嵌套、属性复杂的话，这种方式写起来相当的麻烦，且标签间没有层次结构，可读性和维护性极差。
后来偶然在个地方了解到了模板引擎，从此这种工作一下简便了许多！ 先看下用Handlebars完成上面的例子是如何操作的：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Handlebars</title>
6 <script src="js/jquery.js"></script>
7 <script src="js/handlebars.js"></script>
8 <style>
9 .person {
10 font-size:40px;
11 float:left;
12 padding:10px;
13 margin-left:30px;
14 background-color:pink;
15 }
16 </style>
17 </head>
18
19 <body>
20 <div id = "person_info">
21 <div class = "person">
22 <div>姓名：{{name}}</div>
23 <div>出生地：{{home}}</div>
24 <div>职业：{{job}}</div>
25 </div>
26 </div>
27 </body>
28
29 <script>
30 var data ={
31 name:‘约翰莫里森‘,
32 home:‘美国‘,
33 job:‘摔跤手‘
34 };
35
36 var tmpl = $(‘#person_info‘).html();
37
38 var func = Handlebars.compile(tmpl);
39
40 var result = func(data);
41
42 $(‘#person_info‘).html(result);
43 </script>
44
45 </html>
先从最下面的js代码讲起，核心代码就这四句：
1 var tmpl = $(‘#person_info‘).html();
2 var func = Handlebars.compile(tmpl);
3 var result = func(data);
4 $(‘#person_info‘).html(result);
第一行的 var tmpl = $(‘#person_info‘).html(); 就只是基本的jq语法；<body>中<div id="person_info">块中的就是html模板，这里取得了该div块下的html模板内容(对象tmpl)。此时如果用console.log(tmpl)打印该对象的话，得到的内容是
1 <div class = "person">
2 <div>姓名：{{name}}</div>
3 <div>出生地：{{home}}</div>
4 <div>职业：{{job}}</div>
5 </div>
用两个大括号括起来的变量名会在后面 向函数传入数据(下面会提到) 时进行匹配。
第二行 var func = Handlebars.compile(tmpl); 通过Handlebars的compile()对刚刚取得的html模板进行预编译，返回的是一个函数(现在对象func即为该函数)。
var result = func(data); 这个函数带有一个参数，该参数为用以匹配模板用的数据。我这里事先写死一个数据对象data，然后传入该函数内。返回值是匹配好的html内容，打印出来就是 ：
1 <div class = "person">
2 <div>姓名：约翰莫里森</div>
3 <div>出生地：美国</div>
4 <div>职业：摔跤手</div>
5 </div>
最后用jq将内容插入到页面中： $(‘#person_info‘).html(result);
以上是关于javascript/jquery模板引擎——Handlebars初体验的主要内容，如果未能解决你的问题，请参考以下文章
表达式引擎中saef的Javascript（jQuery）标记