搜索
首页web前端js教程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中文网其他相关文章!

声明
本文转载于:segmentfault。如有侵权,请联系admin@php.cn删除
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

一文理解JavaScript中的单例模式一文理解JavaScript中的单例模式Apr 25, 2023 pm 07:53 PM

JS 单例模式是一种常用的设计模式,它可以保证一个类只有一个实例。这种模式主要用于管理全局变量,避免命名冲突和重复加载,同时也可以减少内存占用,提高代码的可维护性和可扩展性。

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

JavaScript详细解析之网络请求与远程资源JavaScript详细解析之网络请求与远程资源Apr 20, 2022 pm 06:39 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于网络请求与远程资源的相关问题,包括了跨源资源共享、预检请求、Fetch API等等内容,下面一起来看一下,希望对大家有帮助。

C++ 函数重载和重写中单例模式与工厂模式的运用C++ 函数重载和重写中单例模式与工厂模式的运用Apr 19, 2024 pm 05:06 PM

单例模式:通过函数重载提供不同参数的单例实例。工厂模式:通过函数重写创建不同类型的对象,实现创建过程与具体产品类的解耦。

ES5和JavaScript是什么关系ES5和JavaScript是什么关系Apr 11, 2022 am 10:45 AM

ES5和JavaScript的关系是:ES5是JavaScript语言的国际标准,JavaScript是ES5的实现。ES5是ECMAScript基于JavaScript的规范标准的修正版本,规定了JavaScript的组成部分。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具