jquery - 在 $(document).ready() 函数内部生成闭包的目的是什么？

Question

调试我的一个项目时，我注意到另一位开发人员更改了 $(document).ready() 函数以在其内部生成一个闭包。例如。 $(document).ready(function($) { }); 我很好奇这样做的意义及其用法。

注意:通过从函数中删除 $ 我的代码再次工作。 $(document).ready(function() { })

原始/固定代码

$(document).ready(function() {
    var id = //pull session variable from asp session (yuck)
    var img = $('.photoLink');

    $('.photoLink').click(function() {
        $(this).photoDialog({
            id: id,
            onClose: function() {
                img.attr('src', img.attr('src') + '&rand=' + (new Date()).getTime()); //prevent caching of image
            }
        });
    });
});

修改/损坏的代码

$(document).ready(function($) {
    var id = //pull session variable from asp session (yuck)
    var img = $('.photoLink');

    $('.photoLink').click(function() {
        $(this).photoDialog({
            id: id,
            onClose: function() {
                img.attr('src', img.attr('src') + '&rand=' + (new Date()).getTime()); //prevent caching of image
            }
        });
    });
});

修改后的代码会在 FireBug 中产生错误，指出我调用的自定义插件函数不存在。我假设这是因为 $ 参数覆盖了任何试图使用它的 jQuery 函数或与之冲突。

我真的很困惑为什么有人会改变这个，在当前上下文中它没有任何意义，因为该插件调用是页面上唯一的 JavaScript。

有人可以向我解释一下为什么要使用它，以及可能的用法示例吗？

编辑

下面是我的自定义插件的代码，我还修改了上面的示例以显示我如何调用它:

(function($) {
    var link = $('<link>');
    link.attr({
        type: 'text/css',
        rel: 'stylesheet',
        href: 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/black-tie/jquery-ui.css'
    }).appendTo('head');

    var script = $('<script>');
    script.attr({
        type: 'text/javascript',
        src: 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js'
    }).appendTo('head');

    $.fn.photoDialog = function(options) {

        var defaults = {
            autoOpen: false,
            title: 'Photo Tool',
            minHeight: 560,
            minWidth: 540,
            url: '/photo_form.aspx',
            onClose: function(){}
        };
        var opts = $.extend(defaults, options);

        return this.each(function() {
            $this = $(this);
            that =$(this);
            var $dialog = $('<div>')
                .html('<iframe src="' + opts.url + '?sn=' + opts.id + '" width="' + (opts.minWidth - 20) + '" height="' + (opts.minHeight - 20) + '" style="border: none;" scrolling="no"></iframe>')
                .dialog({
                    autoOpen: opts.autoOpen,
                    title: opts.title,
                    minHeight: opts.minHeight,
                    minWidth: opts.minWidth,
                    modal: true,
                    close: function() {
                        opts.onClose.call(that);
                    }
                });

            $this.click(function() {
                $dialog.dialog('open');
                return false;
            });
        });
    };
})(jQuery);

Answer 1

当你编写 jQuery 插件时，要支持 noConflict功能，您通常会这样做:

(function($) {
    // Plugin code...
})(jQuery);

这允许您在插件代码中使用 $ 作为 jQuery 的别名，而不管 noConflict 设置如何。

也许其他开发人员通过反射添加了 $ 参数。

再想一想，还是删除它吧。其他开发人员可能正在尝试改善这种情况。

即使将 $ 参数传递给 ready 处理程序，您的代码也应该仍然有效。您说您调用的自定义插件函数不再存在。您能告诉我们有关该自定义插件的更多信息吗？

我怀疑 $ 在对 document.ready() 的调用和处理程序的实际执行之间发生变化，并且您之前已经利用了这一点，但是您不能再这样了，因为原始的 $ 现在已传递给处理程序。