JavaScript中的字符串拼接

2016-05-27

这是JavaScript DOM编程艺术中的一个例子，字符串拼接部分曾经迷惑了我很久，各大网站上也没发现很好的讲解，下面最终查资料得到的结论…

首先看代码：

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p id="message">these are the things you should konw</p>
	<script type="text/javascript">
		// 设定message的原始位置
		function positionMessage() {
			if (!document.getElementById) return false;
			if (!document.getElementById('message')) return false;
			var elem = document.getElementById('message');
			elem.style.position = "absolute";
			elem.style.left = "50px";
			elem.style.top = "100px";
			// movement = setTimeout("moveMessage()",3000);
			moveElement("message",1000,1000,10);
		}
		
		// 移动元素位置函数
		// function moveMessage(){
		// 	if (!document.getElementById) return false;
		// 	if (!document.getElementById('message')) return false;
		// 	var elem = document.getElementById('message');
		// 	var xpos = parseInt(elem.style.left);
		// 	var ypos = parseInt(elem.style.top);
		// 	if (xpos == 2000 && ypos == 1000) {
		// 		return true;
		// 	}
		// 	if (xpos < 2000) {
		// 		xpos++;
		// 	}
		// 	if (xpos > 2000) {
		// 		xpos--;
		// 	}	
		// 	if (ypos < 1000) {
		// 		ypos++;
		// 	}
		// 	if (ypos >1000) {
		// 		ypos--;
		// 	}
		// 	elem.style.left = xpos + "px";
		// 	elem.style.top = ypos + "px";
		// 	movement = setTimeout("moveMessage()",10);
		// }

		// 抽象
		function moveElement(elementID,final_x,final_y,interval){
			if (!document.getElementById) return false;
			if (!document.getElementById(elementID)) return false;
			var elem = document.getElementById(elementID);
			var xpos = parseInt(elem.style.left);
			var ypos = parseInt(elem.style.top);
			if (xpos == final_x && ypos == final_y) {
				return true;
			}
			if (xpos < final_x) {
				xpos++;
			}
			if (xpos > final_x) {
				xpos--;
			}	
			if (ypos < final_y) {
				ypos++;
			}
			if (ypos >final_y) {
				ypos--;
			}
			elem.style.left = xpos + "px";
			elem.style.top = ypos + "px";
			var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
			movement = setTimeout(repeat,interval);
		}
		// 加载函数的函数
		function addLoadEvent(func){
			var oldonload = window.onload;
			if (typeof window.onload != 'function') {
				window.onload = func;
			}
			else{
				window.onload = function(){
					oldonload();
					func();
				}
			}
		}
		// 加载函数
		addLoadEvent(positionMessage);
	</script>
</body>
</html>

解释：

1
2
3
4
5
6
7
8
9
"moveElement('"// 【moveElement('】 被当成一个字符串
+elementID+
"',"//  【',】被当成一个字符串
+final_x+
","
+final_y+
","
+interval+
")";

最后拼接后产生的效果：

1
2
moveElement('elementID',final_x,final_y,interval);
movement = setTimeout(repeat,interval);//这时这里的repeat就是moveElement('elementID',final_x,final_y,interval),注意：这里的repeat是不用加引号的！elementID始终需要引号是因为，它是字符串，另外的三个是数值，所以不加引号！

#JavaScript