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

时间:2011-11-26 00:47:59

标签: javascript

  

可能重复:
  What is the purpose of wrapping whole Javascript files in anonymous functions like “(function(){ … })()”?

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


(function(){
   //Stuff goes here....
}());

3 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:2)

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

请参阅:

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

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

我的意思是:

function(){
   //Stuff goes here....
}();

同样有效:

(function(){
   //Stuff goes here....
}());

(function(){
   //Stuff goes here....
})();

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

等等。

保罗·爱尔兰在这段视频中讨论了这种模式:

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

答案 2 :(得分:1)

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

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'
        }
    }
})(); 

详细了解模块模式here

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

(function($){
    $.fn.pluginName = function() {
        // plugin code here
    };
})(jQuery);

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

希望这有帮助。