使用OOP优化多元素切换：徽章单选及评论筛选重构

核心思路 #

将徽章状态管理、评论筛选逻辑封装为独立类，通过封装状态与行为实现代码解耦、复用和易维护性，替代原有冗余的手动DOM操作。

完整实现代码 #

HTML结构

<div class="badge-container">
  <span class="badge active" data-filter="all">全部</span>
  <span class="badge" data-filter="positive">好评</span>
  <span class="badge" data-filter="negative">差评</span>
  <span class="badge" data-filter="neutral">中评</span>
</div>

<div class="comments-container">
  <div class="comment" data-type="positive">这是一条好评内容</div>
  <div class="comment" data-type="negative">这是一条差评内容</div>
  <div class="comment" data-type="neutral">这是一条中评内容</div>
  <div class="comment" data-type="positive">另一条好评内容</div>
</div>

基础样式

.badge {
  padding: 8px 16px;
  margin: 0 8px;
  cursor: pointer;
  border-radius: 20px;
  background-color: #eee;
  transition: background-color 0.2s;
}

.badge.active {
  background-color: #007bff;
  color: #fff;
}

.comment {
  margin: 16px 0;
  padding: 12px;
  border: 1px solid #eee;
  display: none;
}

.comment.show {
  display: block;
}

OOP风格JavaScript

class CommentFilter {
  constructor(options) {
    // 初始化DOM元素与配置
    this.badgeContainer = document.querySelector(options.badgeContainer);
    this.commentsContainer = document.querySelector(options.commentsContainer);
    this.badges = this.badgeContainer.querySelectorAll('.badge');
    this.comments = this.commentsContainer.querySelectorAll('.comment');

    // 绑定事件并初始化默认状态
    this.bindEvents();
    this.filterComments('all');
  }

  // 绑定徽章点击事件
  bindEvents() {
    this.badges.forEach(badge => {
      badge.addEventListener('click', (e) => this.handleBadgeClick(e));
    });
  }

  // 处理徽章点击逻辑
  handleBadgeClick(e) {
    const target = e.target;
    const filterKey = target.dataset.filter;

    this.toggleActiveBadge(target);
    this.filterComments(filterKey);
  }

  // 切换徽章active类
  toggleActiveBadge(activeTarget) {
    this.badges.forEach(badge => badge.classList.remove('active'));
    activeTarget.classList.add('active');
  }

  // 筛选并显示对应评论
  filterComments(filter) {
    this.comments.forEach(comment => {
      if (filter === 'all' || comment.dataset.type === filter) {
        comment.classList.add('show');
      } else {
        comment.classList.remove('show');
      }
    });
  }
}

// 初始化筛选实例
new CommentFilter({
  badgeContainer: '.badge-container',
  commentsContainer: '.comments-container'
});

重构优势 #

• 模块化封装：所有相关逻辑集中在类内，避免全局变量污染，代码结构清晰。
• 可复用性：页面中若存在多组评论筛选模块，只需创建多个CommentFilter实例即可。
• 易维护性：修改筛选规则、徽章样式逻辑时，仅需修改类内对应方法，无需重复修改多处代码。
• 逻辑解耦：状态管理与UI操作分离，降低代码耦合度。

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