围绕 jQuery 插件的奇怪 Javascript 代码 [重复]

Posted 2023-02-22

【中文标题】围绕 jQuery 插件的奇怪 Javascript 代码 [重复]

【英文标题】：Weird Javascript code around jQuery plugins [duplicate]

【发布时间】：2012-01-06 17:03:37

【问题描述】：

可能重复：What is the purpose of wrapping whole javascript files in anonymous functions like “(function() … )()”?

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

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

【问题讨论】：

这项技术主要与范围变量有关，因此您无需在全局范围内声明一堆变量，但您不一定需要函数或对象方法。

【参考方案1】：

他们在大括号之间用 Javascript 定义一个函数（这里的东西是要执行的代码），然后使用打开和关闭的括号立即执行它。这与 JQuery 无关，它只是 javascript 中的一个匿名函数。 function() 返回一个函数对象，然后由打开和关闭的括号执行。

【讨论】：

那为什么不直接执行没有函数的代码呢？

@Dbugger 如果您使用函数，您将获得函数范围。并且函数范围绑定到函数，因此您可以拥有您不放在全局范围内的局部变量

@Dbugger 正如 Raynos 所说，它是关于有效地管理变量。所以一旦函数退出，它的变量就会被删除，这样你就可以在别处使用它们的名字，从而释放内存

我明白了。通常我会做一个非匿名函数然后调用它，但我想这种方式更干净。谢谢！

@Dbugger 是的。有点类似于在 for 循环中使用像 i 这样的一次性变量。在Javascript中有很多这样写的一次性函数，尤其是处理回调请求

【参考方案2】：

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

见：

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

请注意，示例代码中匿名函数声明的开头和结尾的圆括号实际上不是必需的。 Paul Irish，在下面链接的视频中，认为这些通常被包含在内，以提醒任何阅读代码的人，代码是自包含的，而不仅仅是程序代码。

我的意思是：

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

和以下一样有效：

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

还有：

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

还有：

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

等等。

Paul Irish 在此视频中谈到了这种模式：

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

【讨论】：

您的代码中的圆括号实际上并不是必需的 我不确定我是否同意这种说法。 :)

你认为它有什么用途？ 2:40左右开始看paulirish.com/2010/10-things-i-learned-from-the-jquery-source。

建立非全局作用域而不创建临时函数或对象方法。为什么你认为没有必要？如果你能提供一个更具解释性的回应，也许我会同意。除了创建模块之外，还有其他用途（例如运行一个函数调用或一系列需要共享变量但需要明确作用域的函数调用）。

@Jared Farrish：我添加的视频有帮助吗？

我必须看一段视频才能理解你的说法？

【参考方案3】：

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

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 库之间没有冲突。

希望这会有所帮助。