javascript - 当我需要不同的操作时，我应该如何使这段代码变干？

Question

背景

我有一个方法可以设置新的事件状态，并删除上一个项目的旧事件状态。看起来像这样

if (this.previousActiveItem) {
    const { element, index } = this.previousActiveItem;
    element.classList.remove('active');
    this.items[index - 1].element.classList.remove('active-sibling');
    this.items[index + 1].element.classList.remove('active-sibling');

}
const { element, index } = this.activeItem;
element.classList.add('active');
this.items[index - 1].element.classList.add('active-sibling');
this.items[index + 1].element.classList.add('active-sibling');

正如您所看到的，它不是 DRY，因为唯一的区别是主要目标不同，并且操作 remove 或 add 不同。

问题

如何将代码编写成可重用的函数，

我所知道的

我可以使用将元素作为变量的函数轻松修复第一部分，如下所示

manipulateItem (item) {
    const { element, index } = item;
    element.classList.add('active');
    this.items[index - 1].element.classList.[add || remove]('active-sibling');
    this.items[index + 1].element.classList.[add || remove]('active-sibling');
}

但是由于参数相同，我该如何交换函数调用。我不想用一个大的 if 语句让它变得臃肿。

我如何实现这一目标？

Answer 1

您可以按如下方式访问该函数，因为 classList 是一个对象:

manipulateItem (item, isAdd) {
    const { element, index } = item;
    element.classList[isAdd ? "add" : "remove"]('active');
    this.items[index - 1].element.classList[isAdd ? 'add' : 'remove']('active-sibling');
    this.items[index + 1].element.classList[isAdd ? 'add' : 'remove']('active-sibling');
}

this.items = [];
document.querySelectorAll("div.div").forEach((element, index) => {
  this.items.push({
    element: element,
    index: index
  });
});

function manipulateItem(item, isAdd) {
  const {
    element,
    index
  } = item;
  element.classList[isAdd ? "add" : "remove"]('active');
  this.items[index - 1].element.classList[isAdd ? 'add' : 'remove']('active-sibling');
  this.items[index + 1].element.classList[isAdd ? 'add' : 'remove']('active-sibling');
}

function move() {
  var activeElement = document.querySelector("div.active");
  manipulateItem(this.items[1], false);
  manipulateItem(this.items[2], true);
}

.active-sibling {
  color: blue;
}

.active {
  color: green;
}

<div class="div active-sibling">1</div>
<div class="div active">2</div>
<div class="div active-sibling">3</div>
<div class="div">4</div>
<div class="div">5</div>
<button onclick="move();">move</button>