ES6 Class 写 UI 组件的核心是将状态管理、DOM 操作和生命周期统一收束于类结构中，通过 this.$el 和 this.state 分离视图与数据，约定 init/mounted/destroyed 等生命周期钩子，暴露 props/methods/events API，保持轻量与可组合性。
用 ES6 Class 写 UI 组件，核心是把“状态管理”“DOM 操作”和“生命周期”收束到类的结构里，避免散落的函数和全局变量，让组件可复用、可测试、易维护。
封装 DOM 与状态分离
不要在 class 外部直接操作 this.element 或硬编码选择器。初始化时传入容器节点，内部只维护一个 this.$el，并把数据状态（如 loading、items）放在 this.state 上，不混用 DOM 属性和业务属性。
- 构造函数接收 options，解构出 container 和初始 state，再调用 this.render() 初始化视图
- 所有 DOM 查询都通过 this.$el.querySelector() 等方法，不写 document.getElementById
- state 变更走统一的 setState({ key: value }) 方法，触发 render 或局部更新，而非直接改 this.state.xxx
定义清晰的生命周期钩子
ES6 Class 本身没有生命周期，但你可以约定几个关键方法：init()、mounted()、updated()、destroyed()。它们不是自动调用的，而是由你控制执行时机，比如在 render 后手动调用 mounted()。
- init() 做初始化逻辑（绑定事件、创建子组件），在 constructor 末尾调用
- mounted() 在首次 DOM 插入后调用，适合启动定时器、发起请求、聚焦输入框等
- destroyed() 清理副作用：移除事件监听、清除定时器、取消未完成的 fetch，防止内存泄漏
支持外部配置与事件通信
组件应对外暴露明确的 API：props（只读配置）、methods（可调用行为）、events（自定义事件）。避免直接暴露 this.state 或 this.$el。
- props 通过 constructor options 传入，内部只读；需要响应式更新时，用 setter 或 observe 模式包装
- 提供 public 方法如 show()、hide()、reset()，内部调用 this.setState 并触发对应 UI 变化
- 用 CustomEvent 触发事件，例如 this.$el.dispatchEvent(new CustomEvent('change', { detail: this.state }))，方便父级监听
保持轻量，按需扩展
ES6 Class 不是 React，不必模拟虚拟 DOM 或复杂 diff。一个按钮、下拉菜单、分页器这类组件，50–150 行足矣。需要高级能力（如 JSX、响应式依赖追踪）再引入小而专的库（如 lit-html、Preact），而不是强行在 class 里造轮子。
- 模板用字符串拼接或 template literal 即可，复杂结构才考虑 innerHTML + 小型模板引擎
- 样式内联或靠外部 CSS 类控制，避免在 class 里写 style.cssText
- 子组件用组合而非继承：new ChildComponent({ container: this.$el.querySelector('.child') })，保持松耦合
