說明：模板引擎主要針對于渲染DOM，取代了字符串拼接，用下面的代碼親測handlebars模板引擎比字符串拼接渲染DOM慢了20ms，

這里配置一個在線DEMO，簡單說明下handlebars.js的基本用法，需要根據獲取的數據去渲染，就會用到循環、判斷

1、each，循環、可以嵌套

2、if，判斷、可以嵌套

3、hepler，對于復雜的邏輯判斷沒法起作用，自己注冊一個helper參與判斷

handlebars.js官網

在線DEMO移動端

詳細可以看上面DEMO里的main.js

/* * @Author: wangjianfei * @Date: 2017-05-16 16:10:25 * @Last Modified by: wangjianfei * @Last Modified time: 2017-05-16 18:57:02 */'use strict'; // AJAX var xhrRequest=new XMLHttpRequest(); xhrRequest.open('GET','http://wjf444128852.github.io/json-datas/degula.json'); xhrRequest.onload=function(){if(xhrRequest.status>=200&&xhrRequest.status<400){var data=JSON.parse(xhrRequest.responseText);// 1 定義用戶列表var users=data.data.users;// 1.1 重新排列數據 sortData(users);// 2 判斷是否正在直播var isLiving=data.data.my;// console.log(data);}else{console.log('The server returned an error.');} } xhrRequest.onerror=function(){console.log('error!'); } xhrRequest.send();// 1 把人員按照積分從高到底排列 function sortData(lists){for(var n=1;n<lists.length;n ){for(var k=0;k<lists.length-1;k ){var max=lists[k].score;var nextCount=lists[k 1].score;if(nextCount>max){var preData=lists[k];lists[k]=lists[k 1];lists[k 1]=preData;}}}// 創建DOM，渲染data createHTML(lists); } //1.3.01 注冊一個Handlebars Helper：addOne,用來將索引 1，因為默認是從0開始的 Handlebars.registerHelper("addOne",function(index,options){return parseInt(index) 1; });// 1.3.06 注冊helper：compare，用來比較判斷不同的顯示內容 Handlebars.registerHelper("compare",function(temp,options){if(temp==1){//滿足條件執行return '<i class="promotion"></i>';}else if(temp==0){//不滿足執行{{else}}部分return '<i class="nothing"></i>';}else if(temp==-1){return '<i class="out"></i>';} });// 1.3 創建DOM函數 function createHTML(userData){console.log(userData);var usersList=['{{#each this}}','<li>',// 01 名詞'<b>',// 使用注冊的Helper'{{addOne @index}}','.</b>',// 02 頭像'<div class="main-img" data-direction={{stream_direction}} data-livekey={{live_key}} data-liveurl={{live_url}} data-nickname={{nickname}} data-pfid={{pfid}} data-liveid={{live_id}}>','<img src="{{headimg}}" alt="" />',// 根據live_id是否正在直播'{{#if live_id}}','<span></span>','{{/if}}','</div>',// 03 用戶名字'<span>','{{nickname}}','</span>',// 04 用戶積分'<b class="score">','{{score}}','</b>',// 05 用戶票數'<b class="ticket">','{{count}}','</b>',// 06 是否晉級、淘汰、敗部// 注冊'{{#compare promotion}}','{{/compare}}','</li>','{{/each}}'].join('');var usersHtml=Handlebars.compile(usersList)(userData);var containerBox=document.getElementById('users-one');// 追加到DOM樹上containerBox.innerHTML=usersHtml;// addEvent(); }//2 addEvent 綁定事件 function addEvent(){// var allUsers=document.getElementsByClassName('main-img');var allUsers=getDom('.main-img');// console.log(allUsers);for(var i=0,leng=allUsers.length;i<leng;i ){var lists=allUsers[i];lists.addEventListener("click",function(e){event.preventDefault();event.stopPropagation();// var pfid=this.getAttribute("data-pfid");var nickname=this.getAttribute('data-nickname');var liveid=this.getAttribute('data-liveid');var liveurl=this.getAttribute('data-liveurl');var livekey=this.getAttribute('data-livekey');var direction=this.getAttribute('data-direction');// console.log(liveid);// handlebars.js 默認把值為null去除了，即把為null的替換為：'',所以此時不能用!=null判斷了// if(liveid!=null){if(liveid){// 進入直播間// h5toRoom(pfid,nickname,liveid,liveurl,livekey,direction);alert("進入直播間");// 如果沒在直播，進入個人主頁 }else{// h5toHomepage(pfid,nickname);alert("進入個人主頁");}// console.log(this); });} }//3 getDom 獲取DOM function getDom(selector){return document.querySelectorAll(selector); }

?轉載請注明出處(謝謝)

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的关于模板引擎handlebars.js基本用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。