HTML怎么做单例模式_html单例Singleton模式实现【教程】-html教程-PHP中文网

单例模式在HTML/JS中由JavaScript实现而非HTML标签，核心是通过闭包或static instance确保对象唯一性，并需管理DOM初始化、更新与销毁三阶段。

html怎么做单例模式_html单例singleton模式实现【教程】

单例模式在 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。比闭包更易测试和继承。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

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()