javascript/jquery模板引擎——Handlebars初體驗

時間 2019-11-18

標籤 javascript jquery 模板引擎 handlebars 體驗欄目 JavaScript 简体版

原文原文鏈接

Handlebars.js下載地址：http://handlebarsjs.com/html

最近本身在建一個站，採用徹底的先後端分離的方式，如今正在作前端的部分。其中有項功能是須要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字符串，何況這只是一個極其簡單的例子，若是標籤之間的嵌套、屬性複雜的話，這種方式寫起來至關的麻煩，且標籤間沒有層次結構，可讀性和維護性極差。jquery

後來偶然在個地方瞭解到了模板引擎，今後這種工做一下簡便了許多！先看下用Handlebars完成上面的例子是如何操做的：ajax

 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代碼講起，核心代碼就這四句：json

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內容，打印出來就是：this

1             <div class = "person">
2                 <div>姓名：約翰莫里森</div>    
3                 <div>出生地：美國</div>
4                 <div>職業：摔跤手</div>
5             </div>

最後用jq將內容插入到頁面中： $('#person_info').html(result); spa

若是有多項數據須要展現，則須要用到{{#each this}} {{/each}}。語法相似標籤，因此要注意別漏了閉合標籤{{/each}}。 {{#each this}} ... {{/each}}中間的內容是模板。this 則是指傳入函數的數據data。用在實現上述例子的代碼以下：

 1 <body>
 2         <div id = "person_info">
 3             {{#each this}}
 4             <div class = "person">
 5                 <div>姓名：{{name}}</div>
 6                 <div>出生地：{{home}}</div>
 7                 <div>職業：{{job}}</div>
 8             </div>
 9             {{/each}}
10         </div>
11     </body>
12     
13     <script>
14         var data =[{
15             name:'約翰莫里森',
16             home:'美國',
17             job:'摔跤手'
18         },
19         {
20             name:'Faker',
21             home:'韓國',
22             job:'英雄聯盟職業選手'
23         }];
24         
25         var tmpl = $('#person_info').html();
26         var func = Handlebars.compile(tmpl);
27         var result = func(data);
28         $('#person_info').html(result);
29     </script>

若是對象間所包含的數據域有個別不一樣，則須要分支語句進行判斷即{{#if xxx}} {/if}}。用例以下：

 1 <body>
 2         <div id = "person_info">
 3             {{#each this}}
 4             <div class = "person">
 5                 <div>姓名：{{name}}</div>
 6                 <div>出生地：{{home}}</div>
 7                 <div>職業：{{job}}</div>
 8                 {{#if life}}
 9                 　　<div>生涯經歷：</div>
10                     <ul>
11                     {{#each life}}
12                         <li>{{this}}</li>
13                     {{/each}}
14                     </ul>
15                 {{/if}}
16             </div>
17             {{/each}}
18         </div>
19     </body>
20     
21     <script>
22         var data =[{
23             name:'約翰莫里森',
24             home:'美國',
25             job:'摔跤手'
26         },
27         {
28             name:'Faker',
29             home:'韓國',
30             job:'英雄聯盟職業選手',
31             life:['S3世界總冠軍','S4世界總冠軍','S5世界總冠軍']
32         }];
33         
34         var tmpl = $('#person_info').html();
35         console.log(tmpl);
36         var func = Handlebars.compile(tmpl);
37         var result = func(data);
38         $('#person_info').html(result);
39     </script>