$(function(){...})；嵌套在(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的内容。

Answer 2

$(function () { ... });是绑定到document.ready的缩写。这是一种确保在修改开始之前加载DOM的方法。

Answer 3

好吧，我可以提供一些见解，但我不明白它的目的

内部函数(如下所示)与对jQuery.ready()的$(document).ready()引用相同

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

外部函数只是执行$(document).ready()函数的闭包，但本例中的目的似乎没有用。