2010-01-08 75 views
18

这是什么意思?关于jQuery关闭的一个简单问题

(function($){ 
})(jQuery); 

使问题更清晰,什么包裹在括号中的函数JS的意思(对不起,我在封闭的概念有些混乱)。那么$参数呢?和最后括号中的“jQuery”?

我可以对mootools进行同样的处理,并将它们合并到一个JS文件中吗?

(function($){})(jQuery); 

(function($){})(mooTools); 

我只用jQuery工作,正在计划通过MooTools

+0

[的JavaScript/jQuery的闭合功能语法(HTTP的可能重复://计算器。com/questions/4472528/javascript-jquery-closure-function-syntax) – Matt 2013-07-24 07:41:08

回答

24

结束语括号之间的功能职责是确保该功能作为函数表达式进行评估。

发生这种情况的原因是Grouping Operator(括号),只能评估表达式

如果没有括号的使用,它会被解释为函数声明,这将导致语法错误,因为函数名是可选的函数声明。

(function(arg){ 
    alert(arg); // alerts test 
})("test"); 

在上面的例子中,函数表达式会自动执行,传递一个参数。

即图案大量使用jQuery插件,因为jQuery的可以在noConflict模式下运行时,$全局变量不会被创建,所以jQuery的全局对象作为此匿名函数的一个参数传递和内可以自由地将其称为$(收到的参数)。请注意,像上面的例子一样调用自执行函数表达式中的函数上下文(this关键字)将始终引用Global对象。

有关函数表达式和函数声明之间的差异更深入的信息,给看看以下资源:

+0

@CMS究竟这个正确的术语是什么?我一直称它为“自动执行匿名功能”我的术语是否准确? +1为一个伟大的答案! – 2010-01-08 02:54:25

+1

@Doug:是的,我认为你的术语是准确的,但请记住函数表达式也可以有一个名称,它只是可选的(对于调试真的很有用,例如用于检查调用堆栈,尽管JScript有非常严重的错误http:/ /groups.google.com/group/comp.lang.javascript/msg/5b508b03b004bce8,对于递归也很有用(因为ES5严格模式下的'arguments.callee'将不可用)),所以*“自动执行函数表达式” *可能会更精确一点点... – CMS 2010-01-08 04:20:09

+0

@CMS - 真棒,谢谢! – 2010-01-08 06:19:40

0

function($) { ... }创建了一个函数它接受一个名为$的参数。

用括号括起来什么也不做。

添加(jQuery)使用jQuery作为参数调用函数。


这样做是为了使独立的$功能在全球范围内。
当您在函数中编写$时,请参考参数$,而不是全局变量$

+6

另请注意,虽然在括号中包装了一个函数“什么都不做”,但如果您想在函数后面添加(jQuery),则这是必需的。 – 2010-01-08 01:45:00

1

下面是封闭的制品:http://www.jibbering.com/faq/faq_notes/closures.html

基本上,CMS所说,它是一个函数表达式。有一个很好的例子,可以帮助您更好地了解该页面的2/3。

最后一组圆括号中的jQuery表示您将jQuery对象传递给内部函数。该内部函数采用该对象,并将其指定为$。所以,当你访问函数内的$时,你实际上是在处理你传递的jQuery对象。

至于混合这些与jQuery和Mootools,我从来没有使用过Mootools,所以我不知道它是如何分配自己的。我唯一能想到的是,如果它使用像jQuery这样的$,你可以调用jQuery.noConflict();并将jQuery重新分配给另一个变量,也许var $j = jQuery;然后,你可以像平常一样使用Mootools。

6

CMS已经给你正确的答案,但我只是想补充说,这不是封闭。这只是()运算符用来返回表达式的结果,在这种情况下是一个函数表达式,并且在JavaScript中,可以直接调用返回的匿名函数。因此,这简直是结合两种:

var x = (1+1); // <--() evaluates an expression 

和:

var arr = [0,1,2]; 
arr.push(function(text){alert(text)}); 
arr[3]('hello'); // <-- function returned by array called directly 

而且作为$参数,这仅仅是JavaScript的允许变量名的人物之一。你的例子是完全等同于:

(function(jQ){})(jQuery); 
(function(moo){})(mooTools); 
0

MooTools的等价物的命名空间$是:

(function($) { 
    // $ is the mootools one (aliasing document.id) 
})(document.id); 

您可以将它们合并成一个文件,但请记住,MooTools是一个典型的框架,只有$服务于选择器的目的,而所有的功能进入元素/数组/类等原型。因此,在做mootools的工作原理:

var foo = $("bar"); 
foo.hide(); // the element inherits .hide() 

但在jQuery的它会失败,需要转录为

var foo = $("#bar"); 
$(foo).hide(); 

的一点是,你不能命名空间中的东西,MooTools的出口为原型。

5

执行此操作的要点是,可以从连接到传入对象的属性和方法中利用在函数表达式内创建的对象,而不公开公开地显示这些对象。这可以帮助防止可变碰撞。它还允许创建私人存储空间是连接东西要访问的变量..

(function($){ 
//jQuery is available here as $
var myPrivateArray = []; //this is private
$.addItem = function(item) { myPrivateArray.push(item); }
})(jQuery);

//I can't access myPrivateArray here... //but I can use jQuery.addItem to add something.