数据绑定

说两个概念,回流和重绘

回流:当html结构发生改变,如增删元素 位置发生改变 等,这样浏览器需要重新的计算一遍最新的DOM结构,从而重新的对当前的页面进行渲染

重绘:某一个元素的部分样式发生变化 浏览器只需要重新渲染当前元素

 

列表的数据一般都是从接口来的

假设是ul>li的布局,有三种绑定数据的方法

1.利用动态创建元素节点,把它追加到页面中的方式实现绑定

缺点:每次插入li,浏览器需要回流一次

<body>
  <ul id="list">
  </ul>
  <script>
  var list = document.getElementById("list");
  var data = [1, 2, 3];
  for (var i = 0; i < data.length; i++) {
    var cur = data[i];
    var oli = document.createElement("li");
    oli.innerHTML = cur;
    list.appendChild(oli);
  }
  list.innerHTML = str;
  </script>
</body>

 

2.字符串拼接,(目前的模板渲染基本都是这个原理,jade,....)

将数据和元素绑定,变成一个字符串,然后一次性的插入文档中

<body>
  <ul id="list">
  </ul>
  <script>
  var list = document.getElementById("list");
  var data = [1, 2, 3];
  var str = "";
  for (var i = 0; i < data.length; i++) {
    var cur = data[i];
    str += "<li>" + cur + "</li>";
  }
  list.innerHTML = str;
  </script>
</body>

3.文档碎片,相当于创建一个临时容器,不是每次直接插入到文档中

<body>
  <ul id="list">
  </ul>
  <script>
  var list = document.getElementById("list");
  var data = [1, 2, 3];
  var frg = document.createDocumentFragment();
  for (var i = 0; i < data.length; i++) {
      var cur = data[i];
      var oli = document.createElement("li");
      oli.innerHTML = cur;
      frg.appendChild(oli);
  }
  list.appendChild(frg);
  frg = null;
  </script>
</body>

特别注意:

　　1.如果在元素未插入前绑定事件,那么插入后,事件失效,所以必须在插入元素之后绑定事件(针对事件冒泡,事件捕获另算)

　　2.常用方法2和方法3

 

posted @ 2017-02-04 11:12  花.花  阅读(204)  评论(0)  编辑  收藏  举报