javascript如何实现组件化_如何定义组件-js教程-PHP中文网

javascript如何实现组件化_如何定义组件

夜晨

发布： 2025-12-18 17:13:03

原创

568人浏览过

JavaScript组件化核心是封装可复用、独立状态与行为的UI单元，可通过Class、Custom Elements或函数式+虚拟DOM三种方式实现，关键在于作用域隔离、生命周期管理、配置传递与通信机制。

javascript如何实现组件化_如何定义组件

JavaScript 实现组件化，核心是封装可复用、独立状态和行为的 UI 单元。现代开发中，组件化不依赖框架也能实现，关键在于隔离作用域、管理生命周期、支持配置与通信。下面从原生 JS 出发，讲清楚如何定义和组织组件。

用类（Class）定义基础组件

ES6 Class 是最直观的组件定义方式，封装模板、状态、渲染逻辑和事件处理：

构造函数接收配置对象（如 props、容器元素），初始化内部状态
提供 render() 方法生成 HTML 字符串或 DOM 片段
提供 mount(el) 方法将组件挂载到指定节点
可添加 update()、unmount() 等生命周期方法

示例：一个计数器组件

class Counter {
  constructor({ initial = 0, onChange }) {
    this.count = initial;
    this.onChange = onChange;
  }

  render() {
    return `
      <div class="counter">
        <span>Count: ${this.count}</span>
        <button onclick="this.parentElement.__handleInc()">+</button>
        <button onclick="this.parentElement.__handleDec()">−</button>
      </div>
    `;
  }

  mount(el) {
    el.innerHTML = this.render();
    // 绑定私有处理函数（注意：实际项目建议用事件委托或 addEventListener）
    const root = el.querySelector('.counter');
    root.__handleInc = () => this.increment();
    root.__handleDec = () => this.decrement();
  }

  increment() {
    this.count++;
    this.onChange?.(this.count);
  }

  decrement() {
    this.count--;
    this.onChange?.(this.count);
  }
}

// 使用
const counter = new Counter({ initial: 5, onChange: (v) => console.log('new value:', v) });
counter.mount(document.getElementById('app'));

登录后复制

用自定义元素（Custom Elements）实现标准组件

Web Components 标准提供了原生、跨框架的组件能力。通过 customElements.define() 注册一个自定义标签：

立即学习“Java免费学习笔记（深入）”；

继承 HTMLElement，使用 constructor 和 connectedCallback 初始化
用 shadowRoot 封装样式和结构，避免全局污染
通过 static get observedAttributes() 响应属性变化
用 attributeChangedCallback 处理 props 更新

示例：

站长俱乐部购物系统

功能介绍：1、模块化的程序设计，使得前台页面设计与程序设计几乎完全分离。在前台页面采用过程调用方法。在修改页面设计时只需要在相应位置调用设计好的过程就可以了。另外，这些过程还提供了不同的调用参数，以实现不同的效果；2、阅读等级功能，可以加密产品，进行收费管理；3、可以完全可视化编辑文章内容，所见即所得；4、无组件上传文件，服务器无需安装任何上传组件，无需支持FSO，即可上传文件。可限制文件上传的类

查看详情

class MyCounter extends HTMLElement {
  static get observedAttributes() { return ['count']; }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.count = +this.getAttribute('count') || 0;
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'count') {
      this.count = +newValue || 0;
      this.render();
    }
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>button { margin: 0 4px; }</style>
      <div>
        <span>Count: ${this.count}</span>
        <button onclick="this.parentNode.host.inc()">+</button>
        <button onclick="this.parentNode.host.dec()">−</button>
      </div>
    `;
  }

  inc() {
    this.count++;
    this.setAttribute('count', this.count);
    this.dispatchEvent(new CustomEvent('change', { detail: this.count }));
  }

  dec() {
    this.count--;
    this.setAttribute('count', this.count);
    this.dispatchEvent(new CustomEvent('change', { detail: this.count }));
  }
}

customElements.define('my-counter', MyCounter);

登录后复制

之后即可在 HTML 中直接使用：<my-counter count="3"></my-counter>，并监听事件：el.addEventListener('change', e => console.log(e.detail))。

用函数式组件 + 虚拟 DOM（轻量级思路）

若追求更接近 React 的写法，可结合简易虚拟 DOM（如 Preact 或手写 h()/render 函数）实现函数式组件：

组件是一个纯函数，接收 props，返回 VNode（虚拟节点）
通过 diff + patch 实现高效更新
用闭包或 hooks 模拟状态（如 useState 小型实现）

适合中等复杂度、需局部重绘的场景，比 Class 更简洁，比 Custom Elements 更灵活。

组件通信与组合的关键点

组件不是孤岛，需考虑协作方式：

父传子：通过 HTML 属性（Custom Elements）、构造参数（Class）、或函数参数（函数组件）传递数据
子传父：用自定义事件（dispatchEvent）、回调函数（props.onXxx）、或发布订阅模式
跨层级：可用 Context 模式（闭包共享对象）、或全局事件总线（慎用）
插槽（Slot）：Custom Elements 中用 <slot></slot> 支持内容分发；Class 组件可通过 props.children 或 innerHTML 注入