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数据绑定(模板引擎原理)的主要内容,如果未能解决你的问题,请参考以下文章

Epii.js 一个极其简单的Js模板引擎

百度JS模板引擎

数据双向绑定

AWTK javascript绑定原理

模板引擎原理及underscore.js使用

template.js 数据渲染引擎