下面是一份详细的攻略。

JS 设计模式之单例模式定义与实现方法浅析

单例模式介绍

单例模式是一种设计模式，它确保类只有一个实例，并提供全局访问点。

在 JavaScript 中，单例模式通常用于管理全局状态或处理复杂的应用程序配置。

实现单例模式的方式

1. 简单的单例模式

简单的单例模式是指只创建一个对象，复用这个对象。

其中最简单的实现方法就是使用一个全局变量，比如：

var singleton = {
  property1: 'value1',
  property2: 'value2',
  method1: function() {
    // ...
  }
};

使用起来非常简单，只需要通过 singleton 对象访问属性和方法即可。但这个做法存在一个问题，就是这个对象很容易被修改。

2. 带有私有变量的单例模式

为了避免上面的问题，我们可以使用闭包来创建单例对象。这样就可以保持对象的私有性，不被外部访问或修改。

var Singleton = (function () {
  var instance;

  function createInstance() {
    var object = new Object("I am the instance");
    return object;
  }

  return {
    getInstance: function () {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

在这个例子中，instance 变量是私有的，不可访问，只能通过 getInstance() 方法获取单例对象。如果单例对象不存在，它会创建一个新的对象并将其缓存为 instance，否则返回缓存对象。

从这个示例的实现中，我们可以看到用闭包来创建单例是一个很好的做法。同时，如果要加入一些私有变量，我们也可以在闭包里定义并使用这些私有变量。

示例说明：

以下两个示例都是基于上述第二种实现方式。

示例一：

假设我们现在有一个功能非常复杂的日历应用，我们要确保在整个应用程序中只存在一个日历实例对象，这样可以避免多个日历实例之间的状态冲突。

做法是通过上述第二种实现方式，我们可以定义一个全局的日历单例，并通过 getInstance() 方法来获取该实例对象。

以下是事例代码：

var Calendar = (function() {
  var instance;

  function init() {
    // ... 进行日历初始化等相关操作 ...
    return {
      // ... 日历相关方法和属性 ...
    }
  }

  return {
    getInstance: function() {
      if (!instance) {
        instance = init();
      }
      return instance;
    }
  };
});

var calendar = Calendar.getInstance();

在整个应用程序中，我们只需要通过 Calendar.getInstance() 获得一个日历对象实例，并在实例上调用其方法或访问其属性即可。

示例二：

假设我们现在有一个需求，在某个时间段内只能存在一个模态框，即在同一时刻不能同时弹出两个模态框。

做法依然是通过上述第二种实现方式，我们可以定义一个 Modal 的单例，并通过 getInstance() 方法来获取该实例对象。

以下是事例代码：

var Modal = (function() {
  var instance;

  function render() {
    // ... 渲染模态框相关逻辑 ...
  }

  function showModal() {
    // ... 显示模态框相关逻辑...
  }

  function hideModal() {
    // ... 隐藏模态框相关逻辑...
  }

  return {
    getInstance: function() {
      if (!instance) {
        instance = {
          render: render,
          showModal: showModal,
          hideModal: hideModal
        };
      }
      return instance;
    }
  };
})();

var modal = Modal.getInstance();

// 显示模态框
modal.render().showModal();

// 隐藏模态框
modal.hideModal();

在整个应用程序中，我们只需要通过 Modal.getInstance() 获取一个模态框实例，并在实例上调用 render() 方法来渲染模态框，在调用 showModal() 显示模态框，调用 hideModal() 隐藏模态框即可。通过只创建一个单例对象实现，我们就可以确保在任何时候只有一个模态框实例存在。