jquery - jQueryのメソッドチェーンの欠点と利点は何ですか？

Question

jQueryのメソッドチェーンの欠点と利点は何ですか？

セレクターを再宣言するよりも速いですか？

Answer 1

メソッドチェーンの利点：

1. セレクターは、複数の操作に対して1回だけ評価されます。パフォーマンスの向上、コードの縮小。
2. セレクターの結果は、ローカル変数に割り当てることなく、複数のメソッドに使用できます。よりコンパクトなコード。
3. 複数のメソッドをよりコンパクトに1行に配置できます。
4. 特に、などの連続した異なる結果を操作する場合は、はるかにコンパクトになります$(this).next().find("span.title").closest(".section").hide();。連鎖しないと、4つの異なるローカル変数が必要になりますが、これには何も必要ありません。

連鎖のデメリット：

1. セレクターの結果は、チェーンだけでは実行できないより複雑な使用のためにローカル変数に保存されていません。
2. 1行に連続するチェーンメソッドを詰め込みすぎると、コードが非常に長い行になるように拡張されると、コードの可読性が低下する可能性があります。（引き続きチェーンを使用できますが、これを回避するために、チェーンに時折改行を挿入するだけです）。

Answer 2

おそらく利点は、

それはあなたのコードを短くそして管理しやすくします。それはより良いパフォーマンス（より速く）を与えます。そして、チェーンは左から右に始まります。したがって、左端が最初に呼び出されます。

チェーンを使用する場合、JQueryは要素を1回検索する必要があり、接続されているすべての関数を1つずつ実行します。

チェーンの欠点は、不必要に使いすぎてパフォーマンスが低下する可能性があることです。

例：-コード1：

​$(document).ready(function(){
    $('#myContent').addClass('hello');
    $('#myContent').css('color', 'blue');
    $('#myContent').fadeOut('fast');
});​

コード2：

$(document).ready(function(){
    $('#myContent').addClass('hello')
          .css('color', 'blue')
          .fadeOut('fast');     
});​

これらのコードはどちらも同じことをします。コード2は連鎖を使用しており、コードがより高速で短くなっています。また、コード1では、JQueryはDOM全体を検索して要素を見つけ、その後、その要素で関数を実行する必要があります。

Answer 3

はい、高速になる可能性がありますが、jQueryオブジェクトを変数に格納する場合と比較するとそうではありません。これは同じくらい高速です。

例：これ：

var elements = $('.myClass').find('p');
elements.next()

これと同じくらい速いはずです：

$('.myClass').find('p').next()

ほとんどの場合、可読性に帰着します...メソッドチェーンによってコードが読みやすくなることもありますが、夢中になってしまうと、コードが読みにくくなる可能性があります。