js数据绑定(模板引擎原理)

<div>
    <ul id="list">
        <li>11111111111</li>
        <li>22222222222</li>
        <li>33333333333</li>
    </ul>
</div>

我为ul中的每个li绑定了事件，鼠标移入变换背景色（为了演示代码，这里没有使用事件代理，如果使用事件代理，对于本例无效）

var data = ["aaa", "bbb", "ccc"];

var oUl = document.querySelector("#list");
var oLi = document.getElementsByTagName("li");

for(var i = 0; i < oLi.length; i++) {
    oLi[i].onmouseover = function(e) {

        e.target.style.backgroundColor = "pink";

    }
    oLi[i].onmouseout = function(e) {

        e.target.style.backgroundColor = "";

    }
}

（此例使用事件代理写法是这样，不过对于本案例无效，所以不使用这种方法）

oUl.onmouseover = function(e) {
    if(e.target.tagName == "LI") {
        e.target.style.backgroundColor = "pink";
    }
}
oUl.onmouseout = function(e) {
    if(e.target.tagName == "LI") {
        e.target.style.backgroundColor = "";
    }
}

1.动态插入节点(优点:不影响原有结构绑定的事件，缺点：触发dom重排，非常耗性能，不建议使用)

var data = ["aaa", "bbb", "ccc"];

var oUl = document.querySelector("#list");

for(var i = 0; i < data.length; i++) {
    var oLi = document.createElement("li");
    oLi.innerHTML = data[i];
    oUl.appendChild(oLi);
}

2.字符串拼接(优点:只触发一次dom重排，缺点：影响原有结构绑定的事件【注意此时假如你没有使用事件代理，而是使用循环为每个li添加事件，才会出现原有结构绑定的事件无效，否则，原有事件依然有效，这其实也体现了事件代理的一个优势，就是不关心子元素如何变化，只要父元素没有变化，事件依然有效】)

var str = "";
for(var i = 0; i < data.length; i++) {
    str += "<li>";
str += data[i];
str += "</li>"
}

oUl.innerHTML += str;

3.dom碎片(前两种方法的综合，既考虑性能，又不影响原有结构)

var frg = document.createDocumentFragment();

var str = "";
for(var i = 0; i < data.length; i++) {
    var oLi = document.createElement("li");
    oLi.innerHTML = data[i];
    frg.appendChild(oLi);
}

oUl.appendChild(frg);