Question

我在JavaScript中遇到过这种现象，其中整个脚本都包含在函数调用中，如下所示：

(function() {
    // statements...
})();

真实世界的例子，来自glow.mozilla.com客户端代码： https://github.com/potch/glow/blob/master/media/glow.js

这种编码风格用于什么？使用和不使用包装函数样式之间的区别是什么？何时应该使用它？

Answer 1

这样做可确保您定义的任何变量/函数都不会进入全局范围。您在页面中包含的所有脚本共享相同的全局范围，因此如果您在两个具有相同名称的单独脚本中定义两个变量，它们实际上会引用相同的变量。

例如，假设您有a.js和b.js，定义如下：

// a.js
var node = document.getElementById("something");

function frob() {
   node.style.display = "none";
}

// b.js
var node = document.getElementById("something-else");

如果你在页面中的a.js之后包含b.js，那么当你调用frob时，它会隐藏“something-else”节点，而不是像你期望的那样隐藏“某事”节点。 / p>

相反，您可以执行以下操作：

// a.js
(function() {
    var node = document.getElementById("something");

    window.frob = function() {
       node.style.display = "none";
    }
})();

// b.js
(function() {
    var node = document.getElementById("something-else");
})();

b.js中的内容不会干扰a.js中的内容。

请注意，实际上我不会将函数直接添加到window，而是我会做类似于你链接到的glow.js脚本的东西：一个代表我的脚本“namespace”的全局变量。例如，在jQuery中，单个全局变量为$（或jQuery）。

Javascript：在函数调用中包装整个脚本

1 个答案: