javascript设计模式之单例模式

旧城等待， 2022-10-01 07:53 138阅读 0赞

> 单例模式，是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例的特殊类。通过单例模式可以保证系统中，应用该模式的一个类只有一个实例。即一个类只有一个对象实例。

## 面向对象式的单例模式 ##

单例模式的简单实现

这样虽然实现了单例模式的效果，但是有一个缺陷就是这种方式任然可以通过`new Singleton(name)`来创建新的对象。如果别的程序员不知道这是一个单例类，他可能会通过`new`指令来创建对象，而不是通过`getInstance`方法

改进的方法

借助匿名函数和闭包，实现对instance和Singleton构造函数的封装

下面使用这种方式来定义用来创建html中某个唯一元素，例如某个div

html测试代码

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>test</title>
    </head>
    <body>
      <script src="../test.js"></script>
      <script> let div1 = new SingleDiv('hello'); let div2 = new SingleDiv('world'); // 最终在屏幕呈现的是hello console.log(div1 === div2); // true </script>
    </body>
    </html>
    复制代码

但是这种方法也有弊端，违反了单一职责原则，上面的设计方式使得`SingleDiv`完成了两样职责，创建div，div的初始化。这样的设计方式不利于修改和维护

既然是不符合第一职责原则，那么我们便把初始化的任务与创建任务分离

let CreateDiv = function(html) {
    	this.html = html;
    	this.init();
    }
    CreateDiv.prototype.init = function() {
    	let div = document.createElement('div');
    	div.innerHTML = this.html;
    	document.body.appendChild(div);
    }
    复制代码

let SingleDiv = (function() {
    	let div;
    	return function(html) {
    		if (!div) {
    			div = new CreateDiv(html);
    		}
    		return div;
    	}
    })()
    复制代码

let div1 = new SingleDiv('div1');
    let div2 = new SingleDiv('div1');
    console.log(a === b)
    复制代码

## javascript风格的单例模式 ##

由于js实际上没有类的概念，所以js中实现单例模式非常简单。单例模式中只需要一个唯一的对象，并提供全局访问，所以我们只需要在**全局**中创建一个需要的对象即可。虽然实现简单，但是同时造成了**命名空间污染**的问题。可以通过使用**命名空间**或使用**闭包包装私有变量**的方式解决命名空间污染的问题

### 饿汉式单例模式 ###

假设需要实现点击某个按钮或链接会弹出一个登录浮窗的效果，为了性能和维护的方便，需要将其设计成单例的。饿汉式单例模式就是不管是否需要，先创建需要的单例实例。

但是这种实现方式是有问题的，因为用户到这个页面也许不会进行登录操作，采用饿汉式单例不管用户登录还是不登录都会创建一个登录浮窗div节点，并将其添加到html中，这造成了资源上的浪费。解决方法便是懒汉式单例模式

### 懒汉式单例模式 ###

懒汉式单例模式，也被称为惰性单例。即只有在需要时才会创建。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <button id="loginBtn">
        login
      </button>
      <script> let createLoginBox = (function() { let div; return function() { // 当div不存在时才创建，保证实例唯一 if (!div) { div.innerText = "this is login window"; div.style.display = "none"; document.body.appendChild(div); } return div; } })(); document.getElementById("loginBtn").onclick = function() { let loginBox = createLoginBox(); // 第一次点击登录时才创建 loginBox.style.display = "block"; } </script>
    </body>
    </html>
    复制代码

如上解决方式依然有弊端：违反了单一职责原则；当需要创建唯一的其他元素时，例如iframe， script标签，就需要将上述代码再重新复制一份，只修改创建元素的名称，这增加了代码的冗余和维护成本。

解决方法：将创建对象和保证对象唯一的行为分离

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <button id="loginBtn">
        login
      </button>
      <script>
        let getSingleObject = function(fn) {
            let result;
            return function() {
                return result || (result = fn.apply(this, arguments))
            }
        }
        function createDiv() {
          let div = document.createElement("div");
          div.innerText = "this is login window";
          div.style.display = "none";
          document.body.appendChild(div);
          return div;
        }
        let createLoginBox = getSingleObject(createDiv);
        document.getElementById("loginBtn").onclick = function() {
          let loginBox = createLoginBox();
          loginBox.style.display = "block";
        }
      </script>
    </body>
    </html>
    复制代码

通过上面的方式可以创建任意一个单例实例

转载于:https://juejin.im/post/5cfb0f51f265da1ba431dfc7