JavaScript组件化核心是封装可复用、独立状态与行为的UI单元，可通过Class、Custom Elements或函数式+虚拟DOM三种方式实现，关键在于作用域隔离、生命周期管理、配置传递与通信机制。
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 更新
示例：
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>支持内容分发；Class 组件可通过props.children或innerHTML注入
基本上就这些。组件化不是某一种写法，而是思维方式——把界面拆成“能独立存在、测试、复用”的单元。选 Class 还是 Custom Elements，取决于你是否需要强封装、跨框架兼容或服务端渲染支持。不复杂但容易忽略的是：状态归属、副作用清理、错误边界和可访问性（a11y）设计。
