数据绑定

数据绑定的操作

做前端就免不了与后台的交互，当我们获取到了从后台传输过来的数据后怎么操作它呢，在介绍方法之前先了解两个名词：

DOM的回流（重排 reflow）:当页面中的html结构发生改变（增加。删除元素，位置发生改变....），浏览器都需要从新计算一遍最新的DOM结构，重新对当前页面进行渲染。尽量减少回流也是一种优化方式

DOM的重绘：某一个元素的部分样式发生改变了（背景颜色...），浏览器只需要重新渲染当前元素即可。

下面介绍三种方法：比如我们获取到的数据是下面的json格式的：
var json = [
    {"name":"zhangsan"},
    {"name":"lisi"}
]

第一种：通过创建元素的方式动态绑定数据:
for(var i = 0 ; i < json.leng; i++){
    var newLi = document.crreateElement('li')
    newLi.innerHTML = json[i].name;
    ul.a(newli)
}
 优势：把需要动态绑定的内容一个个追加到页面中，不影响其他的元素；
 弊端：每创建一个元素就引发了一次DOM回流，如果次数过多，浪费性能。

第二种：字符串拼接 
var str= null;
for(var i = 0 ; i < json.leng; i++){
    str += ''+json[i].name+'
}
ul.innerHTML += str;

优点：事先把内容拼接好了，最后统一添加到页面当中，只引发一次DOM回流。
缺点：原来标签绑定的事件都消失了

第三种：文档碎片方式
a) var  frg = document_createDocumentFragment()   //创建一个文档碎片就相当于创建了一个临时容器。
b) for(var i = 0 ; i < 5; i++){
    var li = document_createElement_x('li');
      frg.appengChild(li);
     }
   ul.a(frg);
    frg = null; //因为frg是一个对象，最后使用完要释放内存
优点：事先用一个容器装创建的元素，最后再统一添加到页面中， 只引发一次DOM回流；