数据绑定

数据绑定的操作

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