javascript - 如何重新编写此函数的比较和方法以提高效率？

我有一个运行大约30-40次的函数，如果满足条件，它可以帮助我向某些布局添加特定的类。不幸的是，事实证明，这对于手机的CPU来说有点费劲：

function addClassOnRequirement(target_div, target_div_unpacked, class_to_add, cols) {

    var len_list = $(target_div).length;

    // If layout has 2 columns
    if(cols === 2) {
        // If the layout has an odd number of items, add the said class.
        if (len_list % 2 === 1) {
            $(target_div_unpacked).addClass(class_to_add);
        }
        // If layout has 3 columns
    } else if(cols === 3) {
        // If the layout's number of items (3 on each row) has the number ~5 or so
        // add this class. If 2 rows, 3 items on first row, 2  items on
        // second row exist, there
        // should be 6, so add this class to do some CSS jumble since
        // they're 5.
        if (((len_list - 2) % 3) === 0) {
            $(target_div_unpacked).addClass(class_to_add);
        }
    }
}

target_div表示布局<ul>的选择器。

target_div_unpacked表示“纯”选择器，不带有“ ul”之类的标签

class_to_add表示要添加到target_div_unpacked的类的名称

cols代表我必须添加的cols数量。

所有这些都是硬编码的，并且不是从其他函数生成的，就像这样：

addClassOnRequirement(".posts-layout3 li", ".posts-layout3", "col-3-last2-child-50-width", 3);

在必须具有大量子元素的大<ul>长度的布局中，例如：

<ul class="layout-to-test">
    <li></li>
    <li></li>
    <li></li>
    ..
    ..
    <li></li>
</ul>

情况变得更糟，因为它必须遍历所有内容，获取长度等。

这是我遵循的优化方法：


使用if-else if，因为只有两种情况，精确
非范围案件。 （切换3-10例）。
用减法代替加法


不幸的是，似乎无论如何，该功能仍然会阻塞。我该如何改善？

最佳答案

我不确定我是否正确理解了您的问题，但是如果容器中有一定数量的与childSelector匹配的子代，则此函数应该将类添加到容器中。而且它也应该表现出色。

// add  some lists to the dom
function setUp(lists, elementsPerList) {
  var fragment = document.createDocumentFragment();
  for(var i = 0; i < lists; ++i) {
    let list = document.createElement('ul');
    list.classList.add('test-layout');
    for(var j = 0; j < elementsPerList; ++j) {
      var element = document.createElement('li');
      element.textContent = 'list item ' + i + '.' + j;
      list.appendChild(element);
    }
    fragment.appendChild(list);
  }
  document.body.appendChild(fragment);
}
setUp(200, 11);
// add a button to run the function
document.getElementById('test').addEventListener('click', function() { addClassOnRequirement('li', '.test-layout', 'test', 3) })
// relevant part
function addClassOnRequirement(childSelector, containerSelector, klass, cols) {
    if(cols !== 2 && cols !== 3) return;
    var containers  = document.querySelectorAll(containerSelector);

    for(var i = 0; i < containers.length; ++i) {
      var container = containers[i];
      var children = container.querySelectorAll(childSelector);
      if(children.length % cols !== 0) {
        container.classList.add(klass);
      }
    }
}

.test {
  background: red;
  opacity: .5;
  width: 50%;
}

<button id="test">test</button>