编写面向对象JavaScript：如何脱离PHP实现商品表单的OOP改造？

嘿，这个需求太实用了！把零散的业务逻辑改成面向对象（OOP）风格，能让你的代码结构更清晰、复用性更强，后续维护起来也省心不少。我直接给你一套可落地的实现方案，咱们一步步拆解：

核心思路 #

咱们要把商品表单的状态管理（比如商品行数据、DOM元素引用）和操作逻辑（添加行、删除行、计算总价）封装到一个类里，让每个功能模块职责明确。完全不需要PHP，纯前端就能搞定。

完整代码实现 #

class ProductForm {
  // 构造函数：初始化表单容器和基础配置
  constructor(containerSelector) {
    this.container = document.querySelector(containerSelector);
    if (!this.container) {
      throw new Error('找不到表单容器元素！');
    }

    // 初始化DOM元素引用
    this.addBtn = this.container.querySelector('.add-product-btn');
    this.totalElement = this.container.querySelector('.total-price');
    this.productList = this.container.querySelector('.product-list');
    
    // 商品行的HTML模板（用模板字符串更易维护）
    this.productRowTemplate = `
      <div class="product-row">
        <input type="text" class="product-name" placeholder="商品名称" />
        <input type="number" class="product-price" step="0.01" min="0" placeholder="单价" />
        <input type="number" class="product-quantity" min="1" placeholder="数量" value="1" />
        <button class="delete-product-btn">删除</button>
      </div>
    `;

    // 初始化表单
    this.init();
  }

  // 初始化方法：绑定事件、添加默认行
  init() {
    this.bindEvents();
    // 默认添加一行商品
    this.addProductRow();
  }

  // 绑定所有事件
  bindEvents() {
    this.addBtn.addEventListener('click', () => this.addProductRow());
    
    // 监听所有输入框的变化，实时计算总价
    this.container.addEventListener('input', (e) => {
      if (e.target.classList.contains('product-price') || e.target.classList.contains('product-quantity')) {
        this.calculateTotal();
      }
    });

    // 委托删除按钮的点击事件（因为行是动态创建的）
    this.productList.addEventListener('click', (e) => {
      if (e.target.classList.contains('delete-product-btn')) {
        this.deleteProductRow(e.target.closest('.product-row'));
      }
    });
  }

  // 添加新的商品行
  addProductRow() {
    const rowElement = document.createElement('div');
    rowElement.innerHTML = this.productRowTemplate.trim();
    this.productList.appendChild(rowElement);
    // 新增行后自动计算总价
    this.calculateTotal();
  }

  // 删除指定的商品行
  deleteProductRow(rowElement) {
    if (this.productList.children.length <= 1) {
      alert('至少保留一行商品哦！');
      return;
    }
    rowElement.remove();
    this.calculateTotal();
  }

  // 计算并更新总价
  calculateTotal() {
    let total = 0;
    const rows = this.productList.querySelectorAll('.product-row');
    
    rows.forEach(row => {
      const price = parseFloat(row.querySelector('.product-price').value) || 0;
      const quantity = parseInt(row.querySelector('.product-quantity').value) || 0;
      total += price * quantity;
    });

    this.totalElement.textContent = `总价：${total.toFixed(2)} 元`;
  }
}

// 用法：页面加载完成后实例化
document.addEventListener('DOMContentLoaded', () => {
  new ProductForm('#product-form-container');
});

对应的HTML结构参考：

<div id="product-form-container">
  <h3>商品表单</h3>
  <div class="product-list"></div>
  <button class="add-product-btn">添加商品</button>
  <div class="total-price">总价：0.00 元</div>
</div>

关键细节解释 #

• 类的职责划分：把表单的所有操作都封装在ProductForm类里，实例化时只需传入容器选择器，就能快速创建一个可独立运行的商品表单组件。
• 事件委托：删除按钮用事件委托绑定，避免给每一行都单独绑定事件，性能更好，也兼容动态创建的元素。
• 状态与方法分离：DOM元素引用、模板字符串作为实例属性，添加、删除、计算等操作作为实例方法，逻辑清晰，修改某一个功能不会影响其他部分。
• 实时计算：监听输入框的input事件，用户修改单价或数量时自动更新总价，提升交互体验。

这样改造后，你可以轻松创建多个商品表单实例，或者在需要扩展功能（比如添加商品分类、保存到本地存储）时，直接在类里新增方法即可，非常灵活！

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