8

以下に、2 つの jQuery セレクターを示します。

最初に、キャッシュされたオブジェクト内の DOM 要素を検索し、次にその親を検索します。次に、別の dom 要素の親 (テーブル) を検索します。(例2)

2 番目 (2 行) は、キャッシュされた要素を介して検索します。 (例1)

    $('element', table.setting.body).on('blur focus', table.focus).parents('parent').find('another element').on('click', function); // ex2

    $('element', table.setting.body).on('blur focus', function); // ex 1
    $('another element', table.setting.body).on('click', function); // ex 1

どちらがより速い/ベストプラクティスですか?
元。1 は、jQuery 関数を参照する方が間違いなく高速です。.hide().animate().show()しかし、DOM要素を検索するときはいつですか？

ここに画像の説明を入力

4

3 に答える 3

1

私の意見では、これは速度の問題ではなく、保守性と優れたコーディング スタイルの問題です。

これが、例 1 が例 2 よりもはるかに優れている点です。

混乱を避け、物事を分離してください。2 つのイベントを 2 つの異なる要素にアタッチしたい - 2 つのステートメントを記述します。これにより、コードがはるかに構造化され、読みやすくなります。

于 2012-09-28T13:56:28.353 に答える
0

2 回table.setting.body指定することなく、これらの子孫のさまざまな子孫を一致させ、さまざまなタスクを実行しようとしているようです。table.setting.body

end()を使用してこれを実現できます。たとえば、table.setting.bodyが jQuery オブジェクトの場合、次のように記述できます。

table.setting.body.find("element").on("blur focus", function).end()
                  .find("another element").on("click", function);

(table.setting.bodyが DOM 要素の場合は、$()最初に適用する必要があります)。

上記のコードは、キャッシュされたオブジェクトを 1 回だけ評価し、2 つの呼び出し(私の経験では引数を使用したfind()呼び出しよりもわずかに高速)、2 つの呼び出し(あなたのものと同じ)、および 1 つの呼び出し(アイテムをポップするだけです) を実行します。スタックであり、非常に高速である必要があります)。$()contexton()end()

于 2012-09-28T14:05:02.353 に答える
0

私が見る唯一の違いは、最初のアプローチ内での親の使用です。jQuery.parents は、関数 dir 内でループを使用して、必要な親を探します。

parents: function( elem ) {
    return jQuery.dir( elem, "parentNode" );
},

// ...

dir: function( elem, dir, until ) {
    var matched = [],
        cur = elem[ dir ];

    while ( cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until )) ) {
        if ( cur.nodeType === 1 ) {
            matched.push( cur );
        }
        cur = cur[dir];
    }
    return matched;
},

(http://code.jquery.com/jquery-1.8.2.js)

cur = elem[ dir ]elem["parentNode"]until は定義されていないため、and はすべての親に対して繰り返されることを意味します。希望の親を参考にすれば近道はありません。

探している最初の要素とドキュメントのルートの間のパスの長さに応じて、最初のアプローチではより多くの DOM 操作が必要になります。

したがって、2 番目の方法をお勧めします。

于 2012-09-28T13:47:50.030 に答える