1.
function(arg){...}
这就定义了一个匿名函数,参数为arg ;
而调用函数时,是在函数后面写上括号和实参的!!
由于操作符的优先级,函数本身也需要用括号,即:
(function(arg){...})(param)
这就相当于定义了一个参数为arg的匿名函数,
并且将param作为参数来调用这个匿名函数 。
而(function($){...})(jQuery)则是一样的,
之所以只在形参使用$,是为了不与其他库冲突,
所以实参用jQuery 。
《=等价于=》
var fn = function($){...}
fn(jQuery);
2.
jQuery(function(){
。。。
});
全写为
jQuery(document).ready(function(){
。。。
});
$(function(){
...
});
全写为:
$(cocument).ready(function(){
...
});
3.
jQuery(function(){
...
});
用于存放操作DOM对象的代码,
执行其中代码时DOM对象已存在。
不可用于存放开发插件的代码,
因为jQuery对象没有得到传递,
外部通过jQuery.method也调用不了其中的方法(函数)。
(function(){
...
})(jQuery);
用于存放开发插件的代码,
执行其中代码时DOM不一定存在,
所以直接自动执行DOM操作的代码请小心使用。
[这样做可以创建一个作用域以保证内部变量与外部变量不发生冲突,比如$ jQuery 等jquery内部定义的变量。]
[(function($){})(jQuery) 这个写法主要的作用还是保证jquery不与其他类库或变量有冲突 首先是要保证jQuery这个变量名与外部没有冲突(jquery内部$与jQuery是同一个东西 有两个名字的原因就是怕$与其他变量名有冲突二jQuery与其他变量冲突的几率非常小)并传入匿名对象,匿名对象给参数起名叫做$(其实和jquery内部是一样的) 然后你就可以自由的在(function($){})(jQuery)里写你的插件而不需要考虑与外界变量是否存在冲突]
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
102
103
|
<!DOCTYPE HTML>
<html lang=
"en-US"
>
<head>
<meta charset=
"UTF-8"
>
<title></title>
<script type=
"text/javascript"
src=
"http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"
></script>
<script type=
"text/javascript"
>
(
function
($){
console.log(
"---- begin------"
);
/**
测试方法1
*/
$.methodOne =
function
(p){
if
(p == 1) {
console.log(
"OK"
);
}
else
{
console.log(
"NO"
);
}
var
result = addP(p);
console.log(result);
//还可以写方法
function
addP(p) {
return
p +
"--- result ---"
;
}
}
/**
测试方法2
*/
$.tempMethod = {
//加
add:
function
(a,b){
return
a + b;
},
//减
reduce:
function
(a,b) {
return
a - b;
},
//乘
multiply:
function
(a,b) {
return
a * b;
},
//再一层
three:{
//加
add:
function
(a,b,c){
return
a + b + c;
},
//减
reduce:
function
(a,b,c) {
return
a - b - c;
},
//乘
multiply:
function
(a,b,c) {
return
a * b * c;
}
}
};
})(jQuery);
$(document).ready(
function
(){
//调用测试方法1
$.methodOne(1);
//$.methodOne(3);
//调用测试方法2
var
a = 8;
var
b = 4;
var
c = 2;
var
result1 = $.tempMethod.add(a,b);
var
result2 = $.tempMethod.reduce(a,b);
var
result3 = $.tempMethod.multiply(a,b);
var
result4 = $.tempMethod.three.add(a,b,c);
var
result5 = $.tempMethod.three.reduce(a,b,c);
var
result6 = $.tempMethod.three.multiply(a,b,c);
console.log(
"result1 : "
+ result1);
console.log(
"result2 : "
+ result2);
console.log(
"result3 : "
+ result3);
console.log(
"result4 : "
+ result4);
console.log(
"result5 : "
+ result5);
console.log(
"result6 : "
+ result6);
});
</script>
</head>
<body>
</body>
</html>
|