代码精简求助：多产品元素JQuery弹窗冗余代码优化

Got it! Let's clean up that bloated popup module and turn it into something sleek and maintainable. Here's how I'd refactor it, with clear improvements over your current code:

Key Optimizations We'll Implement #

• Event Delegation: Replace per-product event bindings with a single parent binding to cut down on memory usage and support dynamic product additions.
• Reusable Class/Component: Encapsulate all popup logic into a single class so you don't repeat code across products.
• DOM Reuse: Create the popup element once instead of generating a new one every time a product is clicked.
• Centralized Configuration: Keep customizable settings (like selectors, classes) in one place for easy tweaks.

Example Refactored Code #

First, let's assume your original code looked something like this (the bloated version):

// Redundant original code example
document.querySelectorAll('.product').forEach(product => {
  product.addEventListener('click', () => {
    const popup = document.createElement('div');
    popup.className = 'product-popup';
    popup.innerHTML = `
      <h3>${product.dataset.name}</h3>
      <p>${product.dataset.description}</p>
      <button class="close-btn">Close</button>
    `;
    document.body.appendChild(popup);
    
    popup.querySelector('.close-btn').addEventListener('click', () => popup.remove());
    popup.addEventListener('click', e => e.target === popup && popup.remove());
  });
});

Here's the cleaned-up, efficient version:

class ProductPopupManager {
  constructor(customConfig = {}) {
    // Default configuration (override with customConfig if needed)
    this.config = {
      productSelector: '.product',
      parentContainer: document.querySelector('.products-container') || document,
      popupClass: 'product-popup',
      closeBtnClass: 'close-btn',
      ...customConfig
    };

    this.popup = null;
    this.init();
  }

  // Create the popup element once and reuse it
  #createPopup() {
    this.popup = document.createElement('div');
    this.popup.className = this.config.popupClass;
    this.popup.innerHTML = `
      <div class="popup-content"></div>
      <button class="${this.config.closeBtnClass}">Close</button>
    `;
    document.body.appendChild(this.popup);
    this.#bindCloseEvents();
  }

  // Bind close logic once, not per popup
  #bindCloseEvents() {
    // Close button click
    this.popup.querySelector(`.${this.config.closeBtnClass}`)
      .addEventListener('click', () => this.hidePopup());
    
    // Click outside content to close
    this.popup.addEventListener('click', e => {
      if (e.target === this.popup) this.hidePopup();
    });
  }

  // Update popup content and show it
  showPopup(productData) {
    if (!this.popup) this.#createPopup();
    
    this.popup.querySelector('.popup-content').innerHTML = `
      <h3>${productData.name}</h3>
      <p>${productData.description}</p>
    `;
    this.popup.style.display = 'block';
  }

  // Hide the popup instead of destroying it
  hidePopup() {
    this.popup.style.display = 'none';
  }

  // Initialize event delegation on parent container
  init() {
    this.config.parentContainer.addEventListener('click', e => {
      const product = e.target.closest(this.config.productSelector);
      if (product) {
        const productData = {
          name: product.dataset.name,
          description: product.dataset.description
        };
        this.showPopup(productData);
      }
    });
  }
}

// Initialize the popup manager (customize config if needed)
new ProductPopupManager({
  popupClass: 'custom-product-popup' // Example custom setting
});

Why This Works Better #

1. Event Delegation: We only bind one click event to the parent container (or document) instead of hundreds to individual products. This saves memory and automatically works for dynamically added products.
2. Single Popup Instance: The popup is created once and reused—no more creating/destroying DOM elements every time, which is faster and reduces layout thrashing.
3. Encapsulated Logic: All popup-related code lives in one class. If you need to change how popups look or behave, you only modify the class instead of hunting through repeated code.
4. Flexible Configuration: Adjust selectors, classes, or parent containers without rewriting core logic—just pass a custom config object when initializing.

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