jQuery问题:这究竟是什么意思?
(function($, window, undefined){ ... jquery code... })(jQuery, window);
它到底意味着什么? 它是否也意味着$(document).ready()
? 或者只是两件不同的事情?
已经有两个答案,但这是我对代码缺失结束的猜测:
(function ($, window, undefined) { // ... jquery code... })(jQuery, window);
注意:预计会有三个参数,但会提供两个参数。
它基本上是做什么的:
- 在花括号内部给出一个私有范围,因此在内部声明的任何
var
都不可见 - 创建
jQuery
的私有$
快捷方式,而不依赖于全局设置的这个快捷方式(例如,jQuery.noconflict()
可能已被调用,这仍然可以工作) - 创建一个词法窗口变量,这意味着更快地查找全局变量
- 确保在花括号之间的范围内确实未定义undefined,即使有人写了类似
undefined = "now it's defined";
isundefined = "now it's defined";
在全局范围内,因为undefined
实际上可以重新定义(这是语言的错误)。
此模式称为立即调用函数,或简称立即函数,或自调用匿名函数或其他一些名称。 基本思路是:
(function (x, y) { // ... })(1, 2);
要么:
(function (x, y) { // ... }(1, 2));
意思是:
function myFunction (x, y) { // ... } myFunction(1, 2);
但不需要为您的函数赋予任何名称并污染命名空间。
回到你的问题,这并不意味着$(document).ready()
或类似的东西,但它意味着你可以使用$(document).ready()
而不是jQuery(document).ready()
即使外面没有$
快捷方式。
这个例子实际上可能更好地解释它,即使它没有在任何地方使用:
(function (JQ, window, undefined) { JQ(document).ready(function () { // this is run when document is ready }); })(jQuery, window);
现在代替$
你可以调用jQuery作为JQ
并使用JQ(document).ready()
而不是$(document).ready()
– 它可能看起来不太有用但它显示了当你有这样的代码时会发生什么。
作为旁注,我可以补充说,由于这种模式,你实际上并不需要语言中的变量声明,而只需要函数参数。 代替:
var x = 10; alert(x * x * x);
你可以使用:
(function (x) { alert(x * x * x); })(10);
确实像这样的函数:
function square (x) { // some code ... var result = x * x; return result; }
完全等同于:
function square (x, result) { // some code ... result = x * x; return result; }
因为JavaScript中的提升机制甚至在两种情况下的声明和赋值之前都会使result
变量可用(但未定义)(在// some code ...
部分中)。 这通常是混乱的根源,但实际上非常有趣且非常强大。
另请参阅我最近更新的其他问题的答案:帮助理解JavaScript全局减排技术 ,以获取有关此主题的更多信息。
(function($, window, undefined){ ... jquery code... })();
不同于
$(document).ready()
保罗·爱尔兰有一个很好的video,讲述了我在1点30分从jQuery Source中学到的10件事 ,他谈到了jquery源码的自动执行匿名函数以及论证意味着什么
就像那样,它根本没有多大意义(此外还有一个结束)。 你可能看到的是类似的东西:
(function($, window){ // code } )($, window);
这会将代码置于新范围内,因此您可以定义变量而不会混淆外部范围。
它还允许您将不同的内容传递给函数,而无需更改代码。 例如,如果你使用不同的JavaScript框架,并且$
没有绑定到jQuery,你可以为jQuery传递替代变量,而你仍在使用$
来在内部引用jQuery。 与此类似,您也可以传递不同的窗口实例(例如从弹出窗口)。
我猜这段代码实际上是这样的:
(function($, window, undefined){ ... jquery code... })(jQuery, window);
注意最后的括号。
如果是这种情况,这里发生的是一个自动执行的匿名函数。 这样做的关键是在该匿名函数内定义的任何局部变量或函数都不会污染全局命名空间。
@rsp对这个具体问题有很好的答案。
有关此模式的一般背景,请参阅http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth 。