2

Learning jQuery 1.3 (第 3 版には含まれていません) の第 7 章に触発されて、この並べ替えルーチンをまとめました。

var rows = $table.find('tbody > tr').get();
$.each(rows, function(index, row) {
      var $cell = $(row).children('td').eq(column);
      $(row).data('sortKey',$cell);
});
rows.sort(function(a, b) {
      if ($(a).data('sortKey') < $(b).data('sortKey'))
            return -sortDirection;
      if ($(a).data('sortKey') > $(b).data('sortKey')) 
            return  sortDirection;
      return 0;
});

しかし、すべての行$(a)で andを使用するのは好きではありません。$(b)

Q:キャッシュする方法はあり$(a)ます$(b)か? 著者は、代わりにexpandoと呼ぶものを使用しています。

通常の DOM 属性ではなく DOM 要素に関連付けられたこの種のプロパティは、expando と呼ばれます。テーブルの行要素ごとに 1 つ必要なので、これはキーを格納するのに便利な場所です。これで、コンパレータ関数内でこの属性を調べることができ、並べ替えが著しく高速になりました。

4

3 に答える 3

3

ここで実行できる最適化は2つあります。

$.data1つ目は、次ではなく使用すること$.fn.dataです。

$.data(a, 'sortKey') // quick
$(a).data('sortKey') // slow

これは、新しいjQueryオブジェクトを作成する必要がないため、優れています。これは、パフォーマンスの問題と考えるのが正しいでしょう。

2つ目は、の結果をキャッシュすることですdata。そのため、1回だけ実行する必要があります。

rows.sort(function(a, b) {
    var aKey = $.data(a, 'sortKey'),
        bKey = $.data(b, 'sortKey');
    if (aKey < bKey) return -sortDirection;
    if (aKey > bKey) return  sortDirection;
    return 0;
});

3番目の最適化（孤独な答えはbuy-two-get-one-freeであるため）は、速度とその他の機能の両方で1.3よりもはるかに優れているjQuery1.7を使用することです。

于 2012-04-07T17:02:12.547 に答える
1

著者は、各行のソートキーをどこかに保存する必要があると説明していますが、 jQueryの機能を使用して保存する必要はありません.data。これの代わりに、彼は代わりにDOM要素に新しいプロパティを作成することを選択します。

$.each(rows, function(index, row) {
    var $cell = $(row).children('td').eq(column);
    row.sortKey = $cell; // creates a new property!
});

もちろん、上記のコードは、という名前の既存のプロパティがないことを前提としていますsortKey（それが何であれ、それを上書きすると、あらゆる種類の問題が発生する可能性があります）。それは合理的な仮定です。

その後、ソートキーを格納するために使用したのと同じメカニズムを使用して、ソートキーを取得する必要があります。比較対象の2つの行のプロパティにアクセスします。

rows.sort(function(a, b) {
      if (a.sortKey < b.sortKey)
            return -sortDirection;
      if (a.sortKey > b.sortKey)
            return  sortDirection;
      return 0;
});

.dataプロパティへの直接アクセスは、jQueryとそれを実装するために使用されるコードを経由するよりもはるかに高速であるため、大幅な速度の向上が見込まれます。唯一の欠点は、jQueryの抽象データストアの利便性が失われることです（「正しく機能する」ことが保証されているため、どのように機能するかを気にする必要はありません）。 DOM要素に新しいプロパティを作成します）。

注意として、作成者は「expando」という用語を使用して、すべてのJavaScriptオブジェクトのこのプロパティを正確に説明します。必要に応じていつでも新しいプロパティを作成できます。

于 2012-04-07T17:01:58.377 に答える
1

もちろん、次のようにローカル変数に保存するだけです。

rows.sort(function(a, b) {
    var aKey = $(a).data('sortKey');
    var bKey = $(b).data('sortKey');
    if (aKey < bKey) return -sortDirection;
    if (aKey > bKey) return sortDirection;
    return 0;
});​
于 2012-04-07T16:58:53.530 に答える