JavaScript单例模式的介绍和使用

本篇文章将介绍JavaScript设计模式中的单例模式。有一定的参考价值，阅读完整文相信大家对JavaScript设计模式中的单例模式有了一定的认识。

目前创新互联公司已为近1000家的企业提供了网站建设、域名、雅安服务器托管、网站托管、服务器托管、企业网站设计、余干网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

概念

顾名思义，只有一个实例

定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点

看到这样的定义，你的脑海中是否会冒出全局变量的概念呢。不可否认，全局变量是符合单例模式的概念的。但是，我们通常不会也不应该将它作为一个单例来使用，原因有以下两点：

全局命名污染
不易维护，容易被重写覆盖

在 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 之类的状态管理工具，它们实际上都是契合单例模式的

后记

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

看完上述内容，你们对JavaScript单例模式有进一步的了解吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读。

分享标题：JavaScript单例模式的介绍和使用
文章出自：http://pwwzsj.com/article/pgehep.html

平武建站

JavaScript单例模式的介绍和使用

其他资讯