广州营销型网站建设团队,宣城做网站,wordpress admin_menu,安阳网站建设安阳说明#xff1a;模板引擎主要针对于渲染DOM#xff0c;取代了字符串拼接#xff0c;用下面的代码亲测handlebars模板引擎比字符串拼接渲染DOM慢了20ms#xff0c; 这里配置一个在线DEMO#xff0c;简单说明下handlebars.js的基本用法#xff0c;需要根据获取的数据去渲染…说明模板引擎主要针对于渲染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 xhrRequestnew XMLHttpRequest(); xhrRequest.open(GET,http://wjf444128852.github.io/json-datas/degula.json); xhrRequest.onloadfunction(){ if(xhrRequest.status200xhrRequest.status400){ var dataJSON.parse(xhrRequest.responseText); // 1 定义用户列表 var usersdata.data.users; // 1.1 重新排列数据 sortData(users); // 2 判断是否正在直播 var isLivingdata.data.my; // console.log(data); }else{ console.log(The server returned an error.); } } xhrRequest.onerrorfunction(){ console.log(error!); } xhrRequest.send(); // 1 把人員按照積分从高到底排列 function sortData(lists){ for(var n1;nlists.length;n ){ for(var k0;klists.length-1;k ){ var maxlists[k].score; var nextCountlists[k 1].score; if(nextCountmax){ var preDatalists[k]; lists[k]lists[k 1]; lists[k 1]preData; } } } // 创建DOM渲染data createHTML(lists); } //1.3.01 注册一个Handlebars HelperaddOne,用来将索引 1因为默认是从0开始的 Handlebars.registerHelper(addOne,function(index,options){ return parseInt(index) 1; }); // 1.3.06 注册helpercompare用来比较判断不同的显示内容 Handlebars.registerHelper(compare,function(temp,options){ if(temp1){ //满足条件执行 return i classpromotion/i; }else if(temp0){ //不满足执行{{else}}部分 return i classnothing/i; }else if(temp-1){ return i classout/i; } }); // 1.3 创建DOM函数 function createHTML(userData){ console.log(userData); var usersList[ {{#each this}}, li, // 01 名词 b, // 使用注册的Helper {{addOne index}}, ./b, // 02 头像 div classmain-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 classscore, {{score}}, /b, // 05 用户票数 b classticket, {{count}}, /b, // 06 是否晋级、淘汰、败部 // 注册 {{#compare promotion}}, {{/compare}}, /li, {{/each}} ].join(); var usersHtmlHandlebars.compile(usersList)(userData); var containerBoxdocument.getElementById(users-one); // 追加到DOM树上 containerBox.innerHTMLusersHtml; // addEvent(); } //2 addEvent 绑定事件 function addEvent(){ // var allUsersdocument.getElementsByClassName(main-img); var allUsersgetDom(.main-img); // console.log(allUsers); for(var i0,lengallUsers.length;ileng;i ){ var listsallUsers[i]; lists.addEventListener(click,function(e){ event.preventDefault(); event.stopPropagation(); // var pfidthis.getAttribute(data-pfid); var nicknamethis.getAttribute(data-nickname); var liveidthis.getAttribute(data-liveid); var liveurlthis.getAttribute(data-liveurl); var livekeythis.getAttribute(data-livekey); var directionthis.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