关于模板引擎handlebars.js基本用法

说明：模板引擎主要针对于渲染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);
}