javascript怎样创建可复用的组件？_javascript的函数式编程思想是什么？

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)）
• 内部状态用私有字段（或闭包变量）保护，不暴露给外部随意修改

例如一个带开关状态的折叠面板：

标签： javascript java html app ssl red