单例模式：揭秘实现全局唯一Modal浮窗的秘诀

2024-01-14 11:12:59

单例设计模式简介

单例设计模式是一种软件设计模式，它旨在确保一个类只被实例化一次，从而创建全局唯一的对象。单例模式的优点包括：

全局唯一性： 单例模式可以确保一个类只被实例化一次，从而创建一个全局唯一的对象，避免创建多个实例造成的资源浪费和数据不一致问题。
简单易用： 单例模式的使用非常简单，只需创建一个类，并提供一个全局访问点即可。
可测试性： 单例模式的测试非常简单，只需测试一次即可。

实现全局唯一Modal浮窗

在JavaScript中，我们可以使用多种方法来实现一个单例模式的Modal浮窗。一种简单的方法是使用闭包。闭包是JavaScript中的一种函数，它可以访问其定义作用域内的变量，即使在该函数执行完毕之后。

以下是一个使用闭包实现的单例模式Modal浮窗的示例代码：

// 定义单例Modal浮窗类
const Modal = (function() {
  // 私有变量，用于存储Modal浮窗的实例
  let instance;

  // 私有方法，用于创建Modal浮窗实例
  const createInstance = function() {
    // 创建Modal浮窗实例
    const modal = document.createElement('div');
    modal.classList.add('modal');

    // 添加关闭按钮
    const closeButton = document.createElement('button');
    closeButton.classList.add('modal-close');
    closeButton.addEventListener('click', () => {
      // 关闭Modal浮窗
      modal.classList.remove('show');
    });
    modal.appendChild(closeButton);

    // 添加Modal内容
    const modalContent = document.createElement('div');
    modalContent.classList.add('modal-content');
    modalContent.innerHTML = '<h1>Hello, world!</h1>';
    modal.appendChild(modalContent);

    return modal;
  };

  // 公有方法，用于获取Modal浮窗实例
  const getInstance = function() {
    // 如果Modal浮窗实例不存在，则创建它
    if (!instance) {
      instance = createInstance();
    }

    return instance;
  };

  // 返回公有方法
  return {
    getInstance: getInstance
  };
})();

// 使用单例Modal浮窗
const modal = Modal.getInstance();
modal.classList.add('show');