4

私のプロジェクトの1つをデバッグすると、別の開発者が$(document).ready()関数を変更して、それ自体の内部にクロージャを生成していることに気付きました。EG$(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);
4

3 に答える 3

4

noConflict機能をサポートするためにjQueryプラグインを作成する場合、通常は次のようにします。

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

これにより、設定に関係なく、プラグインコード内の$エイリアスとして使用できます。jQuerynoConflict

たぶん、他の開発者は$反射によって議論を追加しました。

考え直して、それを打ってください。他の開発者はおそらく状況を改善しようとしていました。

ハンドラー$に引数が渡されても、コードは機能するはずです。ready呼び出していたカスタムプラグイン関数はもう存在しないと言います。そのカスタムプラグインについて詳しく教えてください。

$ハンドラーの呼び出しdocument.ready()と実際の実行の間で変更が行われていると思われます。以前はそれを利用していましたが、元$のハンドラーに渡されるようになったため、もう使用できません。

于 2011-04-19T19:12:47.870 に答える
2

内部の関数に渡される最初の引数$(document).ready(...はjQueryオブジェクトです。あなたが見たパターンは、あなたが持っていた場合にのみ本当に意味があります

// outside here, $ could be anything   

jQuery(document).ready(function($) {
    // $ inside here refers to jQuery
    $('.element').click(function() {
        //call custom plugin here
    });
});

これにより、DOMがロードされたときに、$エイリアスが関数内を参照して実行できるようになります。たとえば、別のJavaScriptライブラリ関数など、他の何かを参照している場合でも同様です。しかし、あなたがあなたの質問に持っているものは、参照している限り、コードが問題なく機能することを期待します。jQuerywindow.$jQuerywindow.$jQuery

于 2011-04-19T19:11:30.320 に答える
2

jQueryは、グローバルな「jQuery」への参照を「ready」ハンドラーに渡します。そのため、コードはそのように記述され、実際には問題はないはずです。この話には、あなたの質問が明らかにする以上のものがあるのではないかと思います。

編集—ここに可能性があります：プラグインがjQueryの別のコピーをインポートしていて、プラグインが自分のものではなくそのコピーに自分自身をインストールしている可能性がありますか？TamperDataやChromeの「ネットワーク」開発者ツールなどのツールを使用してすべてのHTTPリクエストを監視し、jQueryが2回読み込まれているかどうかを確認してみてください。または、次の行を「壊れた」コードの前に置きます。

$.banana = "yellow";

次に、ハンドラーコード内をチェックして、「$」に「banana」プロパティがあるかどうかを確認します。

その場合、違いは、「壊れた」コードでの「$」への参照が、プラグインがインストールされていないjQueryのコピーへの参照になることです。「$」パラメータを削除すると、コードはライブラリの正しい更新されたコピーを参照できます。

于 2011-04-19T19:12:16.560 に答える