前端模板引擎Handlebars理解與舉例

一. 爲何要使用模板引擎

關於爲何要使用模板引擎, 就如今的項目而言,還停留在進行發送Ajax請求到後臺後,利用模板引擎拼接接受到的JSON字符串,展示到頁面的地步. 按照一句話表達:不用重複製造輪子. 對於爲何要使用模板引擎的解釋,我看過最好的回答來自知乎上回答:

模板最本質的做用是【變靜爲動】一切利用這方面的都是優點，不利於的都是劣勢。要很好地實現【變靜爲動】的目的，有這麼幾點：
1. 可維護性（後期改起來方便）；
2. 可擴展性（想要增長功能，增長需求方便）；
3.開發效率提升（程序邏輯組織更好，調試方便）；
4.看起來舒服（不容易寫錯）；
從以上四點，你仔細想一想，前端模板是否是不管從哪方便優點體現都不是一點兩點。其實最重要的一點就是：【視圖（包括展現渲染邏輯）與程序邏輯的分離】分離的好處太多了，更好改了，更好加東西了，調試也方便了，看起來也舒服了，應用優秀的開發模式更方便了（mvvc，mvc等）.

二. 選擇Handlebars的緣由

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官網下載: handlebarsjs.com./installatio…
• 經過npm下載: npm install --save handlebars
• 經過bower下載: bower install --save handlebars
• 經過Github下載: github.com/daaain/Hand…
• 經過CDN引入:cdnjs.com/libraries/h…

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中的邏輯和循環運算.更多使用方法能夠參考: www.ghostchina.com/introducing…

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或其餘格式的數據.皆是須要經過後臺給定的接口文檔爲準.