js数据绑定(模板引擎原理)
Posted CSS is awesome
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js数据绑定(模板引擎原理)相关的知识,希望对你有一定的参考价值。
1 <div> 2 <ul id="list"> 3 <li>11111111111</li> 4 <li>22222222222</li> 5 <li>33333333333</li> 6 </ul> 7 </div>
我为ul中的每个li绑定了事件,鼠标移入变换背景色(为了演示代码,这里没有使用事件代理,如果使用事件代理,对于本例无效)
1 var data = ["aaa", "bbb", "ccc"]; 2 3 var oUl = document.querySelector("#list"); 4 var oLi = document.getElementsByTagName("li"); 5 6 for(var i = 0; i < oLi.length; i++) { 7 oLi[i].onmouseover = function(e) { 8 9 e.target.style.backgroundColor = "pink"; 10 11 } 12 oLi[i].onmouseout = function(e) { 13 14 e.target.style.backgroundColor = ""; 15 16 } 17 }
(此例使用事件代理写法是这样,不过对于本案例无效,所以不使用这种方法)
1 oUl.onmouseover = function(e) { 2 if(e.target.tagName == "LI") { 3 e.target.style.backgroundColor = "pink"; 4 } 5 } 6 oUl.onmouseout = function(e) { 7 if(e.target.tagName == "LI") { 8 e.target.style.backgroundColor = ""; 9 } 10 }
1.动态插入节点(优点:不影响原有结构绑定的事件,缺点:触发dom重排,非常耗性能,不建议使用)
1 var data = ["aaa", "bbb", "ccc"]; 2 3 var oUl = document.querySelector("#list"); 4 5 for(var i = 0; i < data.length; i++) { 6 var oLi = document.createElement("li"); 7 oLi.innerhtml = data[i]; 8 oUl.appendChild(oLi); 9 }
2.字符串拼接(优点:只触发一次dom重排,缺点:影响原有结构绑定的事件【注意此时假如你没有使用事件代理,而是使用循环为每个li添加事件,才会出现原有结构绑定的事件无效,否则,原有事件依然有效,这其实也体现了事件代理的一个优势,就是不关心子元素如何变化,只要父元素没有变化,事件依然有效】)
1 var str = ""; 2 for(var i = 0; i < data.length; i++) { 3 str += "<li>"; 4 str += data[i]; 5 str += "</li>" 6 } 7 8 oUl.innerHTML += str;
3.dom碎片(前两种方法的综合,既考虑性能,又不影响原有结构)
1 var frg = document.createDocumentFragment(); 2 3 var str = ""; 4 for(var i = 0; i < data.length; i++) { 5 var oLi = document.createElement("li"); 6 oLi.innerHTML = data[i]; 7 frg.appendChild(oLi); 8 } 9 10 oUl.appendChild(frg);
以上是关于js数据绑定(模板引擎原理)的主要内容,如果未能解决你的问题,请参考以下文章