如何精简身份验证页面表单切换的DOM操作JS代码？

你的代码实现了登录、注册、忘记密码三个视图的切换，但直接操作内联样式会导致样式与逻辑耦合，重复代码也较多。以下是具体优化方向和最终代码：

1. 用CSS类替代内联样式操作 #

把视图切换的样式逻辑移到CSS中，JS仅负责切换类名，既符合关注点分离原则，也让样式调整更便捷，还能轻松添加入场动画提升体验：

/* 新增的CSS样式 */
.header-auth__login, .signin-form {
  transition: margin-left 0.3s ease;
}
/* 注册视图状态 */
.auth-view--signup .header-auth__login,
.auth-view--signup .signin-form {
  margin-left: -33.33%;
}
/* 忘记密码视图状态 */
.auth-view--forgot .header-auth__login,
.auth-view--forgot .signin-form {
  margin-left: -66.66%;
}
.auth-view--forgot .form-controls {
  display: none;
}

2. 统一管理视图状态 #

给包含所有表单元素的父容器（比如.auth-container，需根据实际HTML结构调整）添加状态类，通过切换这个类来控制所有关联元素的样式，避免重复操作多个DOM节点。

3. 简化事件绑定与逻辑复用 #

提取重复的视图重置逻辑为函数，统一处理所有切换按钮的事件，减少代码冗余。

优化后的JavaScript代码 #

// 集中获取DOM元素，统一管理选择器
const authContainer = document.querySelector('.auth-container');
const buttons = {
  signIn: document.querySelector('.form-controls__label-signin'),
  signUp: document.querySelector('.form-controls__label-signup'),
  forgot: document.querySelector('.signin-form .forgot-link'),
  forgotBack: document.querySelector('.forgot-form .forgot-back')
};

// 重置视图到登录状态的复用函数
function resetToSignInView() {
  authContainer.classList.remove('auth-view--signup', 'auth-view--forgot');
}

// 绑定事件
buttons.signUp.addEventListener('click', () => {
  resetToSignInView();
  authContainer.classList.add('auth-view--signup');
});

buttons.forgot.addEventListener('click', () => {
  resetToSignInView();
  authContainer.classList.add('auth-view--forgot');
});

buttons.forgotBack.addEventListener('click', resetToSignInView);
buttons.signIn.addEventListener('click', resetToSignInView);

额外优化建议 #

如果按钮数量较多，可使用事件委托进一步简化代码：

// 事件委托版本
authContainer.addEventListener('click', (e) => {
  const target = e.target.closest('.auth-view-toggle');
  if (!target) return;

  resetToSignInView();
  const viewType = target.dataset.view;
  if (viewType === 'signup' || viewType === 'forgot') {
    authContainer.classList.add(`auth-view--${viewType}`);
  }
});

对应的HTML按钮需要添加统一类名和data-view属性：

<button class="form-controls__label-signin auth-view-toggle" data-view="signin">登录</button>
<button class="form-controls__label-signup auth-view-toggle" data-view="signup">注册</button>
<a class="forgot-link auth-view-toggle" data-view="forgot">忘记密码？</a>
<button class="forgot-back auth-view-toggle" data-view="signin">返回登录</button>

优化后的代码可读性、可维护性大幅提升，后续调整样式只需修改CSS，新增视图也仅需添加对应CSS类和按钮的data-view属性即可。

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