Javascript包装匿名函数内的代码
我需要帮助理解jQuery插件创作的这种模式。 有人可以为我解释一下这段简单的代码吗?
(function($) { /* Code here */ })(jQuery);
我知道这是为了避免与使用相同$
字符的不同插件发生冲突,但不知何故无法理解它是如何工作的。 参数$
已解析的jQuery
对象有什么关系?
让我们打破这个:
(function($) { /* Code here */ })(jQuery);
首先,构造:
(function() {})();
创建一个立即执行的函数表达式(通常称为IIFE)。 这是一个立即执行而不是现在定义的函数,但稍后调用。 它本质上是一个匿名(未命名)函数,它被定义然后立即执行。
然后,将jQuery传递给它,如下所示:
(function() {})(jQuery);
将jQuery作为该立即执行函数的第一个参数传递。 然后,将第一个参数命名为$
,在函数内定义该符号,以对应于传递的第一个参数。
(function($) {})(jQuery);
以扩展forms显示如下:
(function($) { // you can use $ here to refer to jQuery })(jQuery);
对于jQuery插件作者来说,有一件好事:
-
IIFE创建了一个本地函数上下文,因此您可以为插件提供“全局”变量,但实际上不是全局变量,因此不会污染或与实际的全局变量名称空间冲突。
-
您可以使用
$
for jQuery进行编程,无论主机程序是否实际具有为jQuery定义的内容,因为您已在函数中定义了$
local。
你有什么简写这样的事情:
function anonymous_function($) { // Code here }; anonymous_function(jQuery);
如您所见,它允许$
符号用作函数内jQuery
对象的引用。
JavaScript中的函数可以是语句或表达式 。 使用函数表达式时,可以像任何其他值一样传递它:
> console.log(function() { 1 + 1; }); > (function() {}) && doExpensiveWork(); // etc.
您可以使用函数表达式执行的操作之一是立即调用它。 在这种情况下,该函数称为立即调用的函数表达式(或简称IIFE) :
> (function() { console.log("IIFE running"); })(); IIFE running
这与创建函数并分两步调用它相同:
> var notAnIIFE = function() { console.log("running"); }; > notAnIIFE(); running
当然,函数表达式可以带参数:
> var someFunction = function(x, y) { return x + y; }; > var seven = someFunction(3, 4); > seven 7
因此,也可以使用参数调用IIFE :
> var seven = (function(x, y) { return x + y; })(3, 4); > seven 7
在这样的调用的情况下:
(function($) { /* do work with $ */ })(jQuery);
绑定到名称jQuery
的值将作为参数$
传递给函数表达式。 这与执行以下操作类似:
var initializePlugin = function($) { /* do work with $ */ }; initializePlugin(jQuery);
但它在父命名空间中没有留下任何痕迹(而在我们的第二个例子中,我们的initializePlugin
名称在我们完成设置插件后就被遗忘了)。
javascript中的函数创建了一个范围,它不仅仅是关于$
变量,而是关于函数本地的变量。 并且给定$
参数,它变为函数的本地并且可以安全使用,引用jQuery
。
+1为jfriend00的答案。
但是在页面中包含jQuery会覆盖全局符号jQuery和$(请参阅jQuery.js第9579行 ),这可能会导致与定义全局$的其他库发生冲突。
所以更进一步,以阻止全球美元冲突:
(function($) { // you can use $ here to refer to jQuery })(jQuery.noConflict());
如下所示: