關於爲何要使用模板引擎, 就如今的項目而言,還停留在進行發送Ajax請求到後臺後,利用模板引擎拼接接受到的JSON字符串,展示到頁面的地步. 按照一句話表達:不用重複製造輪子. 對於爲何要使用模板引擎的解釋,我看過最好的回答來自知乎上回答:javascript
模板最本質的做用是【變靜爲動】一切利用這方面的都是優點,不利於的都是劣勢。要很好地實現【變靜爲動】的目的,有這麼幾點:
1. 可維護性(後期改起來方便);
2. 可擴展性(想要增長功能,增長需求方便);
3.開發效率提升(程序邏輯組織更好,調試方便);
4.看起來舒服(不容易寫錯);
從以上四點,你仔細想一想,前端模板是否是不管從哪方便優點體現都不是一點兩點。其實最重要的一點就是:【視圖(包括展現渲染邏輯)與程序邏輯的分離】分離的好處太多了,更好改了,更好加東西了,調試也方便了,看起來也舒服了,應用優秀的開發模式更方便了(mvvc,mvc等).php
Handlebars是全球使用率最高的模板引擎,因此當之無愧是全球最受歡迎的模板引擎.Handlebars在許多前端框架中都被引入,好比在MUI和AmazeUI等框架,都推薦使用Handlebars.以AmazeUI爲例,AmazeUI的文檔中專門爲Web組件提供了其Handlebars的編譯模板html
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);
});
複製代碼
Handlebars的基本語法極其簡單,使用{{value}}將數據包裝起來便可,Handlebars會自動匹配響應的數值和對象.如下是一個最簡單的模板:前端
<div class="demo">
<h1>{{name}}</h1>
<p>{{content}}</p>
</div>
複製代碼
npm install --save handlebars
bower install --save handlebars
經過<script>
標籤引入便可,和引入jQuery庫相似:java
<script src="./js/handlebars-1.0.0.beta.6.js"></script>
複製代碼
<script>
將須要的模板包裹起來<script>
標籤中填入type
和id
type
類型能夠是除text/javascript
之外的任何MIME類型,但推薦使用type="text/template"
,更加語義化id
是在後面進行編譯的時候所使用,讓其編譯的代碼找到該模板.<script>
標籤中插入咱們須要的html代碼,根據後臺給咱們的接口文檔,修改其須要動態獲取的內容<script type="text/template" id="myTemplate"></script>
複製代碼
//用jQuery獲取模板
var tpl = $("#myTemplate").html();
//預編譯模板
var template = Handlebars.compile(tpl);
//匹配json內容
var html = template(data);
//輸入模板
$('#box').html(html);
複製代碼
以上述代碼爲例進行解釋:jquery
$("#myTemplate")
中填入的內容爲你在上一步建立模板中所用的id
.
jQuery
的選擇器獲取,固然,你可使用原生javascript
的DOM
選擇器獲取,例如:docuemnt.getElementById('myTemplate')
和document.querySelector('#myTemplate')
Handlebars.compile()
方法進行預編譯,該方法傳入的參數即爲獲取到的模板template()
方法進行編譯後獲得拼接好的字符串,該方法傳入的參數即爲上一步預編譯的模板.html
文檔中的位置,這裏使用的是jQuery
給咱們提供的html()
方法.一樣,你也可使用原生的innerHTML
如下面的慢慢買網站爲例,該項目中的手機列表,是經過Ajax動態獲取的,咱們不可能在html文檔中寫入所有的手機列表代碼,這是不可能的.因此咱們須要經過Handlebars來幫咱們將後臺傳遞過來的數據動態的顯示到html文檔中.git
<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代碼
複製代碼
在未插入模板的狀況下,頁面顯示以下,如今咱們來使用Handlebars讓數據動態的顯示在網頁上.github
<!--定義模板 -->
<script type="text/template" id="product-list-tepl"></script>
複製代碼
以上模板中的{{#}}爲Handlebars的helper語法,能夠實現Javascript中的邏輯和循環運算.更多使用方法能夠參考: www.ghostchina.com/introducing…ajax
//定義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;
}
複製代碼
經過上面的案例,我相信你們應該可以明白模板引擎的強大,咱們只須要在頁面中寫好一個手機列表的HTML代碼,便可動態獲取後臺傳遞過來的全部信息,從而在頁面中進行展現.npm
注意: 在實際開發中,咱們經過Ajax發送請求時所須要傳遞的參數,和獲取到的JSON或其餘格式的數據.皆是須要經過後臺給定的接口文檔爲準.