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

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"节点,而不是像你期望的那样隐藏"某事物"节点.

相反,你可以这样做:

// 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).