将整个Javascript文件包装在匿名函数(例如“(function(){…}}()”)中的目的是什么?

JavaScript

ItachiSam

2020-03-12

最近,我阅读了很多Javascript,并且注意到整个文件的包装方式如下所示,在要导入的.js文件中。

(function() {
    ... 
    code
    ...
})();

为什么这样做而不是使用一组简单的构造函数呢?

第935篇《将整个Javascript文件包装在匿名函数(例如“(function(){…}}()”)中的目的是什么?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

4个回答
斯丁JinJinHarry 2020.03.12

除了将变量保留在本地之外,一种非常方便的用法是在使用全局变量编写库时,可以给它一个较短的变量名,以在库中使用。它经常用于编写jQuery插件,因为jQuery允许您使用jQuery.noConflict()禁用指向jQuery的$变量。如果禁用它,您的代码仍然可以使用$并且只要您这样做就不会中断:

(function($) { ...code...})(jQuery);
Davaid小宇宙 2020.03.12
  1. 为了避免与同一窗口中的其他方法/库发生冲突,
  2. 避免使用全局范围,而将其设置为本地范围,
  3. 为了加快调试速度(本地范围),
  4. JavaScript仅具有功能范围,因此也将有助于代码的编译。
YOC36540264 2020.03.12

这就是所谓的关闭。它基本上将代码密封在函数内部,以便其他库不会干扰它。这类似于以编译语言创建名称空间。

例。假设我写:

(function() {

    var x = 2;

    // do stuff with x

})();

现在,其他库无法访问x我创建的要在库中使用的变量

神奇启人 2020.03.12

浏览器中的JavaScript实际上仅具有两个有效范围:函数范围和全局范围。

如果变量不在函数范围内,则在全局范围内。而且全局变量通常是不好的,因此这是一种将库的变量保留给自己的构造。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android