javascript - 尝试将(简单)函数内部压缩为更高效的代码

Question

我编写了一个简单的函数，用于添加和删除元素(按钮)的类。

function mainBut (){

  ba.classList.add("act2");
  ba.classList.remove("hov")

  bh1.classList.add("hov");
  bh1.classList.remove("act2");
  bh2.classList.add("hov");
  bh2.classList.remove("act2");

  da.classList.remove("none")
  dh1.classList.add("none")
  dh2.classList.add("none")
}

但是随着元素数量的增加，我发现代码可以更好地组织。因为我们可以:

删除:.act2 for (bh1 and bh2) |添加:.hov for (bh1 and bh2) |添加:.none(dh1 和 dh2)。

我想知道是否可以使用 for 循环来完成？或者也许有更好的方法...

Answer 1

您可以使用函数式编程来简化它。磨合小功能并复用。

const add = cls => elm => elm.classList.add(cls);
const remove = cls => elm => elm.classList.remove(cls);
const addAct2 = add("act2");
const addHov = add("hov");
const removeAct2 = remove("act2");
const removeHov = add("hov");
const addNone = add("none");
const removeNone = add("none");

function mainBut() {
  addAct2(ba);
  removeHov(ba);
  addHov(bh1);
  removeAct2(bh1);

  addHov(bh2);
  removeAct2(bh2);

  removeNone(da);
  addNone(dh1);
  addNone(dh2);
}

//更实用

const curry = (fn, arity = fn.length, ...args) =>
  arity <= args.length ? fn(...args) : curry.bind(null, fn, arity, ...args);

const apply = curry((fn, data =[]) => data.map(fn))

function mainBut() {
  apply(removeHov, apply(addAct2, [ba]))
  apply(removeAct2, apply(addHov, [bh1, bh2]))
  apply(removeNone, [da])
  apply(addNone, [da, dh1, dh2])
}