单例模式在HTML/JS中由JavaScript实现而非HTML标签，核心是通过闭包或static instance确保对象唯一性，并需管理DOM初始化、更新与销毁三阶段。
单例模式在 HTML/JS 环境里不是靠 标签本身实现的，而是通过 JavaScript 控制 DOM 元素或对象的唯一性——比如只允许一个模态框存在、一个配置管理器被多次调用却始终返回同一实例。直接写 这类语法是无效的，HTML 没有原生单例属性。
为什么不能靠 HTML 标签实现单例
HTML 是声明式标记语言，不负责实例生命周期管理。<div id="modal"> 写十次就是十个节点；<code>document.getElementById("modal") 能取到第一个，但不会自动阻止你再 appendChild 一个同名元素。所谓“HTML 单例”其实是 JS 层对 DOM 操作的约束。
- 浏览器解析 HTML 时会逐个创建元素，不检查重复 ID 或结构
-
id属性只是选择器依据，不是运行时锁机制 - 即使用了
data-singleton="true"这类自定义属性，也需 JS 主动拦截重复初始化逻辑
用闭包封装 DOM 元素（轻量级单例）
适合弹窗、提示条等需要复用且避免重复渲染的场景。核心是：首次调用生成节点，后续调用只更新内容、复用引用。
const Modal = (function() {
let instance = null;
return function(content, type = 'info') {
if (!instance) {
instance = document.createElement('div');
instance.className = 'modal';
instance.innerHTML = `<div class="modal-content">${content}</div>`;
document.body.appendChild(instance);
} else {
instance.querySelector('.modal-content').textContent = content;
}
return instance;
};
})();
// 使用
Modal('操作成功'); // 创建
Modal('网络错误'); // 复用同一 DOM 节点，仅更新文本
- 不依赖
class或new，函数即工厂 - 闭包变量
instance隐蔽，外部无法重置 - 注意：没做显式销毁逻辑，若需隐藏/移除，得扩展方法如
Modal.hide()
用 class + static 实现可复用的单例类
当需要状态管理（如 localStorage 封装、全局配置器），推荐 ES6 class 配合 static instance。比闭包更易测试和继承。
立即学习“前端免费学习笔记（深入）”；
class StorageManager {
static instance = null;
constructor() {
if (StorageManager.instance) {
return StorageManager.instance;
}
this.store = window.localStorage;
StorageManager.instance = this;
}
setItem(key, value) {
this.store.setItem(key, JSON.stringify(value));
}
getItem(key) {
const raw = this.store.getItem(key);
return raw ? JSON.parse(raw) : null;
}
}
// 获取唯一实例
const storage = new StorageManager();
const storage2 = new StorageManager();
console.log(storage === storage2); // true
- 构造函数内判断
instance存在即直接返回，绕过重复初始化 - 必须确保所有调用都走
new StorageManager()，不能直接StorageManager.getInstance()（否则要额外加静态方法） - 该写法在严格模式下可能触发警告，更稳妥的是把构造器设为私有（用
Symbol或注释约定），只暴露getInstance()
容易忽略的坑：DOM 单例 ≠ JS 对象单例
很多人以为“只创建一次 DOM 元素”就完成了单例，但实际常漏掉两个关键点：
- 事件监听器未清理：重复调用
Modal()若每次都addEventListener，会导致同一事件触发多次回调 - 样式/状态残留：上一次打开的模态框可能带
display: block或动画 class，下次复用前没重置，视觉异常 - 内存泄漏风险：闭包中长期持有 DOM 引用，又没提供
destroy()，页面长久运行后节点无法 GC
真正健壮的单例 DOM 组件，至少要控制初始化、更新、销毁三阶段，且销毁后 instance 应置为 null（如果支持按需重建）。
