JavaScript 创建可复用组件核心是封装逻辑、隔离状态、明确接口；函数式编程强调纯函数、不可变数据、避免副作用，提升可预测性、可测试性与可组合性。
JavaScript 创建可复用组件，核心是“封装逻辑 + 隔离状态 + 明确接口”，不依赖框架也能做到；函数式编程思想则强调纯函数、不可变数据、避免副作用，让代码更可预测、易测试、易组合。
用函数封装 UI 逻辑（轻量级组件）
把一段带 HTML 结构、事件绑定和简单状态的代码，封装成接受配置、返回 DOM 节点的函数：
- 输入参数控制行为（如文本、点击回调、默认是否禁用）
- 内部创建元素、绑定事件、返回根节点，不直接操作全局 DOM
- 每次调用都是独立实例，互不影响
例如一个可复用的按钮组件：
function createButton({ text = '点击', onClick, disabled = false }) {
const btn = document.createElement('button');
btn.textContent = text;
btn.disabled = disabled;
if (onClick) btn.addEventListener('click', onClick);
return btn;
}
// 复用两次，各自独立
document.body.append(createButton({ text: '保存', onClick: save }));
document.body.append(createButton({ text: '取消', onClick: cancel }));
用类封装有状态的交互组件
当需要维护内部状态（如开关、计数、输入值）、响应生命周期（创建/销毁）时，用 class 更清晰：
立即学习“Java免费学习笔记（深入）”；
- 构造函数接收配置，初始化 DOM 和事件
- 方法暴露可控接口（如 render()、destroy()、update(config)）
- 内部状态用私有字段（或闭包变量）保护，不暴露给外部随意修改
例如一个带开关状态的折叠面板：
class Accordion {
constructor({ title, content }) {
this.title = title;
this.content = content;
this.isOpen = false;
this.element = this.render();
}
render() {
const el = document.createElement('div');
const header = document.createElement('h3');
header.textContent = this.title;
header.addEventListener('click', () => {
this.isOpen = !this.isOpen;
this.element.classList.toggle('open', this.isOpen);
});
const body = document.createElement('div');
body.innerHTML = this.content;
el.append(header, body);
return el;
}
destroy() {
this.element.remove();
}
}
函数式编程的关键实践
不是要写成 Haskell，而是用函数式思维提升 JavaScript 的健壮性：
- 写纯函数：相同输入永远返回相同输出，不读写外部变量、不修改入参对象
- 优先用 const 和不可变操作：用 map/filter/reduce 替代 for 循环；用展开语法或 Object.assign({}, obj, updates) 替代直接赋值
- 把副作用隔离出来：API 请求、DOM 更新、console.log 都放在最外层调用，组件内部只做计算和转换
- 函数组合代替嵌套调用：比如 compose(format, validate, parse)(input) 比 format(validate(parse(input))) 更易读、可复用
组件 + 函数式 = 更可靠的复用
把函数式原则用在组件设计里，效果明显：
- 组件工厂函数接受配置对象（纯输入），返回新实例（无共享状态）
- 组件内部更新状态时，用新对象替代旧对象（如 this.state = { ...this.state, count: this.state.count + 1 }）
- 事件回调尽量用箭头函数或绑定后的纯函数，避免 this 丢失或隐式状态依赖
本质上，可复用组件不是“一次写完到处贴”，而是“定义契约、约束边界、最小假设”。函数式不是银弹，但能帮你少踩很多状态混乱的坑。
基本上就这些。
