Question

我已经在

中封装了我的javascript

jQuery(document).ready(function($) {

});

我想知道通过以下两种方式调用函数内部的含义是什么：

jQuery(document).ready(function($) {
    $(function () {
        // do something
    });
});

vs

jQuery(document).ready(function($) {
    (function () {
        // do something
    })();
});

编辑：

我也想知道两者中的哪一个会更多＆＃34;正确＆＃34;做事的方式？随意添加您自己的实现。

Answer 1

区别在于执行顺序：

jQuery(document).ready(function($) {
    $(function () {
        // inner handler
    });
    // outer handler
});

内部ready处理程序内的代码在外部处理程序中的代码之后执行：http://jsfiddle.net/nmD8b/。

jQuery(document).ready(function($) {
    (function () {
        // do something
    })();
    // outer handler
});

立即函数表达式中的代码在定义函数的位置执行，即在代码遵循表达式之前执行：http://jsfiddle.net/nmD8b/。

如果要扩展变量范围，请使用第二种方法。第一种方式没有多大意义，您只应在实际需要时注册ready事件处理程序。在这种情况下，DOM已经准备就绪，因为您将处理程序绑定在另一个就绪处理程序中。

如果您不想扩展变量范围，请不要使用它们。只需将所有代码放在外部处理程序中即可。

Answer 2

jQuery(document).ready(function($) {

＆安培;＆安培;

$(function () {

是同样的事情

除了第二个只能在jQuery 1.0+中运行（我认为，如果错误，有人会更正）

此外

$是jQuery命名空间的简写符号。因此jQuery(与$(相同。然后，您可以编写与$(document)相同的jQuery(document)，其中$是命名空间的简写，()提供给定的参数，在本例中为document在javascript中是相同的。

$(function是jQuery的doc.ready调用函数，正常的返回值通常被称为jQuery Object。其中索引0是传递的元素，其他所有内容都是本地js返回该元素或jquery props和方法。

Answer 3

每个人都在说：

jQuery(document).ready(function ($) { });

// is the document.ready as:

jQuery(function ($) { }); // <-- this is the short-hand version

// the $ inside the parenthesis really just means that $ is to refer to jQuery inside.
// you could just do:

$(function () { }); // if you know it will be anyway

使用立即函数更适合创建＆＃34;类＆＃34; /＆＃34;名称空间＆＃34;等常规Javascript。

(function (myNamespace) {

    function myNamespace () { }
    return myNamespace;

}(window.myNamespace = window.myNamespace || {}));

Answer 4

在文档准备好后随时使用$(function () {});非常安全，指定的函数将立即触发。 Quote：

如果在初始化DOM之后调用.ready（），则新建传入的处理程序将立即执行。

注意：正如Felix指出的那样，jQuery似乎阻止了对.ready()的嵌套调用。

使用(function () {})()按预期工作，无论是在文档就绪事件内部还是外部使用。它（i）创建一个封闭（ii）立即触发（iii）不关心文件是否准备就绪。

第一个是多余的，所以IMO第二个更好。

实际上，如果你不需要一个闭包，那么就要使函数内联; $(function () {});本身就是一个封闭。

Answer 5

鉴于$(function() {})是$.ready的别名，您的第一个示例只是$.ready包裹在$.ready内，这实际上没有任何意义，甚至如果我认为它没有任何严重的性能影响。

您的第二个示例是人们通常在其JavaScript文件的最外层部分执行的操作，以防止pollution of the global variable scope：

;(function($) {
    $(document).ready(function() {
        // Do something
    });
})(jQuery);

到目前为止，这是我在大多数JavaScript文件中看到的内容。它可以防止全局变量范围污染，并确保$实际上即使在jQuery模式下也可以引用noConflict。

关于$.ready的一个重要注意事项是，如果您在结束</body>标记之前加载JavaScript，那么您并不需要它（这样做也会改进page load time）。

$（document）.ready（function（）{...}）中的自调用函数;

5 个答案: