优雅改造 `if-else if-else` 代码，实现按钮文本动态切换

2024-03-01 07:02:43

优雅地改造 if-else if-else 代码以实现动态文本切换

作为一名经验丰富的程序员，我常常需要优化现有代码，使其更有效、更灵活。最近，我遇到了一个挑战，需要修改一段 if - else if - else 代码，以实现按钮文本内容的动态切换。今天，我将分享我的解决方案，并深入探讨优化 if-else 结构以提高代码可读性、可维护性和性能。

问题

目标是修改 if - else if - else 代码，使其满足以下条件：

当点击按钮时，按钮文本依次切换为三种不同的文本。
当再次点击按钮时，按钮只能显示两种不同的文本，且不能切换回之前的文本。

解决方法

为了解决这个问题，我使用了一个名为 state 的变量来跟踪按钮的状态。它的初始值设为 0。当用户单击按钮时，按钮的 onclick 事件监听器调用 changeText() 函数。该函数使用 switch 语句根据 state 的值更改按钮的文本内容。

优化 `if-else` 结构

为了优化 if - else if - else 结构，我采取了以下步骤：

使用 switch 语句： switch 语句允许我们根据变量的值执行特定的代码块，从而避免了嵌套 if 语句。这使得代码更加清晰易读。
避免冗余： 通过使用 switch 语句，我避免了冗余的 else 语句，从而简化了代码。
使用状态机： 使用 state 变量作为状态机，使代码能够跟踪按钮的不同状态，并根据这些状态执行适当的操作。

代码示例

以下是优化后的代码示例：

const priority = document.querySelector('.todo-priority');
let state = 0;

const changeText = () => {
  switch (state) {
    case 0:
      priority.textContent = 'Задача на один день';
      state++;
      break;
    case 1:
      priority.textContent = 'Важная задача';
      state++;
      break;
    case 2:
      priority.textContent = 'Повседневная задача';
      state = 0;
      break;
  }
};

priority.onclick = function() {
  changeText();
};