代码优化：样式展示——基于会话的HTML显隐函数简化咨询

嘿，很高兴帮你搞定代码简化的问题！这类场景通常是因为重复逻辑导致代码冗余，咱们先从最常见的原始代码场景入手，一步步优化。

假设你的原始代码大概是这样的（两个逻辑高度相似的函数）：

function showSessionA(sessionState) {
  if (sessionState === 'loggedIn') {
    document.getElementById('sessionA-content').innerHTML = '<p>欢迎回来，会话A用户！</p>';
    document.getElementById('sessionA-content').style.display = 'block';
  } else {
    document.getElementById('sessionA-content').style.display = 'none';
  }
}

function showSessionB(sessionState) {
  if (sessionState === 'authorized') {
    document.getElementById('sessionB-content').innerHTML = '<p>已授权，会话B内容已解锁！</p>';
    document.getElementById('sessionB-content').style.display = 'block';
  } else {
    document.getElementById('sessionB-content').style.display = 'none';
  }
}

这两个函数的核心逻辑都是根据状态切换元素的显示/隐藏+更新内容，差异只在于会话对应的DOM选择器、状态判断条件、以及显示的内容，完全可以把公共逻辑抽离出来，下面是几种优质的简化方案：

方案1：提取通用函数（最直接的精简方式） #

把重复的逻辑封装成一个通用函数，将差异部分作为参数传入：

function handleSessionDisplay(sessionSelector, activeState, activeContent) {
  const element = document.querySelector(sessionSelector);
  if (!element) return; // 避免DOM不存在报错

  if (sessionState === activeState) {
    element.innerHTML = activeContent;
    element.style.display = 'block';
  } else {
    element.style.display = 'none';
  }
}

// 使用的时候只需要传不同参数就行：
handleSessionDisplay('#sessionA-content', 'loggedIn', '<p>欢迎回来，会话A用户！</p>');
handleSessionDisplay('#sessionB-content', 'authorized', '<p>已授权，会话B内容已解锁！</p>');

这样一来，不管你有多少个会话，都只需要调用这个通用函数，不用重复写判断逻辑和DOM操作。

方案2：用配置对象管理会话（扩展性更强） #

如果后续可能增加更多会话，用配置对象来统一管理所有会话的规则会更清晰，维护成本更低：

// 先定义所有会话的配置
const sessionConfigs = [
  {
    selector: '#sessionA-content',
    activeState: 'loggedIn',
    activeContent: '<p>欢迎回来，会话A用户！</p>'
  },
  {
    selector: '#sessionB-content',
    activeState: 'authorized',
    activeContent: '<p>已授权，会话B内容已解锁！</p>'
  }
];

// 通用处理函数
function updateAllSessions(currentStates) {
  sessionConfigs.forEach(config => {
    const element = document.querySelector(config.selector);
    if (!element) return;

    const isActive = currentStates[config.selector] === config.activeState;
    element.innerHTML = isActive ? config.activeContent : '';
    element.style.display = isActive ? 'block' : 'none';
  });
}

// 使用时传入当前所有会话的状态：
updateAllSessions({
  '#sessionA-content': 'loggedIn',
  '#sessionB-content': 'unauthorized'
});

这种方式的好处是，新增会话只需要在sessionConfigs里加一条配置，完全不用修改函数逻辑，非常符合开放封闭原则。

方案3：结合CSS类切换（更优雅的样式控制） #

如果你的显示/隐藏只是样式变化，推荐用CSS类来控制，而不是直接操作style.display，这样代码更简洁，也符合关注点分离（样式交给CSS，JS只负责状态切换）：

/* 先写好CSS类 */
.session-content {
  display: none;
}
.session-content.active {
  display: block;
}

function toggleSession(sessionSelector, isActive, activeContent) {
  const element = document.querySelector(sessionSelector);
  if (!element) return;

  element.classList.toggle('active', isActive);
  if (isActive) {
    element.innerHTML = activeContent;
  }
}

// 使用：
toggleSession('#sessionA-content', sessionAState === 'loggedIn', '<p>欢迎回来，会话A用户！</p>');
toggleSession('#sessionB-content', sessionBState === 'authorized', '<p>已授权，会话B内容已解锁！</p>');

这种方式把样式逻辑从JS里剥离出来，代码更清爽，也更容易修改样式（不用动JS）。

核心优化思路总结 #

• 抽离公共逻辑：把重复的DOM操作、条件判断封装成通用函数，避免代码冗余；
• 用参数/配置管理差异：将不同会话的特有信息（选择器、状态、内容）通过参数或配置对象传递，让函数更通用；
• 关注点分离：样式控制尽量交给CSS，JS只负责状态和内容的更新。

内容的提问来源于stack exchange，提问作者codeDragon