每日一题之单例模式

单例模式

• 单例模式是一种设计模式，它确保一个类只有一个实例，并提供一个全局访问点来获取该实例。它限制了类的实例化次数，使得该类在程序中的任何地方都可以共享同一个实例。

实现

class Singleton {
  constructor(data) {
    if (Singleton.instance) {
      return Singleton.instance;
    }
    Singleton.instance = this;
    this.data = data;
  }

  getData() {
    return this.data;
  }

  // 其他方法
}

// 示例使用
const instance1 = new Singleton('Instance 1');
const instance2 = new Singleton('Instance 2');

console.log(instance1.getData()); // 输出: Instance 1
console.log(instance2.getData()); // 输出: Instance 1
console.log(instance1 === instance2); // 输出: true

惰性单例模式

• 首次访问时才会被创建，而不是在类被实例化时立即创建。这可以提高性能并减少不必要的资源消耗。

class Singleton {
  constructor(data) {
    this.data = data;
  }

  static getInstance(data) {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton(data);
    }
    return Singleton.instance;
  }

  getData() {
    return this.data;
  }

  // 其他方法
}

// 示例使用
const instance1 = Singleton.getInstance('Instance 1');
const instance2 = Singleton.getInstance('Instance 2');

console.log(instance1.getData()); // 输出: Instance 1
console.log(instance2.getData()); // 输出: Instance 1
console.log(instance1 === instance2); // 输出: true

使用场景

• 全局缓存：当需要在应用程序中共享数据或资源时，可以使用单例模式来创建一个全局缓存，以确保所有部分都访问同一个缓存实例。
• 配置信息：当需要在应用程序中共享配置信息或系统设置时，可以使用单例模式来创建一个全局配置实例。
• 对话框或弹窗：当需要确保只有一个对话框或弹窗实例存在时，可以使用单例模式来管理它们的创建和显示。
• 日志记录器：当需要在应用程序中记录日志时，可以使用单例模式来创建一个全局日志记录器实例，以便在不同部分方便地写入日志。

实现对话框

• css和html自行补充

class Dialog {
   constructor() {
     if (Dialog.instance) {
       return Dialog.instance;
     }
     Dialog.instance = this;

     this.isOpen = false;
     this.content = null;
     this.dialogElement = null;
   }

   open(content) {
     if (this.isOpen) {
       return;
     }

     this.isOpen = true;
     this.content = content;
     this.createDialogElement();
     this.showDialog();
   }

   close() {
     if (!this.isOpen) {
       return;
     }
     this.isOpen = false;
     this.content = null;
     this.removeDialogElement();
   }

   createDialogElement() {
     this.dialogElement = document.createElement("div");
     this.dialogElement.classList.add("dialog-wrapper");
     this.dialogElement.innerHTML = `<p class="dialog">${this.content}</p>`;
     document.body.appendChild(this.dialogElement);
   }

   showDialog() {
     this.dialogElement.style.display = "block";
   }

   removeDialogElement() {
     this.dialogElement.remove();
     this.dialogElement = null;
   }
 }

 const dialog1 = new Dialog();
 const dialog2 = new Dialog();

 function handleOpen() {
   dialog1.open("Hello, Dialog!"); // 打开对话框
 }

 function handleOpen2() {
   dialog2.open("This is a singleton dialog."); // 已打开对话框，不会创建新的实例
 }