0

私はこのような（簡略化された）いくつかのコードで作業しています：

var $form = $('form')
var els = {
  radio: $form.find('input[type=radio]'),
  check: $form.find('input[type=checkbox]')
}

問題のオブジェクトにはform動的に追加された入力が含まれている可能性がありelsますが、フォームが新しい入力を取得した場合、オブジェクトは定義されたときに静的でradioあり、check変更されません。コード全体で頻繁に使用する必要があるelsため、次の簡単な解決策を考え出しました。

var getEls = function () {
  return {
    radio: $form.find('input[type=radio]'),
    check: $form.find('input[type=checkbox]')
  }
}

var foo = function () {
  var els = getEls()
  // do something with `els`
}

これは正常に機能しますが、毎回すべての要素を再度クエリする必要があるため、これでは最高のパフォーマンスが得られない可能性があると思います。これを行うためのより良い方法はありますか？

4

1 に答える 1

1

ループなどで呼び出さない場合はgetEls()、パフォーマンスは良好です。ただし、フォームへの要素の追加を制御するため、コードを合理化する方法がいくつかあります。

プロパティを使用する

フォームのデータプロパティを使用して特定の要素の数を保存し、完全な更新を行う前に保存した要素の数と比較できるようにします。

function() {
    var checkBoxCount = parseInt($form.data("checkbox-count"), 10);
    $("form").append("<input type='checkbox'>");
    // now increment the count and re-save it
    $form.data("checkbox-count", checkBoxCount+1);
};

コレクションを更新する

オブジェクトをdomに追加しているときに、保存したセットにオブジェクトを追加することもできます。

function() {
    var $checkbox = $("<input type='checkbox'>");
    $("form").append($checkbox);
    els.check = els.check.add(checkbox);
};
于 2012-07-25T00:13:48.020 に答える