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

binbinsilk發表於2018-07-29
前端

一. 為什麼要使用模板引擎

關於為什麼要使用模板引擎, 就現在的專案而言,還停留在進行傳送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

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的頁面
未使用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後的頁面
使用Handlebars後的頁面

通過上面的案例,我相信大家應該能夠明白模板引擎的強大,我們只需要在頁面中寫好一個手機列表的HTML程式碼,即可動態獲取後臺傳遞過來的所有資訊,從而在頁面中進行展示.

注意: 在實際開發中,我們通過Ajax傳送請求時所需要傳遞的引數,和獲取到的JSON或其他格式的資料.皆是需要通過後臺給定的介面文件為準.



相關文章