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

Question

我有一个运行大约 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 表示我必须添加的列数。

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

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

在必须获得大 <ul> 长度的布局中有很多 child ，例如:

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

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

以下是我进行优化所遵循的内容:

• 使用 if - else if 因为只有两种情况非范围情况。 (切换 3-10 个案例)。

• 用减法代替加法

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

Answer 1

我不太确定我是否正确理解了您的问题，但是如果容器中有一定数量的子项与 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>