JavaScript 設計模式之單例模式

前言

---

在 JavaScript 發展的歷程中，前行者們從實務上總結了許多特定問題的解決方法。簡單來說，設計模式就是在某種場合下對特定問題的簡潔而又優雅的解決方案

在之後的一段時間，我將記錄 JavaScript 中各種常見的設計模式。或許你對此已經駕輕就熟，或許平時已在使用，但是對其​​概念並不是特別熟悉，又或許只是對此有一些模糊的概念。那麼，相信這個系列一定會帶給你些許收穫

在了解這些常見的模式之前，預設你已經至少掌握

• ##this

• #閉包

• 高階函數

• #原型與原型鏈

了解它們，會讓你更清晰的認識一個模式。當然，或許我之前所記錄的有關這方面的東西能夠給你些許幫助

傳送門

如果文章中有出現紕漏、錯誤之處，還請看到的小伙伴多多指教，先行謝過

下面，就讓我們從它開始吧--單例模式

#概念## 顧名思義，只有一個實例

定義：確保一個類別只有一個實例，並提供一個存取它的全域存取點

看到這樣的定義，你的腦海中是否會冒出全域變數的概念呢。不可否認，全域變數是符合單例模式的概念的。但是，我們通常不會也不應該將它當作一個單例來使用，原因有以下兩點：

#全域命名污染
不易維護，容易被重寫覆蓋
在ES6 之前，我們通常會使用一個建構函式來模擬一個類，現在我們也可以直接使用class 關鍵字來建立一個類，雖然其本質也是原型

想要保證一個類別只有一個實例，我們需要提供一個變數來標誌目前是否已經為一個類別建立過實例。所以，單例模式的核心就是：

確保只有一個實例，並提供全域存取

圍繞這個核心，我們也就基本上清楚了單例模式的實作方式

實作

---

基礎版

#根據單一範例模式的定義，我們可以用以下方式簡單實作

var Singleton = function(name){    
  this.name = name
}

Singleton.instance = null // 初始化一个变量Singleton.getInstance = function(name) {// 判断这个变量是否已经被赋值，如果没有就使之为构造函数的实例化对象// 如果已经被赋值了就直接返回
  if(!this.instance) {   
   this.instance = new Singleton(name)
   }    
  return this.instance
}
var a = Singleton.getInstance('Tadpole')
var b = Singleton.getInstance('Amy')
a === b // true

以上程式碼，清晰的反映了單例模式的定義。透過一個中間變數的方式，只初始化一個實例，所以最終 a 和 b 是完全相等的

我們也可以用 ES6 的 class 關鍵字來實現

class Singleton {    
    constructor(name){   
        this.name = name     
      this.instance = null
  }    
  // 提供一个接口对类进行实例化
    static getInstance(name) { 
        if(!this.instance) { 
          this.instance = new Singleton(name)
      }       
      return this.instance
   }
}

不難發現，ES6的實作方式和我們透過建構函式的方式實作基本上是一致的

存在問題：

不夠透明，我們需要約束類別實例化的呼叫方式
耦合度過高，功能業務程式碼耦合在一起不利於後期維護

#建構子 #讓我們對上面的方式做一個簡單的修改

// 将变量直接挂在构造函数上面，最终将其返回
  function Singleton(name) {   
     if(typeof Singleton.instance === 'object'){ 
        return Singleton.instance
     }  
     this.name = name
      return Singleton.instance = this
 }  
 // 正常创建实例
 
 var a = new Singleton('Tadpole')
 var b = new Singleton('Amy')

解決了基礎版類不夠透明的問題，可以使用new 關鍵字來初始化實例，但同時也存在著新的問題

判斷Single.instance 類型來返回，可能不會得到預期結果
• ##這種方式也可以透過ES6 方式來實現

  // 将 constructor 改写为单例模式的构造器
  class Singleton {    
  constructor(name) {    
      this.name = name 
      if(!Singleton.instance) {
         Singleton.instance = this
      }       
      return Singleton.instance
    }
  }

  閉包

透過單例模式的定義，想要保證只有一個實例並且可以提供全域存取。那麼，閉包肯定也是可以實現這樣的需求

var Singleton = (function () {  
var SingleClass = function () {}; 
var instance; 
return function () {      
 if (!instance) { 
    instance = new SingleClass() // 如果不存在 则new一个
 }        
 return instance;
}
})()

透過閉包的特性，保存一個變數並最終將其返回，提供全域存取

同樣的，以上的程式碼還是沒有解決耦合度的問題

讓我們仔細觀察這段程式碼，如果我們將其中建構函式的部分提取到外部，是否就實現了功能的分離呢

代理實現

修改一下上面的程式碼

function Singleton(name) {   
 this.name = name
}
var proxySingle = (function(){  
  var instance 
  return function(name) {  
    if(!instance) {
      instance = new Singleton(name)
    }  
  return instance
 }
})()

将创建函数的步骤从函数中提取出来，把负责管理单例的逻辑移到了代理类 proxySingle 中。这样做的目的就是将 Singleton 这个类变成一个普通的类，我们就可以在其中单独编写一些业务逻辑，达到了逻辑分离的效果

我们现在已经达到了逻辑分离的效果，并且也不 透明 了。但是，这个负责代理的类是否已经完全符合我们的要求呢，答案是否定的。设想一下，如果我们的构造函数有多个参数，我们是不是也应该在代理类中体现出来呢

那么，有没有更通用一些的实现方式呢

通用惰性单例

在前面的几个回合，我们已经基本完成了单例模式的创建。现在，我们需要寻求一种更通用的方式解决之前留下来的问题

试想一下，如果我们将函数作为一个参数呢

// 将函数作为一个参数传递
var Singleton = function(fn) { 
   var instance
   return function() {        // 通过apply的方式收集参数并执行传入的参数将结果返回
     return instance || (instance = fn.apply(this, arguments))
   }
}

这种方式最大的优点就是相当于缓存了我们想要的结果，并且在我们需要的时候才去调用它，符合封装的单一职责

应用

前面有说过，所有的模式都是从实践中总结而来，下面就让我们来看看它在实际开发中都有哪些应用吧

通过单例模式的定义我们不难想出它在实际开发中的用途，比如：全局遮罩层

一个全局的遮罩层我们不可能每一次调用的时候都去创建它，最好的方式就是让它只创建一次，之后用一个变量将它保存起来，再次调用的时候直接返回结果即可

单例模式就很符合我们这样的需求

// 模拟一个遮罩层var createDiv = function () {    
        var div = document.createElement('div')
    div.style.width = '100vw'
    div.style.height = '100vh'
    div.style.backgroundColor = 'red'
    document.body.appendChild(div)  
    return div
}// 创建出这个元素var createSingleLayer = Singleton(createDiv)document.getElementById('btn').onclick = function () {    // 只有在调用的时候才展示
    var divLayer = createSingleLayer()
}

当然，在实际应用中还是有很多适用场景的，比如登录框，还有我们可能会使用到的 Vux 之类的状态管理工具，它们实际上都是契合单例模式的

后记

单例模式是一种简单而又实用的模式，通过创建对象和管理单例的两个方法，我们就可以创造出很多实用且优雅的应用。当然，它也有自身的缺点，比如只有一个实例~

合理使用才能发挥出它的最大威力

最后，推荐一波前端学习历程，感兴趣的小伙伴可以 点击这里 ，也可以扫描下方二维码关注我的微信公众号，查看往期更多内容，欢迎 star 关注

推荐教程：《JS教程》

以上是JavaScript 設計模式之單例模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！