如何提高效率？

Question

我正在使用這樣的代碼（簡化）：

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`
}

這可以正常工作，但我認為這可能無法提供最佳性能，因為它每次必須再次查詢所有元素。 有一個更好的方法嗎？

Answer 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);
};