3

jQueryプラグインに相当するこれらの2つの記述方法はなぜですか？

最初の方法：

$.fn.myplugin = function () {
    return $(this).each(function() {
        return $(this).bind('click', function () {
            console.log('Hi');
        });
    });
};

2番目の方法：

$.fn.myplugin = function () {
    return this.bind('click', function () {
        console.log('Hi2');
    });
};
4

4 に答える 4

7

片方からもう片方に減らしましょう：

$.fn.myplugin = function () {
    return $(this).each(function() {
        return $(this).bind('click', function () {
            console.log('Hi');
        });
    });
};

関数を開始するthisと、jQueryオブジェクトであるため、$(this)何も購入しません。簡単に次のようになります。

$.fn.myplugin = function () {
    return this.each(function() {
        return $(this).bind('click', function () {
            console.log('Hi');
        });
    });
};

つまり、「jQueryオブジェクトの要素ごとに、jQueryオブジェクトを作成し、そのオブジェクトにイベントをバインドする」ということです。

を見るとbind、が呼び出されon、ロジックが実行され、最後に次の行が実行されます。

return this.each( function() {
    jQuery.event.add( this, types, fn, data, selector );
});

つまり、そのjQueryオブジェクトのすべての要素にイベントが適用されるため、実際には次のようになります。

つまり、「jQueryオブジェクトの要素ごとに、jQueryオブジェクトを作成し、そのjQueryオブジェクトのすべての要素に対して、イベントをその要素にバインドする」ということです。

これで、2回ループします。1回はN要素のリストで、次にN1回は1つの要素のリストでループします。実際には、すべてを直接バインドできます。

$.fn.myplugin = function () {
    return this.bind('click', function () {
        console.log('Hi2');
    });
};

そしてもちろん、それが最終的なコードです。

于 2012-07-12T16:51:25.133 に答える
3

あなたの場合、正当な理由なしに最初のスニペットに新しいjQueryオブジェクトを作成するという事実を除いて実際の違いはありません（thisjQueryオブジェクトであるため、使用する必要はありません$(this)）。

一般的に言えば、プラグイン関数で使用return this.each(...);して、プラグインの関数が呼び出されたjQueryオブジェクトに要素がいくつあっても、すべてを連鎖可能に保ち、コードを機能させることをお勧めします。

戻るthis.bind(...)ことで連鎖性も維持されますが、イベントをバインドするだけでなく、より複雑なプラグインの場合、eachループを使用すると読みやすくなることがよくあります。

于 2012-07-12T16:45:54.313 に答える
1

2つの間にまったく違いはありません。

何らかの理由で、そのうちの1つでループを実行していますが、最終的には同じ結果になります。

于 2012-07-12T16:43:20.850 に答える
1

thisjQueryプラグインではjQueryオブジェクトであるため、これらは同等です。したがって、$(this)何もしません。

.bindjQueryオブジェクト内のすべての要素で機能します。その場合、各要素を個別に.each呼び出します。.bind

したがって、これらは両方とも要素をループし、イベントをそれらにバインドするため、同等です。

私は2番目のものを使用することをお勧めします、それはよりクリーンでより速いです。

于 2012-07-12T16:47:00.420 に答える