如何通过ES6继承基类实现模块化动态表单开发？

Got it, let's break down how to build this modular, inheritable form system step by step using ES6 classes and native modules—no Webpack needed. Here's a complete implementation that hits all your requirements:

1. First, Set Up the Base HTML #

We'll use native ES modules, so make sure to add type="module" to your script tags. We'll also include Bootstrap for styling:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modular Registration Form</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom styles for our form -->
  <style>
    .custom-form {
      max-width: 600px;
      margin: 2rem auto;
      padding: 2rem;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      background-color: #f8f9fa;
    }
    .custom-input:focus, .custom-select:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
    }
  </style>
</head>
<body>
  <div class="container">
    <h2 class="text-center mb-4">User Registration</h2>
    <div id="registration-form-container"></div>
  </div>

  <!-- Bootstrap JS (for optional validation features) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <!-- Load our form module -->
  <script type="module">
    import RegistrationForm from './registration-form.js';
    new RegistrationForm('#registration-form-container');
  </script>
</body>
</html>

2. Create the BasicForm Base Class #

This class handles all the repetitive form logic—rendering fields, adding Bootstrap classes, and providing helper methods for dynamic behavior. It's designed to be extended by specific form types:

// basic-form.js
export default class BasicForm {
  constructor(containerSelector, fields) {
    this.container = document.querySelector(containerSelector);
    this.fields = fields;
    this.formElement = null;
    this.init();
  }

  init() {
    // Create base form with Bootstrap + custom classes
    this.formElement = document.createElement('form');
    this.formElement.classList.add('needs-validation', 'custom-form');
    this.container.appendChild(this.formElement);

    // Hook methods for subclass customization
    this.beforeRender();
    this.renderFields();
    this.afterRender();
  }

  // Empty hooks for subclasses to override
  beforeRender() {}
  afterRender() {}

  renderFields() {
    this.fields.forEach(field => {
      // Skip fields that don't meet their conditional rule
      if (field.condition && !field.condition(this)) return;

      const fieldGroup = document.createElement('div');
      fieldGroup.classList.add('mb-3', 'form-group');
      fieldGroup.dataset.fieldName = field.name;

      // Add label if provided
      if (field.label) {
        const label = document.createElement('label');
        label.setAttribute('for', field.name);
        label.classList.add('form-label');
        label.textContent = field.label;
        fieldGroup.appendChild(label);
      }

      // Render appropriate input type
      let input;
      switch (field.type) {
        case 'select':
          input = this.renderSelect(field);
          break;
        case 'checkbox':
          input = this.renderCheckbox(field);
          break;
        default: // text, email, number, password, etc.
          input = this.renderTextInput(field);
      }

      fieldGroup.appendChild(input);
      this.formElement.appendChild(fieldGroup);
    });
  }

  renderTextInput(field) {
    const input = document.createElement('input');
    input.type = field.type || 'text';
    input.name = field.name;
    input.id = field.name;
    input.classList.add('form-control', 'custom-input');
    input.required = field.required || false;
    input.placeholder = field.placeholder || '';
    return input;
  }

  renderSelect(field) {
    const select = document.createElement('select');
    select.name = field.name;
    select.id = field.name;
    select.classList.add('form-select', 'custom-select');
    select.required = field.required || false;

    // Add empty default option if needed
    if (field.includeEmptyOption) {
      const emptyOption = document.createElement('option');
      emptyOption.value = '';
      emptyOption.textContent = 'Select an option';
      select.appendChild(emptyOption);
    }

    // Add provided options
    field.options.forEach(option => {
      const opt = document.createElement('option');
      opt.value = option.value;
      opt.textContent = option.label;
      select.appendChild(opt);
    });

    return select;
  }

  renderCheckbox(field) {
    const wrapper = document.createElement('div');
    wrapper.classList.add('form-check');

    const input = document.createElement('input');
    input.type = 'checkbox';
    input.name = field.name;
    input.id = field.name;
    input.classList.add('form-check-input', 'custom-checkbox');
    input.checked = field.defaultChecked || false;

    const label = document.createElement('label');
    label.classList.add('form-check-label');
    label.setAttribute('for', field.name);
    label.textContent = field.label;

    wrapper.appendChild(input);
    wrapper.appendChild(label);
    return wrapper;
  }

  // Watch a field for changes and trigger a callback
  watchField(fieldName, callback) {
    const field = this.formElement.querySelector(`[name="${fieldName}"]`);
    if (!field) return;

    field.addEventListener('change', (e) => callback(e.target.value, e.target));
  }

  // Show/hide a field group by name
  toggleFieldGroup(fieldName, show) {
    const group = this.formElement.querySelector(`[data-field-name="${fieldName}"]`);
    if (!group) return;
    group.style.display = show ? 'block' : 'none';
  }
}

3. Build the RegistrationForm Subclass #

This class extends BasicForm and defines your specific form fields. All you need to do is modify the fields array to add/remove/update fields—no DOM manipulation required:

// registration-form.js
import BasicForm from './basic-form.js';

export default class RegistrationForm extends BasicForm {
  constructor(containerSelector) {
    // Define your form fields here—super easy to modify!
    const fields = [
      {
        type: 'text',
        label: 'Full Name',
        name: 'fullName',
        required: true,
        placeholder: 'Enter your full name'
      },
      {
        type: 'email',
        label: 'Email Address',
        name: 'email',
        required: true,
        placeholder: 'your.email@example.com'
      },
      {
        type: 'select',
        label: 'Role',
        name: 'role',
        required: true,
        includeEmptyOption: true,
        options: [
          { value: 'user', label: 'Regular User' },
          { value: 'admin', label: 'Administrator' },
          { value: 'editor', label: 'Content Editor' }
        ]
      },
      {
        type: 'number',
        label: 'Number of Invoices',
        name: 'invoices',
        placeholder: 'Enter invoice count',
        // Conditional rule: only show if role is "admin"
        condition: (form) => {
          const roleField = form.formElement.querySelector('[name="role"]');
          return roleField?.value === 'admin';
        }
      },
      {
        type: 'checkbox',
        label: 'Agree to Terms & Conditions',
        name: 'terms',
        required: true
      }
    ];

    super(containerSelector, fields);
  }

  afterRender() {
    // Set up dynamic condition for the invoices field
    this.watchField('role', (value) => {
      this.toggleFieldGroup('invoices', value === 'admin');
    });

    // Initial check to hide invoices if role isn't admin on load
    const initialRole = this.formElement.querySelector('[name="role"]').value;
    this.toggleFieldGroup('invoices', initialRole === 'admin');
  }
}

Key Features Explained #

• Modularity: All form fields are defined in a single array—modify this array to add/remove fields without touching rendering logic.
• Inheritance: RegistrationForm reuses all the core functionality from BasicForm, so you can create other form types (like LoginForm) by extending the base class.
• Conditional Rendering: The condition property on fields lets you define when a field should be shown, and the watchField helper handles dynamic updates.
• Native ES Modules: No build tools needed—just serve the files over HTTP (local file:// might cause CORS issues) and the browser handles imports/exports.

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