logo标签列表

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

javascript
14

我在JavaScript中遇到过几次这种现象，即整个脚本都被包裹在一个函数调用中，像这样：

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

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

这种编码风格用于什么？使用包装函数风格与不使用的区别是什么，应该在何时使用？

1个回答
19

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

例如，假设你有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函数时，它会隐藏"somthing-else"节点而不是你期望的"somthing"节点。

相反，你可以这样做：

// 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脚本一样做：一个表示我的脚本“命名空间”的单个全局变量。例如，在jQuery中，这个单个全局变量是$（或者jQuery）。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接