Handlebars 是 JavaScript 一個語義模板庫，通過對view和data的分離來快速構建Web模板。 handlebars是一款jquery插件，[ The?Write Less, Do More ]，是中小型快速建站的極好選擇。 ## **一. 為什么要使用模板引擎** 關于為什么要使用模板引擎, 就我現在的項目而言,我還停留在進行發送Ajax請求到后臺后,利用模板引擎拼接接受到的JSON字符串,展現到頁面的地步. 按照我老師的一句話表達:**不用重復制造輪子**. 對于為什么要使用模板引擎的解釋,我看過最好的回答來自知乎上[niko](https://link.jianshu.com?t=https://www.zhihu.com/question/21893022/answer/19647087)的回答: > 模板最本質的作用是**【變靜為動】**一切利用這方面的都是優勢，不利于的都是劣勢。要很好地實現【變靜為動】的目的，有這么幾點： > **1\. 可維護性（后期改起來方便）**； > **2\. 可擴展性（想要增加功能，增加需求方便）**； > **3.開發效率提高（程序邏輯組織更好，調試方便）**； > **4.看起來舒服（不容易寫錯）**； > 從以上四點，你仔細想想，前端模板是不是無論從哪方便優勢體現都不是一點兩點。其實最重要的一點就是：**【視圖（包括展示渲染邏輯）與程序邏輯的分離】**分離的好處太多了，更好改了，更好加東西了，調試也方便了，看起來也舒服了，應用優秀的開發模式更方便了（mvvc，mvc等）. ## **二. 選擇[Handlebars](https://link.jianshu.com?t=http://handlebarsjs.com./)的原因** ### **1\. 全球最受歡迎的模板引擎** Handlebars是全球使用率最高的模板引擎,所以當之無愧是全球最受歡迎的模板引擎.Handlebars在許多前端框架中都被引入,比如在MUI和AmazeUI等框架,都推薦使用Handlebars.以AmazeUI為例,AmazeUI的文檔中專門為Web組件提供了其Handlebars的編譯模板 ~~~ Amaze UI 提供的開發模板中，包含一個 widget.html 文件，里面展示了 Widget 在純瀏覽器環境中的使用。 要點如下： 1.引入 Handlebars 模板 handlebars.min.js； 2.引入 Amaze UI Widget helper amui.widget.helper.js； 3.根據需求編寫模板 <script type="text/x-handlebars-template" id="amz-tpl">{{>slider slider}}</script>； 4.傳入數據，編譯模板并插入頁面中。 $(function() { var $tpl = $('#amz-tpl'); var source = $tpl.text(); var template = Handlebars.compile(source); var data = {}; var html = template(data); $tpl.before(html); }); ~~~ ### **2\. 語法簡單** Handlebars的基本語法極其簡單,使用{{value}}將數據包裝起來即可,Handlebars會自動匹配響應的數值和對象.以下是一個最簡單的模板: ~~~ <div class="demo"> <h1>{{name}}</h1> <p>{{content}}</p> </div> ~~~ ## **三.如何使用Handlebars** ### **1\. 下載Handlebars** * **通過Handlebars官網下載:** [http://handlebarsjs.com./installation.html](https://link.jianshu.com?t=http://handlebarsjs.com./installation.html) * **通過npm下載:** `npm install --save handlebars` * **通過bower下載:** `bower install --save handlebars` * **通過Github下載:** [https://github.com/daaain/Handlebars.git](https://link.jianshu.com?t=https://github.com/daaain/Handlebars.git) * **通過CDN引入:**[https://cdnjs.com/libraries/handlebars.js](https://link.jianshu.com?t=https://cdnjs.com/libraries/handlebars.js) ### **2\. 引入Handlebars** 通過`<script>`標簽引入即可,和引入jQuery庫類似: ~~~ <script src="./js/handlebars-1.0.0.beta.6.js"></script> ~~~ ### **3\. 創建模板** * **步驟一**: 通過一個`<script>`將需要的模板包裹起來 * **步驟二**: 在`<script>`標簽中填入`type`和`id` * `type`類型可以是除`text/javascript`以外的任何MIME類型,但推薦使用`type="text/template"`,更加語義化 * `id`是在后面進行編譯的時候所使用,讓其編譯的代碼找到該模板. * **步驟三**: 在`<script>`標簽中插入我們需要的html代碼,根據后臺給我們的接口文檔,修改其需要動態獲取的內容 ~~~ <script type="text/template" id="myTemplate"> <div class="demo"> <h1>{{name}}</h1> <p>{{content}}</p> </div> </script> ~~~ ### **4\. 在JS代碼中編譯模板** ~~~ //用jQuery獲取模板 var tpl = $("#myTemplate").html(); //預編譯模板 var template = Handlebars.compile(tpl); //匹配json內容 var html = template(data); //輸入模板 $('#box').html(html); ~~~ 以上述代碼為例進行解釋: * **步驟一:** 獲取模板的內容放入到tpl中,這里`$("#myTemplate")`中填入的內容為你在上一步創建模板中所用的`id`. * 提醒: 這里我使用的`jQuery`的選擇器獲取,當然,你可以使用原生`javascript`的`DOM`選擇器獲取,例如:`docuemnt.getElementById('myTemplate')`和`document.querySelector('#myTemplate')` * **步驟二:** 使用`Handlebars.compile()`方法進行預編譯,該方法傳入的參數即為獲取到的模板 * **步驟三:** 使用`template()`方法進行編譯后得到拼接好的字符串,該方法傳入的參數即為上一步預編譯的模板. * **步驟四:** 將編譯好的字符串插入到你所希望插入到的`html`文檔中的位置,這里使用的是`jQuery`給我們提供的`html()`方法.同樣,你也可以使用原生的`innerHTML` ## **四.案例演示** 以下面的慢慢買網站為例,該項目中的手機列表,是通過Ajax動態獲取的,我們不可能在html文檔中寫入全部的手機列表代碼,這是不可能的.所以我們需要通過Handlebars來幫我們將后臺傳遞過來的數據動態的顯示到html文檔中.  慢慢賣的項目 ### **1\. 在HTML中引入:Handlebars,jQuery和本頁的Js代碼** ~~~ <script src="./lib/bootstrap/js/jquery-3.2.1.js"></script> //Handlebars <script src="./js/handlebars-1.0.0.beta.6.js"></script> //jQuery <script src="./js/product.js"></script> //本頁的Js代碼 ~~~ ### **2\. 創建模板** 在未插入模板的情況下,頁面顯示如下,現在我們來使用Handlebars讓數據動態的顯示在網頁上.  未使用Handlebars的頁面 ~~~ <!--定義模板 --> <script type="text/template" id="product-list-tepl"> {{#each result}} <li> <a href="#"> <div class="product-img"> {{{productImg}}} </div> <div class="product-text"> <h5> {{productName}} </h5> <p>{{productPrice}}</p> </div> <div class="other"> <span>{{productQuote}}</span> <span>{{productCom}}</span> </div> </a> </li> {{/each}} </script> ~~~ > 以上模板中的{{#}}為Handlebars的helper語法,可以實現Javascript中的邏輯和循環運算.更多使用方法可以參考: [http://www.ghostchina.com/introducing-the-handlebars-js-templating-engine/](https://link.jianshu.com?t=http://www.ghostchina.com/introducing-the-handlebars-js-templating-engine/) ### **3\. 在JS代碼中編譯模板** ~~~ //定義getList()函數來發送Ajax請求,傳遞的參數為后臺給的接口文檔中定義的參數 function getList(categoryId,pageid){ //調用jQuery的Ajax()方法來發送Ajax請求 $.ajax({ type:'get', url:'http://182.254.146.100:3000/api/getproductlist', data:{ pageid:pageid||1, categoryid:categoryId }, success:function(data){ //用zepto獲取模板 var tpl = $("#product-list-tepl").html(); //預編譯模板 var template = Handlebars.compile(tpl); //匹配json內容 var html = template(data); //插入模板,到ul中 $('.product-list ul').html(html); } }) } //入口函數 $(function(){ //獲取到查詢字符串的id var categoryId = Number(GetQueryString("categoryid")); //getQueryString()是獲取上一步傳遞過來的查詢字符串的方法 //調用定義的getList()獲取手機列表 getList(categoryId); }) //獲取上一步傳遞過來的查詢字符串的方法 function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; } ~~~ ### **4\. 插入模板后的頁面如下**  使用Handlebars后的頁面 通過上面的案例,我相信大家應該能夠明白模板引擎的強大,我們只需要在頁面中寫好一個手機列表的HTML代碼,即可動態獲取后臺傳遞過來的所有信息,從而在頁面中進行展示. > **注意**: 在實際開發中,我們通過Ajax發送請求時所需要傳遞的參數,和獲取到的JSON或其他格式的數據.皆是需要通過后臺給定的接口文檔為準. 作者：李棠輝 鏈接：https://www.jianshu.com/p/2ad73da601fc 來源：簡書 簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權并注明出處。