图书售卖网站弹窗代码冗余问题的优化方案咨询

你当前的核心问题是重复创建结构一致的弹窗导致代码冗余、维护成本高，解决思路是数据与结构分离——把所有图书的详情数据统一管理，只保留一个通用弹窗模板，通过JavaScript动态填充数据并控制显示。

1. 统一管理图书数据 #

把所有图书的详情整理成JavaScript数组，后续新增/修改图书仅需修改这个数组，无需改动HTML结构：

const books = [
  {
    id: 'remalmok',
    imgSrc: 'images/remalmok.jpg',
    publisher: 'Magveto kiado',
    pages: 241,
    language: 'Hungarian',
    publishDate: 1988,
    originalPrice: 5000,
    newPrice: 4999,
    stockStatus: 'In stock!',
    transport: '1-3 days'
  },
  // 新增图书直接在这里添加对象即可
  // { id: "another-book", imgSrc: "xxx.jpg", ... }
];

2. 简化图书列表HTML #

给每个图书元素添加data-book-id属性关联数据中的图书ID，无需给每个图片单独设置唯一ID：

<!-- 示例图书行 -->
<div class="book-list-row">
  <div class="book-list-row-element" data-book-id="remalmok">
    <img class="images" src="images/remalmok.jpg" alt="Remalmok book cover">
  </div>
  <!-- 其他图书元素仅需修改data-book-id和图片src -->
</div>

3. 保留一个通用弹窗模板 #

删除所有重复的弹窗，只写一套通用结构，用通用类名替换和具体图书绑定的类名，初始设置为隐藏：

<!-- 通用弹窗，初始隐藏 -->
<div class="popup-book" style="display: none;">
  <div class="popup-book-content">
    <img class="popup-book-close" src="images/close.png" alt="Close popup">
    <div class="popup-book-header">
      <img class="popup-book-img" src="" alt="Book cover">
      <div class="popup-book-data">
        <p>Publisher: <span class="publisher"></span></p>
        <p>Number of pages: <span class="pages"></span></p>
        <p>Language: <span class="language"></span></p>
        <p>Date of public: <span class="publish-date"></span></p>
      </div>
    </div>
    <div class="popup-book-body">
      <div class="body-content">
        <p class="body-content-p">Original price: <span class="original-price"></span></p>
        <p class="body-content-p">New price: <span class="new-price"></span></p>
        <p class="body-content-p"><span class="stock-status"></span></p>
        <p class="body-content-p">Transport: <span class="transport"></span></p>
      </div>
      <p class="basket">Add to basket</p>
    </div>
  </div>
</div>

4. 用JavaScript动态填充数据并控制弹窗 #

编写逻辑监听图书点击事件，匹配对应数据填充到弹窗，控制弹窗的显示与隐藏：

// 获取通用弹窗和关闭按钮
const popup = document.querySelector('.popup-book');
const closeBtn = popup.querySelector('.popup-book-close');

// 给所有图书元素绑定点击事件
document.querySelectorAll('.book-list-row-element').forEach(element => {
  element.addEventListener('click', () => {
    // 获取当前图书的ID
    const bookId = element.dataset.bookId;
    // 从数据源匹配对应图书
    const book = books.find(item => item.id === bookId);
    
    if (!book) return;
    
    // 填充弹窗数据
    popup.querySelector('.popup-book-img').src = book.imgSrc;
    popup.querySelector('.publisher').textContent = book.publisher;
    popup.querySelector('.pages').textContent = book.pages;
    popup.querySelector('.language').textContent = book.language;
    popup.querySelector('.publish-date').textContent = book.publishDate;
    popup.querySelector('.original-price').textContent = book.originalPrice;
    popup.querySelector('.new-price').textContent = book.newPrice;
    popup.querySelector('.stock-status').textContent = book.stockStatus;
    popup.querySelector('.transport').textContent = book.transport;
    
    // 显示弹窗
    popup.style.display = 'block';
  });
});

// 关闭弹窗逻辑
closeBtn.addEventListener('click', () => {
  popup.style.display = 'none';
});

// 点击弹窗外部区域关闭（可选优化）
popup.addEventListener('click', (e) => {
  if (e.target === popup) {
    popup.style.display = 'none';
  }
});

额外优化建议 #

• 用CSS类控制弹窗显示/隐藏，替代直接修改style.display，更符合样式与逻辑分离的原则：

  .popup-book {
    display: none;
    /* 其他弹窗基础样式 */
  }
  .popup-book.active {
    display: block;
  }
  

  对应JS代码改为popup.classList.add('active')和popup.classList.remove('active')。
• 如果图书数量较多，可以使用模板字符串或轻量模板引擎（如Handlebars）简化数据渲染逻辑，进一步提升代码可维护性。

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