构造函数中不应直接查询dom，应通过init()方法延迟获取并缓存引用，使用事件委托替代逐个绑定，支持传入已存在节点以提升灵活性与性能。
在构造函数中绑定 DOM 元素时，若不加控制，容易造成重复查询、过早绑定、内存泄漏或性能浪费。优化核心是：按需获取、一次缓存、避免重复、延迟执行（必要时）。
避免在构造函数中直接查 DOM
构造函数职责应聚焦于初始化实例状态，而非操作界面。若 DOM 尚未就绪（如脚本在 中执行），document.getElementById 等查询会返回 null，导致后续报错或逻辑失效。
✅ 正确做法：
- 不在构造函数里调用
querySelector或getElementById - 改为提供
.init()方法，由使用者显式调用，或配合DOMContentLoaded事件触发
class ListManager {
constructor(containerId) {
this.containerId = containerId;
this.container = null; // 只声明，不查
}
init() {
this.container = document.getElementById(this.containerId);
if (!this.container) {
throw new Error(`Element #${this.containerId} not found`);
}
this.bindEvents();
}
bindEvents() {
this.container.addEventListener('click', (e) => {
if (e.target.classList.contains('item-delete')) {
this.deleteItem(e.target.dataset.id);
}
});
}
}
缓存 DOM 引用，禁止重复查询
一旦获取到元素，就保存为实例属性，后续所有操作都复用该引用，不再反复调用查询 API。
尤其在方法被多次调用（如 render()、update()）时，这点至关重要。
class FormValidator {
constructor(formSelector) {
this.form = null;
this.inputs = null;
this.submitBtn = null;
// 延迟到 init() 再查
this.formSelector = formSelector;
}
init() {
const form = document.querySelector(this.formSelector);
if (!form) return;
this.form = form;
this.inputs = form.querySelectorAll('input, select, textarea');
this.submitBtn = form.querySelector('button[type="submit"]');
}
validate() {
// 直接使用 this.inputs，不重新 querySelectorAll
return Array.from(this.inputs).every(input => input.checkValidity());
}
}
使用事件委托替代逐个绑定
若构造函数需为动态子元素（如列表项、卡片）绑定事件，不要在构造时遍历并 addEventListener 到每个子节点。
✅ 改用事件委托：只给父容器绑一次，利用冒泡处理子元素事件。
既减少监听器数量，又天然支持后续动态插入的元素。
class CommentList {
constructor(listSelector) {
this.list = document.querySelector(listSelector);
this.init();
}
init() {
// 只绑定一次，委托给 ul
this.list.addEventListener('click', (e) => {
if (e.target.matches('.comment-delete')) {
const id = e.target.dataset.commentId;
this.removeComment(id);
}
});
}
removeComment(id) {
const comment = this.list.querySelector(`[data-comment-id="${id}"]`);
comment?.remove();
}
}
可选：支持传入已存在的 DOM 节点
让构造函数更灵活，允许传入原生 DOM 元素而非选择器字符串。这样可避免查询开销，也便于测试和复用。
class Tooltip {
constructor(target) {
// 支持 string（选择器）或 Element（已存在节点）
this.target = typeof target === 'string'
? document.querySelector(target)
: target;
if (!this.target) {
throw new Error('Tooltip target not found');
}
this.init();
}
init() {
this.tooltipEl = document.createElement('div');
this.tooltipEl.className = 'tooltip';
document.body.appendChild(this.tooltipEl);
}
}Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
