如何使用ES6类与对象实现图书列表功能，附半成品代码求解决方案

核心实现逻辑 #

• Book类仅做数据承载，构造函数接收图书名称、作者、ISBN三个参数，挂载为实例属性
• UI类封装所有交互方法，全部使用箭头函数避免this指向问题
• 采用事件委托处理动态生成的删除按钮点击事件，避免重复绑定监听

完整代码 #

style.css #

/* 提交按钮样式 */
.btn-default {
  background-color: #212529;
  color: #fff;
}
.btn-default:hover {
  color: #fff;
  opacity: 0.8;
}
/* 删除按钮圆形样式 */
.delete {
  width: 24px;
  height: 24px;
  padding: 0;
  line-height: 22px;
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
}

app.js #

// 获取DOM元素
const formElem = document.getElementById('form');
const titleElem = document.getElementById('title');
const authorElem = document.getElementById('author');
const isbnElem = document.getElementById('isbn');
const tbodyElem = document.getElementById('tbody');

// Book类：用于创建图书实例
class Book {
  constructor(title, author, isbn) {
    this.title = title;
    this.author = author;
    this.isbn = isbn;
  }
}

// UI类：封装所有交互方法
class UI {
  // 输入校验：检查所有字段是否非空
  validateInput = () => {
    return titleElem.value.trim() && authorElem.value.trim() && isbnElem.value.trim();
  }

  // 显示全局提示
  showAlert = (msg, type) => {
    // 移除已存在的提示避免重复
    const existAlert = document.querySelector('.alert');
    if(existAlert) existAlert.remove();

    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type}`;
    alertDiv.textContent = msg;
    // 插入到表单上方
    formElem.parentElement.insertBefore(alertDiv, formElem);
    // 3秒后自动消失
    setTimeout(() => alertDiv.remove(), 3000);
  }

  // 添加图书到列表
  addBookToList = (book) => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td>${book.title}</td>
      <td>${book.author}</td>
      <td>${book.isbn}</td>
      <td><a href="#" class="btn btn-danger btn-sm delete">X</a></td>
    `;
    tbodyElem.appendChild(tr);
  }

  // 删除图书
  deleteBook = (target) => {
    if(target.classList.contains('delete')) {
      target.parentElement.parentElement.remove();
      this.showAlert('图书删除成功', 'success');
    }
  }
}

// 表单提交事件监听
formElem.addEventListener('submit', (e) => {
  e.preventDefault();
  const ui = new UI();

  // 校验输入
  if(!ui.validateInput()) {
    ui.showAlert('所有字段不能为空，请填写完整', 'danger');
    return;
  }

  // 创建图书实例
  const book = new Book(
    titleElem.value.trim(),
    authorElem.value.trim(),
    isbnElem.value.trim()
  );

  // 添加到列表
  ui.addBookToList(book);
  // 提示成功
  ui.showAlert('图书添加成功', 'success');
  // 清空输入框
  titleElem.value = '';
  authorElem.value = '';
  isbnElem.value = '';
});

// 删除事件委托：动态生成的按钮不需要单独绑定监听
tbodyElem.addEventListener('click', (e) => {
  e.preventDefault();
  const ui = new UI();
  ui.deleteBook(e.target);
});

功能验证 #

1. 空值提交：任意字段为空点击提交，会弹出红色错误提示，3秒后自动消失
2. 正常提交：所有字段填写完成后提交，会弹出绿色成功提示，图书信息自动添加到下方表格
3. 删除功能：点击对应图书行右侧的X按钮，整行数据会被移除，同时弹出删除成功提示

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