javascript-jquery模板引擎——Handlebars初体验

本文由我司收集整编，推荐下载，如有疑问，请与我司联系
javascript/jquery 模板引擎——Handlebars 初体验
2017/07/30 2850 Handlebars.js 下载地址：handlebarsjs/
最近自己在建一个站，采用完全的前后端分离的方式，现在正在做前端的部
分。

其中有项功能是需要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;15 /style 16 /head 18 body 19 div class = “person”id=“person_info” 20 /div 21 /body 23 script 24 var data = { 25 name:’约翰莫里森’, 26 home:’美国’, 27 job:’摔跤手’28 }; 29 30 var str = ““; 31 str += “ div 姓名：” + + “ /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;16 /style 17 /head 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 29 script 30 var data ={ 31 name:’约翰莫里森’, 32 home:’美国’, 33 job:’摔跤手’34 }; 35 36 var tmpl = $(‘#person_info’).html();38 var func
= Handlebarspile(tmpl);40 var result = func(data);42 $(‘#person_info’).html(result);43。