深入理解JavaScript设计模式之单例模式

- 什么是单例模式
- 为什么需要单例模式
- - 常见应用场景包括
- 单例模式实现
- - 透明单例模式实现
  - 不透明单例模式
  - 用代理实现单例模式
  - javaScript中的单例模式
  - - 使用命名空间
    - 使用闭包封装私有变量
  - 惰性单例
  - 通用的惰性单例
- 结语

什么是单例模式

单例模式（Singleton Pattern）就像‘独生子女’，确保某个类在整个系统中只有一个实例，并提供一个全局访问点。简单来说，一个类一辈子只有一个孩子。在 JavaScript 编程世界中，例如 Web 应用中的登录窗口，无论你点击多少次登录按钮，只会弹出一次。

为什么需要单例模式

想象一下，你是DR钻戒的老板。我们推出一款特殊的钻戒——“单例钻戒”。这款钻戒一生只能购买一次，每位顾客终身仅能拥有一枚。这正是单例模式（Singleton Pattern）的生动写照。

常见应用场景包括

浏览器中的任务管理器或标签页管理：保证只有一个全局管理器在运行。
通知中心 / 消息中心：统一处理应用内的消息推送和响应。
侧边栏 / 弹窗组件：页面中始终只显示一个实例，避免重复创建。
全局配置文件管理：读取并维护一份全局配置，供整个应用使用。
如Vue的Vuex，React的Context或Redux）和组件生命周期管理机制。

通过单例模式，我们可以有效地控制资源的使用，减少重复对象的创建，提升系统性能与稳定性。

单例模式实现

透明单例模式实现

      var Singleton = function (name) {
        this.name = name;
      };
      Singleton.prototype.getName = function () {
        alert(this.name);
      };
      Singleton.getInstance = (function () {
        var instance = null;
        return function (name) {
          if (!instance) {
            instance = new Singleton(name);
          }
          return instance;
        };
      })();
	var a = Singleton.getInstance( 'sven1' ); 
	var b = Singleton.getInstance( 'sven2' ); 
	alert ( a === b ); // true

深入理解JavaScript设计模式之单例模式
上面的代码中是一个简单实现单例模式的方式，通过调用Singleton.getInstance()来获取Singketon类的唯一实例，实现很简单，但是有一个缺点，降低了类的“透明性”。
通常情况下，使用一个类的时候，习惯用new ClassName()的方式来新建一个对象，但是Singleton类并不是通过new直接创建实例的，而是通过Singleton.getInstance()这个静态方法来获取唯一的实力，这就必须要求使用这个类的人必须知道它是一个单例模式，并且要记住不能用new来创建对象，必须使用Singleton.getInstance()来创建对象，这种写法会让类的使用变得不够直观和不透明，增加了使用上的认知负担，很容易导致吴用。

不透明单例模式

 var CreateDiv = (function () {
        var instance;
        var CreateDiv = function (html) {
          if (instance) {
            return instance;
          }
          this.html = html;
          this.init();
          return (instance = this);
        };
        CreateDiv.prototype.init = function () {
          var div = document.createElement("div");
          div.innerHTML = this.html;
          document.body.appendChild(div);
        };
        return CreateDiv;
      })();
      var a = new CreateDiv("sven1");
      var b = new CreateDiv("sven2");
      console.log("a:", a);
      console.log("b:", b);
      console.log(a === b);

深入理解JavaScript设计模式之单例模式
在上一步骤中，我们实现了一个不透明的单例模式，即用户必须通过 Singleton.getInstance() 的方式来获取实例，而不是使用常见的 new 方式创建对象。这种方式虽然实现了单例的效果，但不够直观，降低了类的“透明性”。

为了改进这一点，我们可以尝试实现一个透明的单例模式。所谓“透明”，是指用户在使用时可以像使用普通类一样，直接通过 new CreateDiv() 的方式来创建实例，而无需关心这是一个单例类。
我们通过一个自执行的闭包函数来实现这个目标。在这个闭包中，我们将实例变量（如 instance）封装为“私有变量”，使其不会被外部轻易访问或修改，并且在整个页面不刷新的情况下，始终只存在一个实例。

例如，我们定义了一个 CreateDiv 类，它在被 new 调用时会检查是否已经存在实例，如果存在，则返回已有的实例，从而保证了全局唯一性。整个过程对使用者是透明的，使用方式和普通类完全一致，这样一来，既保留了单例的核心特性，又提升了使用的直观性和代码的可维护性。

虽然很流畅，很有单例的感觉，但是透明的单例模式还是有缺点的：

代码复杂度提高了：为了封装单例逻辑，使用了闭包和自执行函数，让代码变得不容易理解。
构造函数职责不单一：createDiv构造函数不仅要负责创建对象和初始化，还要控制只能有一个单例的逻辑，违反了"单一职责原则"
不容易扩散或者修改：如果我们还想把这个类从“只能创建一个实例”改为“可以创建多个实例”，就必须去修改构造函数内部的逻辑，非常不灵活，虽然这个写法让使用更自然（像普通类一样用 new 创建实例），但实现起来更复杂，维护成本也更高

用代理实现单例模式

var CreateDiv = function (html) {
    this.html = html;
    this.init();
  };
  CreateDiv.prototype.init = function () {
    var div = document.createElement("div");
    div.innerHTML = this.html;
    document.body.appendChild(div);
  };
  var ProxySingletonCreateDiv = (function () {
    var instance;
    return function (html) {
      if (!instance) {
        instance = new CreateDiv(html);
      }
      return instance;
    };
  })();
  var a = new ProxySingletonCreateDiv("sven1");
  var b = new ProxySingletonCreateDiv("sven2");
  console.log("a", a);
  console.log("b", b);
  console.log(a === b);

深入理解JavaScript设计模式之单例模式上面代码对透明单例模式的代理模式进行了优化，原来的CreateDiv类在构造函数中直接包含了控制单例的逻辑导致职责不清楚，不容易扩展，现在通过引入一个代理类ProxySingletonCreateDiv，将管理单例的逻辑从CreateDiv中抽离出去，让它回归为一个存粹用于创建div元素的普通类，具体来说，CreateDiv只负责创建对象和初始化操作，比如生成div并插入页面，单例的逻辑则有代理函数ProxySingletonCreateDiv来处理，这个代理函数是一个闭包，内部维护了一个唯一的实例，当第一次调用的时候会创建CreativeDiv实力，之后直接返回该实例，这种方法是缓存代理的一种典型应用，让CreateDiv更加的灵活，通用，同时又不丢失单例的特性。

javaScript中的单例模式

上面的集中单例模式实现方式偏向于传统的面向对象的写法，即通过"类"来创建唯一的对象，但是在javaScript中，这种做法也不完全适用，javaScript在es5中是一门无类(class-free)语言，创建对象非常简单，如果只需要一个唯一的对象，没必要先定义一个类再来创建实例，要知道单例模式的核心即可：“确保只有一个实例，并提供全局访问”，最然全局变量具备唯一和全局访问的特性，但是它并不是真正的单例模式，而且存在命名冲突，全局作用域污染，在大型的项目中使用全局作用域尤其危险，为了减少全局变量污染带来的问题，可以采取使用命名空间和使用闭包封装私有变量解决。

使用命名空间

适当的使用命名空间，并不会杜绝全局变量，但是可以减少全局变量的数量，最简单的方法就是对象的字面量的方式解决：

var namespace1 = {
     a: function () {
       alert(1);
     },
     b: function () {
       alert(2);
     },
   };

把 a 和 b都定义为 namespace1 的属性，这样可以减少变量和全局作用域打交道的机会。

使用闭包封装私有变量

  var user = (function () {
        var __name = "sven",
          __age = 29;
        return {
          getUserInfo: function () {
            return __name + "-" + __age;
          },
        };
      })();

将一些变量封装在闭包的内部，只暴露一些接口跟外界通信，用下划线来约定私用变量__name和__age，它们被封装在闭包产生的作用域中，外部变量访问不到这两个变量，这就进行了全局的隔绝污染。

惰性单例

前面了解了单例模式的一些实现方法，接下来学习一下单例模式比较重要的一个知识"惰性单例【Lazy Singleton】"，惰性单例指的是需要的时候才创建实例，而不是在页面加载的时候就提前创建，这种方式更节省资源，实际开发中，以弹窗为例，如果一开始就创建弹窗元素，用户可能根本不需要弹出窗口，这样回造成资源浪费，如果每次点击按钮都创建一个新的弹窗，虽然实现了按需展示，但却失去了单例的唯一性，正确的做法是首次点击创建弹窗，再次点击直接使用已经创建好的弹窗实例，这样就实现了惰性单例，即实现了只创建一次，又坐到了用的时候才创建，兼顾了功能与性能。

<html>
  <head>
    <style>
      .modal {
        position: fixed;
        width: 200px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: goldenrod;
      }
    </style>
  </head>
  <body>
    <button id="open">打开</button>
    <button id="close">关闭</button>
    <script>
      const Moda = (function () {
        let instance = null;
        return function () {
          if (!instance) {
            instance = document.createElement("div");
            instance.innerHTML = "模态框";
            instance.className = "modal";
            instance.style.display = "none";
            document.body.appendChild(instance);
          }
          return instance;
        };
      })();
      document.getElementById("open").onclick = function () {
        // 创建一个模态框
        const modal = Moda();
        modal.style.display = "block";
      };
      document.getElementById("close").onclick = function () {
        // 删除模态框
        const modal = Moda();
        modal.style.display = "none";
      };
    </script>
  </body>
</html>

深入理解JavaScript设计模式之单例模式

通用的惰性单例

我们知道了什么是惰性单例和如何实现惰性单例，但是不难发现，普通的惰性单例还是违反了单一职责原则，创建对象和管理单例的逻辑都放在了Moda内部，如果我们下次需要创建页面唯一的iframe或者script或者更多类型的标签，就必须如法炮制创建更多的Moda函数，几乎照抄一遍，针对这种方法需要将不变的部分隔离出来，创建div，iframe，img逻辑其实可以完全抽象出来【使用一个变量标志是否创建过，如果创建过则下次直接返回这个已经常见好的对象】。

return function () {
  if (!instance) {
     instance = document.createElement("div");
     ...    
   }
   return instance;
 };

接下来就把如何管理单例的逻辑抽离出来，这些逻辑封装在getSingle函数内部，创建对象的方法fn被当成参数动态传入getSingle函数。

var getSingle = function( fn ){ 
 var result; 
 return function(){ 
 return result || ( result = fn .apply(this, arguments ) ); 
 } 
};

接下来将用于创建登录浮窗的方法用参数 fn 的形式传入 getSingle，我们不仅可以传入Mode，还能传入 ModeScript、ModeIframe、ModeXhr 等。之后再让getSingle返回一个新的函数，并且用一个变量 result 来保存fn 的计算结果。result 变量因为身在闭包中，它永远不会被销毁。在将来的请求，如果 result 已经被赋值，那么它将返回这个值。

<html>
  <head>
    <style>
      .modal {
        position: fixed;
        width: 200px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: goldenrod;
      }
    </style>
  </head>
  <body>
    <button id="open">打开</button>
    <button id="close">关闭</button>
    <script>
      let getSingle = function (fn) {
        let result;
        return function () {
          return result || (result = fn.apply(this, arguments));
        };
      };
      let ModelDiv = function () {
        let div = document.createElement("div");
        div.innerHTML = "模态框";
        div.className = "modal";
        div.style.display = "none";
        document.body.appendChild(div);
        return div;
      };

      let ModelIframe = function () {
        let iframe = document.createElement("iframe");
        iframe.style.display = "none";
        document.body.appendChild(iframe);
        return iframe;
      };
      var createSingleLoginLayer = getSingle(ModelDiv);
      var createSingleLoginLayer2 = getSingle(ModelIframe);
      document.getElementById("open").onclick = function () {
        // 创建一个模态框
        const modal = createSingleLoginLayer();
        const ModelIframe1 = createSingleLoginLayer2();
        modal.style.display = "block";
        ModelIframe1.style.display = "block";
      };
      document.getElementById("close").onclick = function () {
        // 删除模态框
        const modal = createSingleLoginLayer();
        const ModelIframe2 = createSingleLoginLayer2();
        modal.style.display = "none";
        ModelIframe2.style.display = "none";
      };
    </script>
  </body>
</html>