关于javascript:这是什么目的? (function($){//这里的函数代码})(jQuery);

What is the purpose of this? (function ($) { //function code here })(jQuery);

我正在调试其他人的JavaScript代码,大部分代码都包含如下:

1
2
3
(function ($) {
    //majority of code here...
})(jQuery);

($)(jQuery)发生了什么? 我没有被教过这样的代码,也没有见过它们。 他们的目的是什么?

同样,没有document.ready,但我认为这是因为代码在结束时被();读取后立即执行?


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var $ ="some value we don't care about";

 // v=====normal plain old function
(function ($) {
 //        ^=======receives jQuery object as the $ parameter

    //majority of code here, where $ === jQuery...

    $('.myclass').do().crazy().things();


})(jQuery);
 //  ^=======immediately invoked, and passed the jQuery object


 // out here, $ is undisturbed
alert( $ ); //"some value we don't care about"


当您需要/需要使用jQuery.noConflict()时,这非常有用,并且全局名称$不是jQuery的别名。您发布的代码允许您在匿名函数中使用较短的$表示jQuery,而$不需要是全局的。


只是为了扩展RightSaidFred的答案,当我第一次看到()()语法时,我有点迷惑,但是一旦我意识到括号被用来定义一个匿名函数然后调用它就有意义了。例如:

1
(function (msg){alert(msg)})('hello');

...定义一个函数,然后调用它,将'hello'作为参数传递。

所以问题中的例子:

1
2
3
(function ($) {
    //majority of code here...
})(jQuery);

将jQuery传递给一个匿名函数并在函数中将其称为$,这是一种保证$将适用于jQuery而不会干扰其他任何东西的方法。


这种结构称为JQuery插件,插件的目的是在项目中创建任何常见任务/功能的框架,同样可以根据您在不同页面或同一页面中的使用情况扩展插件。这样你可以避免在任何地方重复相同的代码。

看看http://docs.jquery.com/Plugins/Authoring