jquery - $(函数(){...});嵌套在 (function(){...})();

Question

从以前的开发人员那里获取了一些 jQuery 代码，并且在我们的框架中看到了以下很多内容:

(function(){
$(function(){
    ...
});
})();

我理解在我们的模块化模式中使用自执行函数，但我对其他函数的嵌套感到困惑。有人可以大致解释一下这样做的目的吗？

谢谢!

Answer 1

这种东西可以用来强制 JavaScript 中的封装。

在 JavaScript 中，变量具有函数作用域:

var a = 10;
function() {
    var a = 20;
    alert(a); // output is 20
}
alert(a); // output is 10

这有时用于 encapsulation或information hiding 。例如，考虑以下 javascript，它计算按钮被单击的次数:

<script type="text/javascript">
var count = 0;
var button = document.getElementById("MyButton");
button.onclick = function() { count++ };
</script>

由于它不在函数中，因此 count 变量是公开的，并且可以轻松重置，如下所示:

count = 0; // oh no! now we don't know how many times it was clicked

为了防止这种情况，代码应该位于自执行函数中:

<script type="text/javascript">
(function() {
    var count = 0;
    var button = document.getElementById("MyButton");
    button.onclick = function() { count++ };
}());
</script>

现在 count 变量已安全地隐藏在这个自执行函数的范围内；没有人可以改变它的值...呃，或者阅读它...但这只是一个例子。

如果这有道理，您可能想阅读 closures .