深度理解函数：addLoadEvent(func)｛｝

2016-05-15
首先：

注释如下，应该可以理解。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

      function addLoadEvent(func){

	var oldonload = window.onload;

	if (typeof window.onload != 'function') {//判断当前如果没有函数加载

		window.onload = func;//那么直接加载传入的函数

	}

	else{//如果在调用addLoadEvent前，有window.onload加载的函数，那么加上该函数

		window.onload = function(){

			oldonload();

			func();

		}

	}

}
测试：
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

function cooling1(){

	alert("hello");

}

function cooling2(){

	alert("world");

}

      function cooling3(){

	alert("六哥");

}

      function addLoadEvent(func){

	var oldonload = window.onload;

	if (typeof window.onload != 'function') {

		window.onload = func;

	}

	else{

		window.onload = function(){

			// oldonload();

			func();

		}

	}

}

window.onload = cooling1;

addLoadEvent(cooling2);

addLoadEvent(cooling3);
结果：

注释了oldonload()，那么导致之前已经加载的函数都不可以，因此结果是：六哥。（懂我的以后不要叫爽哥，记得叫六哥！）同时，如果注释了

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



##### 如果这样：

```javascript

		function addLoadEvent(func){

			var oldonload = window.onload;

			if (typeof window.onload != 'function') {

				window.onload = func;

			}

			else{

				window.onload = function(){

					oldonload();//此处不再注释

					func();

				}

			}

		}

		addLoadEvent(cooling3);

		window.onload = cooling1;

		addLoadEvent(cooling2);//注意顺序

结果：

addLoadEvent(cooling3)将起不到作用，结果为hello ，world。

同理，如果这样:
1
2
3
4
5
6

addLoadEvent(cooling2);//注意顺序

addLoadEvent(cooling3);

window.onload = cooling1;
结果：

将所有的addLoadEvent都不起作用。

总结：

在使用JavaScript写相关程序的过程中，addLoadEvent这样的函数几乎每次都能用到。执行时，是按照函数调用的顺序，顺序向下执行（我这里的依次弹窗就体现了这点）。但是要注意，如果同时使用window.onload加载函数，那么window.onload必须放在所有的addLoadEvent函数前。只有这样才能起到作用。

类似的常用函数还有：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
      function insertAfter(newElement,targetElement) {
	    var parent = targetElement.parentNode;
	    if (parent.lastChild == targetElement) {
			parent.appendChild(newElement);
	    } 
	    else {
	        parent.insertBefore(newElement,targetElement.nextSibling);
	    }
	}
       
  function addClass(element,value){
       if (!element.className) {
           element.className = value;
       }
       else{
           newClassName = element.className;
           newClassName += " ";
           newClassName += value;
           element.className = newClassName;
       }
}

由于JavaScript中不存在insertAfter()、addClass()这样的方法，所以需要手动建立一个这样的函数，方便复用！对于addClass()这个函数，要注意字符串拼接的部分，i+=j 等价与i=i+j,而不等价于i=j+i；虽然它们在数值运算上，是相等的，但是在字符串拼接上，却值得注意！

#JavaScript