围绕jQuery插件的奇怪的Javascript代码

Weird Javascript code around jQuery plugins

本问题已经有最佳答案,请猛点这里访问。

Possible Duplicate:
What is the purpose of wrapping whole Javascript files in anonymous functions like"(function(){ … })()"?

我在处理jQuery插件时特别看到过这种代码。 有人可以解释一下这是做什么的吗?

1
2
3
(function(){
   //Stuff goes here....
}());


他们在大括号之间用Javascript定义一个函数(这里的东西部分将是要执行的代码),然后使用开放和封闭的parens立即执行它。这与JQuery没有关系,它只是javascript中的匿名函数。 function(){}返回一个函数对象,然后由打开和关闭的parens执行。


通常,当您在JavaScript中遇到此模式时,有人试图使用模块模式。该模式通常被认为是保护您自己的代码与您在页面上可能使用的其他库(如果您在网页中编码)交互不良的好方法。

看到:

http://yuiblog.com/blog/2007/06/12/module-pattern/

注意,示例代码中匿名函数声明的开头和结尾处的包装括号实际上不是必需的。在下面链接的视频中,保罗爱尔兰认为这些通常包括在阅读代码的任何人的头上,代码是自包含的,而不仅仅是程序代码。

我的意思是:

1
2
3
function(){
   //Stuff goes here....
}();

同样有效:

1
2
3
(function(){
   //Stuff goes here....
}());

和:

1
2
3
(function(){
   //Stuff goes here....
})();

和:

1
2
3
!function(){
   //Stuff goes here....
}();

等等。

Paul Irish在这段视频中讨论了这种模式:

http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/


此模式主要用于控制变量的可见性。例如,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var SomeObject = (function() {
    var test ="Some val"; // this will be a private variable

    function testFunction() { // this will be a private function
    }

    return {
        anotherVariable :"Hello", // this will be a public variable

        anotherFunction : function() {
            // this will be a public function that can be called from the object
            // and can access the private properties 'test' and 'testFunction'
        }
    }
})();

在此处阅读有关模块模式的更多信息

jQuery插件经常做这样的事情:

1
2
3
4
5
(function($){
    $.fn.pluginName = function() {
        // plugin code here
    };
})(jQuery);

这样做是为了确保jQuery和其他JS库之间没有冲突。

希望这可以帮助。