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

调试我的一个项目我注意到另一个开发人员更改了$(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,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);

解决方法

当您编写jQuery插件时,为了支持 noConflict功能,您通常会执行以下操作：

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

这允许您在插件代码中使用$作为jQuery的别名,无论noConflict设置如何.

也许其他开发者通过反射添加了$参数.

第二个想法,罢工.另一位开发商可能正试图改善这种情况.

即使将$参数传递给ready处理程序,您的代码仍然可以正常工作.你说你正在调用的自定义插件函数不再存在.你能告诉我们更多有关该自定义插件的信息吗？

我怀疑$在对document.ready()的调用和处理程序的实际执行之间发生了变化,之前你正在利用它,但是你不能再这样了,因为原来的$现在传递给了处理程序.