条件与循环的组合运用，打造动态响应式界面！

条件分支：根据条件选择代码块

条件分支允许根据某个条件选择要执行的代码块。常见的条件结构包括 if-else 和 switch-case 语句：

• if-else 语句：基于布尔表达式执行特定操作，否则执行替代操作。
• switch-case 语句：基于变量值在多个情况之间进行选择。

循环：重复代码块

循环结构允许重复执行一个代码块，直到满足某个条件。常见的循环结构包括 while、do-while 和 for 循环：

• while 循环：循环持续执行，只要循环条件为真。
• do-while 循环：循环至少执行一次，然后继续执行，只要循环条件为真。
• for 循环：循环一个指定次数，或在特定范围或值列表中迭代。

组合条件分支和循环

通过组合条件分支和循环，可以创建高度动态的界面，根据用户输入或其他事件实时调整。以下是一些示例：

• 动态列表渲染：使用循环来迭代数据列表并根据条件呈现不同的内容。
• 交互式表单：使用条件分支来验证用户输入并提供适当的反馈。
• 响应式导航菜单：使用循环来生成菜单项并根据窗口大小调整菜单布局。
• 渐进加载：使用循环来逐步加载数据或内容，根据用户的滚动或其他动作。
• 动画效果：使用循环和条件分支来创建复杂的动画效果，例如淡入淡出或滑动过渡。

示例：动态响应式表格

为了演示，让我们构建一个动态响应式表格，该表格根据屏幕大小调整列宽和顺序：

function createTable() {
  const table = document.createElement("table");
  const headings = ["Name", "Age", "Occupation"];

  // 根据屏幕宽度调整列宽
  const width = window.innerWidth;
  if (width < 768) {
    table.style.width = "100%";
  } else {
    table.style.width = "500px";
  }

  // 根据屏幕宽度调整列顺序
  if (width < 768) {
    headings.unshift("Occupation");
  }

  // 创建 table 头部
  const headerRow = table.createTHead().insertRow();
  headings.forEach(heading => {
    const th = document.createElement("th");
    th.textContent = heading;
    headerRow.appendChild(th);
  });

  // 根据屏幕宽度填充数据
  const data = [["John", 25, "Software Engineer"], ["Jane", 30, "Doctor"], ["Bob", 40, "Teacher"]];
  if (width < 768) {
    data.forEach(row => {
      const tr = table.insertRow();
      const [occupation, name, age] = row;
      tr.appendChild(createCell(occupation));
      tr.appendChild(createCell(name));
      tr.appendChild(createCell(age));
    });
  } else {
    data.forEach(row => {
      const tr = table.insertRow();
      const [name, age, occupation] = row;
      tr.appendChild(createCell(name));
      tr.appendChild(createCell(age));
      tr.appendChild(createCell(occupation));
    });
  }

  return table;

  function createCell(value) {
    const td = document.createElement("td");
    td.textContent = value;
    return td;
  }
}

const tableContainer = document.getElementById("table-container");
tableContainer.appendChild(createTable());

// 在窗口大小更改时动态调整表格
window.addEventListener("resize", () => {
  tableContainer.removeChild(tableContainer.firstChild);
  tableContainer.appendChild(createTable());
});

结论

通过组合条件分支和循环，可以创建高度动态且响应式的用户界面。这些结构使程序员能够根据用户输入、设备特性或其他实时事件动态调整内容和行为，从而提供最佳的用户体验。