其实是个代码优化的小例子,用「重构」这个词有点重了,但大工程宜从小处起步。再有是便于归类。

我的理解,重构不只有自顶向下的大局设计,也有自底向上的渐进式改善。

类似的例子很简单,不存在能不能做,只有愿不愿做。管中窥豹,大致能反映些对代码质量的态度。

0

let showMenu = false;

function toggleMenu() {
  if (!showMenu) {
    menu.classList.add("show");
    showMenu = true;
  } else {
    menu.classList.remove("show");
    showMenu = false;
  }
}

1

脑子不清楚的时候,应该是 true / false 也是有可能算错的。虽然只是调试一次的事情,但保不齐有人自己不测试。直接用否定运算避免在这个环节出错,而且指明了第二步可以抽取出的共同逻辑

let showMenu = false;

function toggleMenu() {
  if (!showMenu) {
    menu.classList.add("show");
    showMenu = !showMenu;
  } else {
    menu.classList.remove("show");
    showMenu = !showMenu;
  }
}

2

let showMenu = false;

function toggleMenu() {
  if (!showMenu) {
    menu.classList.add("show");
  } else {
    menu.classList.remove("show");
  }
  showMenu = !showMenu;
}

本优化示例共减少代码一行(如果程序员的工作量是按照代码行数来考评的话……)

+

let showMenu = false;

function toggleMenu() {
  if (showMenu) {
    menu.classList.remove("show");
  } else {
    menu.classList.add("show");
  }
  showMenu = !showMenu;
}

布尔变量的命名避免使用有否定意义的词汇

布尔变量的判断也尽量避免否定以及随之而来的否定之否定(有人觉得 !showMenu 逻辑很通顺,这部分暂时没想好怎么表述得更好,总之是尽量简单吧)

至于程序初始状态导致的代码运行效率什么的,我编译原理学得不好,但是我听说适量的程序员的心力比适量的机器运算能力更珍贵。

那种程序慢到天怒人怨了才做的性能优化,不是这个小例子要解决的问题。