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)里写你的插件而不需要考虑与外界变量是否存在冲突]
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>
共同学习,写下你的评论
评论加载中...
作者其他优质文章