数据绑定

DOM回流

  • [x] 回流（重排reflow）：当页面中HTML结构发生改变（增、删元素、位置发生改变），浏览器需要从新计算一遍最新DOM结构，从新对当前页面进行渲染。（尽量减少DOM回流）

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

数据绑定

知识点

  • [x] 省略号代替多余文本
1
2
3
text-overflow: ellipsis;/*ellipsis:截取后以…作为省略；clip:没有省略号*/
white-space:nowrap;/*强制不换行*/
overflow: hidden;/*溢出隐藏*/

三种数据绑定实现方式

  • [x] 1、动态创建元素节点并追加到页面中实现数据绑定

    • [ ] 优点： 一个个追加到页面中，对原来的元素无影响

    • [ ] 劣势： 每创建一个li，就添加到页面中，引发一次DOM回流，引发回流的次数影响我们的性能

      1
      2
      3
      4
      5
      6
         for(var i=0;i<arr.length;i++){
      	var cur=arr[i];
      	var newli=document.createElement("li");
      	newli.innerHTML="<span>0"+(i+4)+"</span>"+cur.title;
      	ul.appendChild(newli);
      }

  • [x] 2、字符串拼接（最常用）:首先循环需要绑定的数据，然后把需要动态绑定的标签以字符串的方式拼接完成后，统一添加到页面（模板引擎数据绑定（jade、kTemplate、angular.js、backbone.js…））

    • [ ] 拼接好后统一到页面中，只引发一次回流

    • [ ] 把拼接的字符串添加到ul中，原有的li鼠标滑过效果消失（原有标签绑定事件消失）

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
         var str="";
      for(var i=0;i<arr.length;i++){
      	var cur=arr[i];
      	str+="<li>";
      	str+="<span>0"+(i+4)+"</span>";
      	str+=cur.title;
      	str+="</li>";
      	// str+="<li><span>0"+(i+4)+"</span>"+cur.title+"</li>"
      }
      ul.innerHTML+=str;//没加号会覆盖原有内容
      //ul.innerHTML=ul.innerHTML(把之前的li以字符串的方式获得)+str;(拼接完成的整体还是字符串，最后字符串统一添加到页面，浏览器还需要把字符串渲染成对应的标签)

【注意】：注意拼接的字符标签空格问题，易出错

  • [x] 3、文档碎片

    • [ ] 避免了回流次数，且对之前的li无影响

      1
      2
      3
      4
      5
      6
      7
      8
      9
         var frg=document.createDocumentFragment();//->创建一个文档碎片，相当于临时创建一个容器
      for(var i=0;i<arr.length;i++){
      	var cur=arr[i];
      	var newli=document.createElement("li");
      	newli.innerHTML="<span>0"+(i+4)+"</span>"+cur.title;
      	frg.appendChild(newli);		
      }
      ul.appendChild(frg);
      frg=null;//手动释放堆内存

源码 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}		
		#ul{	
			padding:10px;		
			width: 200px;
			height: auto;
			border: 1px solid blue;
		}
		span{						
			border:1px solid #ef0;
			border-radius:50%;			
		}
		span.bg{	
			
			color: white;
			background-color: red;
			border:1px solid red;
			border-radius:50%;			
		}
		li{
			list-style: none;
			/*一行自动截取*/
			text-overflow: ellipsis;/*ellipsis:截取后以…作为省略；clip:没有省略号*/
			white-space:nowrap;/*强制不换行*/
			overflow: hidden;/*溢出隐藏*/
		}
		/*li:hover{
			background-color: pink;
		}*/
	</style>
</head>
<body>
<ul id="ul">
	<li><span class="bg">01</span>习近平主持中央全面深化改革领导小组会议</li>
	<li><span class="bg">02</span>总理请来四位院士 国务院第一会议室成"科学讲堂"</li>
	<li><span class="bg">03</span>国务院任命倪岳峰任海关总署副署长</li>
</ul>
<script src="json-bind.js" type="text/javascript"></script>
<script type="text/javascript">
	var ul=document.getElementById("ul");
	var list=document.getElementsByTagName("li");
	for(var i=0;i<list.length;i++){
		list[i].onmouseover=function(){
			this.style.backgroundColor="blue";
		}
		list[i].onmouseout=function(){
			this.style.backgroundColor="";
		}
	}
	//1、动态创建元素节点并追加到页面中实现数据绑定
	//优点：一个个追加到页面中，对原来的元素无影响
	//劣势：每创建一个li，就添加到页面找那个，引发一次DOM回流，引发回流的次数影响我们的性能
	for(var i=0;i<arr.length;i++){
		var cur=arr[i];
		var newli=document.createElement("li");
		newli.innerHTML="<span>0"+(i+4)+"</span>"+cur.title;
		ul.appendChild(newli);
	}
	//2、字符串拼接（最常用）:首先循环需要绑定的数据，然后把需要动态绑定的标签以字符串的方式拼接完成后，统一添加到页面（模板引擎数据绑定（jade、kTemplate、angular.js、backbone.js…））
	// 优势：拼接好后统一到页面中，只引发一次回流
	// 劣势：把拼接的字符串添加到ul中，原有的li鼠标滑过效果消失（原有标签绑定事件消失）
	var str="";
	for(var i=0;i<arr.length;i++){
		var cur=arr[i];
		str+="<li>";
		str+="<span>0"+(i+4)+"</span>";
		str+=cur.title;
		str+="</li>";
		// str+="<li><span>0"+(i+4)+"</span>"+cur.title+"</li>"
	}
	ul.innerHTML+=str;//没加号会覆盖原有内容
	// ul.innerHTML=ul.innerHTML(把之前的li以字符串的方式获得)+str;(拼接完成的整体还是字符串，最后字符串统一添加到页面，浏览器还需要把字符串渲染成对应的标签)
	
	//3、文档碎片：
	var frg=document.createDocumentFragment();//->创建一个文档碎片，相当于临时创建一个容器
	for(var i=0;i<arr.length;i++){
		var cur=arr[i];
		var newli=document.createElement("li");
		newli.innerHTML="<span>0"+(i+4)+"</span>"+cur.title;
		frg.appendChild(newli);		
	}
	ul.appendChild(frg);
	frg=null;//手动释放堆内存
</script>
</body>
</html>