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

如何提高效率？

1 个答案:

使用属性

更新集合