首页 > 资讯 > 前端开发 > JavaScript >JavaScript设计模式之单例模式

355

分享到

JavaScript设计模式之单例模式

JavaScript设计模式 JavaScript单例模式 2022-11-13 14:11:18 355人浏览八月长安

摘要

目录单例模式实现单例模式透明的单例模式用代理实现单例模式惰性单例通用的惰性单例小结单例模式单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如线程池、全局缓存、浏览器中的

单例模式

单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如线程池、全局缓存、浏览器中的 window 对象等。在 javascript 开发中，单例模式的用途同样非常广泛。试想一下，当我们单击登录按钮的时候，页面中会出现一个登录浮窗，而这个登录浮窗是唯一的，无论单击多少次登录按钮，这个浮窗都只会被创建一次，那么这个登录浮窗就适合用单例模式来创建。

实现单例模式

要实现一个标准的单例模式并不复杂，无非是用一个变量来标志当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例时，直接返回之前创建的对象。代码如下：

class Singleton {
  constructor(name) {
    this.name = name;
    this.instance = null;
  }
  static getInstance(name) {
    if (this.instance === null) {
      this.instance = new Singleton(name);
    }
    return this.instance;
  }
}

我们通过 Singleton.getInstance 来获取 Singleton 类的唯一对象，这种方式相对简单，但有一个问题，就是增加了这个类的“不透明性”，Singleton 类的使用者必须知道这是一个单例类，跟以往通过 new XXX 的方式来获取对象不同，这里偏要使用 Singleton.getInstance 来获取对象。接下来顺便进行一些小测试，来证明这个单例类是可以信赖的：

const a = Singleton.getInstance( '夏安1' ); 
const b = Singleton.getInstance( '夏安2' ); 
console.log(a === b); // true

虽然现在已经完成了一个单例模式的编写，但这段单例模式代码的意义并不大。从下一节开始，我们将一步步编写出更好的单例模式。

透明的单例模式

我们现在的目标是实现一个“透明”的单例类，用户从这个类中创建对象的时候，可以像使用其他任何普通类一样。在下面的例子中，我们将使用 CreateDiv 单例类，它的作用是负责在页面中创建唯一的 div 节点，代码如下：

class CreateDiv {
  constructor(html) {
    if (!CreateDiv.instance) {
      const div = document.createElement('div');
      div.innerHTML = html;
      document.body.appendChild(div);
      CreateDiv.instance = div;
    }
    return CreateDiv.instance;
  }
  static instance = null;
}

然而，假设我们某天需要利用这个类，在页面中创建千千万万的 div，即要让这个类从单例类变成一个普通的可产生多个实例的类，那我们必须得改写 CreateDiv 构造函数，把控制创建唯一对象的那一个静态属性去掉，这种修改会给我们带来不必要的烦恼。

用代理实现单例模式

现在我们通过引入代理类的方式，来解决上面提到的问题。我们依然使用上一节节中的代码，首先 CreateDiv 构造函数中，把负责管理单例的代码移除出去，使它成为一个普通的创建 div 的类：

class CreateDiv {
  constructor(html) {
    const div = document.createElement('div');
    div.innerHTML = html;
    document.body.appendChild(div);
    return div;
  }
}
class ProxySingletonCreateDiv {
  constructor(html) {
    if (!CreateDiv.instance) {
      CreateDiv.instance = new CreateDiv(html);
    }
    return CreateDiv.instance;
  }
  static instance = null;
}

通过引入代理类的方式，我们同样完成了一个单例模式的编写，跟之前不同的是，现在我们把负责管理单例的逻辑移到了代理类 proxySingletonCreateDiv 中。这样一来，CreateDiv 就变成了一个普通的类，它跟 proxySingletonCreateDiv 组合起来可以达到单例模式的效果。

本例是缓存代理的应用之一，之后我们将继续了解代理带来的好处。

惰性单例

前面我们了解了单例模式的一些实现办法，本节我们来了解惰性单例。

惰性单例指的是在需要的时候才创建对象实例。惰性单例是单例模式的重点，这种技术在实际开发中非常有用，有用的程度可能超出了我们的想象，实际上在本文开头就使用过这种技术， instance 实例对象总是在我们调用 Singleton.getInstance 的时候才被创建，而不是在页面加载好的时候就创建，代码如下：

static getInstance(name) {
    if (this.instance === null) {
        this.instance = new Singleton(name);
    }
    return this.instance;
}

不过这是基于“类”的单例模式，下面我们将以 WEBQQ 的登录浮窗为例，介绍与全局变量结合实现惰性的单例。

假设我们是 WebQQ 的开发人员，当点击左边导航里 QQ 头像时，会弹出一个登录浮窗，很明显这个浮窗在页面里总是唯一的，不可能出现同时存在两个登录窗口的情况。

第一种解决方案是在页面加载完成的时候便创建好这个 div 浮窗，这个浮窗一开始肯定是隐藏状态的，当用户点击登录按钮的时候，它才开始显示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta Http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>惰性单例</title>
</head>
<body>
  <button id='login-button'>登录</button>
</body>
<script>
  var loginLayer = (function(){ 
    var div = document.createElement('div'); 
    div.innerHTML = '我是登录浮窗'; 
    div.style.display = 'none'; 
    document.body.appendChild(div); 
    return div; 
  })(); 
  document.getElementById('login-button').onclick = function() {
    loginLayer.style.display = 'block';
  }
</script>
</html>

这种方式有一个问题，也许我们进入 WebQQ 只是玩玩游戏或者看看天气等，根本不需要进行登录操作，因为登录浮窗总是一开始就被创建好，那么很有可能将白白浪费一些 DOM 节点。现在改写一下代码，使用户点击登录按钮的时候才开始创建该浮窗：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>惰性单例</title>
</head>
<body>
  <button id='login-button'>登录</button>
</body>
<script>
  var createLoginLayer = function(){ 
    var div = document.createElement('div'); 
    div.innerHTML = '我是登录浮窗'; 
    div.style.display = 'none'; 
    document.body.appendChild(div); 
    return div; 
  }; 
  document.getElementById('login-button').onclick = function() {
    var loginLayer = createLoginLayer(); 
    loginLayer.style.display = 'block';
  }
</script>
</html>

虽然现在达到了惰性的目的，但失去了单例的效果。当我们每次点击登录按钮的时候，都会创建一个新的登录浮窗 div。虽然我们可以在点击浮窗上的关闭按钮时（此处未实现）把这个浮窗从页面中删除掉，但这样频繁地创建和删除节点明显是不合理的，也是不必要的。

也许读者已经想到了，我们可以用一个变量来判断是否已经创建过登录浮窗，这也是本节第一段代码中的做法：

var createLoginLayer = (function(){ 
  var div;
  return function() {
    if (!div) {
      div = document.createElement('div'); 
      div.innerHTML = '我是登录浮窗'; 
      div.style.display = 'none'; 
      document.body.appendChild(div); 
    }
    return div; 
  }
})(); 
document.getElementById('login-button').onclick = function() {
  var loginLayer = createLoginLayer(); 
  loginLayer.style.display = 'block';
}

通用的惰性单例

上一节我们完成了一个可用的惰性单例，但是我们发现它还有如下一些问题。

这段代码仍然是违反单一职责原则的，创建对象和管理单例的逻辑都放在 createLoginLayer 对象内部。

如果我们下次需要创建页面中唯一的 iframe，或者 script 标签，用来跨域请求数据，就必须得如法炮制，把 createLoginLayer 函数几乎照抄一遍：

var createIframe = (function(){ 
  var iframe;
  return function() {
    if (!iframe) {
      iframe = document.createElement('iframe'); 
      iframe.style.display = 'none'; 
      document.body.appendChild(iframe); 
    }
    return iframe; 
  }
})();

我们需要把不变的部分隔离出来，先不考虑创建一个 div 和创建一个 iframe 有多少差异，管理单例的逻辑其实是完全可以抽象出来的，这个逻辑始终是一样的：用一个变量来标志是否创建过对象，如果是，则在下次直接返回这个已经创建好的对象：

var obj; 
if ( !obj ){ 
 obj = xxx; 
}

现在我们就把如何管理单例的逻辑从原来的代码中抽离出来，这些逻辑被封装在 getSingle 函数内部，创建对象的方法 fn 被当成参数动态传入 getSingle 函数：

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

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

var createLoginLayer = function () {
  var div = document.createElement('div');
  div.innerHTML = '我是登录浮窗';
  div.style.display = 'none';
  document.body.appendChild(div);
  return div;
};
var createSingleLoginLayer = getSingle(createLoginLayer);
document.getElementById('loginBtn').onclick = function () {
  var loginLayer = createSingleLoginLayer();
  loginLayer.style.display = 'block';
};

在这个例子中，我们把创建实例对象的职责和管理单例的职责分别放置在两个方法里，这两个方法可以独立变化而互不影响，当它们连接在一起的时候，就完成了创建唯一实例对象的功能，看起来是一件挺奇妙的事情。

小结

单例模式是我们学习的第一个模式，我们先学习了传统的单例模式实现，也了解到因为语言的差异性，有更适合的方法在 JavaScript 中创建单例。本文还提到了代理模式和单一职责原则，后面的章节会对它们进行更详细的讲解。

在 getSinge 函数中，实际上也提到了闭包和高阶函数的概念。单例模式是一种简单但非常实用的模式，特别是惰性单例技术，在合适的时候才创建对象，并且只创建唯一的一个。更奇妙的是，创建对象和管理单例的职责被分布在两个不同的方法中，这两个方法组合起来才具有单例模式的威力。

到此这篇关于JavaScript单例模式的文章就介绍到这了,更多相关js单例模式内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JavaScript设计模式之单例模式

本文链接: https://www.lsjlt.com/news/172206.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

回答

如何调试操作系统的错误？
操作系统

2023-11-15发布

回答

操作系统中的I/O系统是如何实现的？
操作系统

2023-11-15发布

回答

如何实现操作系统的内存管理？
操作系统

2023-11-15发布

回答

什么是虚拟内存，它对操作系统有什么影响？
操作系统

2023-11-15发布

回答

ASP中的MVC架构和WebForms架构有什么区别和使用场景？
ASP.NET

2023-11-15发布

回答

ASP中的数据验证和数据校验有什么不同？
ASP.NET

2023-11-15发布

回答

ASP中的ADO对象和DAO对象有什么区别和使用方法？
ASP.NET

2023-11-15发布

回答

Node.js中的包管理器NPM是什么？如何使用它进行依赖管理？
node.js

2023-11-15发布

回答

Vue.js中的动态组件是什么？如何使用它来动态渲染组件？
VUE

2023-11-15发布

回答

如何使用Vue.js实现懒加载和预加载？
VUE

2023-11-15发布

JavaScript设计模式之单例模式

目录

单例模式

实现单例模式

透明的单例模式

用代理实现单例模式

惰性单例

通用的惰性单例

小结

本篇文章演示代码以及资料文档资料下载

JavaScript设计模式之单例模式

Java设计模式之单例模式

Android设计模式之单例模式

C#设计模式之单例模式

python设计模式之单例模式

Android设计模式之单例模式实例

.Net设计模式之单例模式(Singleton)

JavaScript中的设计模式单例模式

java设计模式之单例模式解析

Android设计模式系列之单例模式

Java设计模式之单例模式简介

C++设计模式之单例模式详解

JAVA设计模式之单例模式详解

Android设计模式之单例模式详解

Android设计模式之单例模式解析

【Java】设计模式之单例模式与工厂模式

Java设计模式之单例模式示例详解

每天一个设计模式之单例模式

Java创建型设计模式之单例模式

设计模式之单例模式(懒汉, 饿汉)

京东一面：post为什么会发送两次请求？???

鼠标划过时整行变色284607详解

鼠标划过时整行变色284415处理办法

TypeScript接口和类型的区别小结

细说JS数组遍历的一些细节及实现

深入浅出JavaScript前端中的设计模式

初学者如何快速搭建Express开发系统步骤详解

JavaScrip简单数据类型隐式转换的实现

前端Website sitemap.xml文件搜索引擎优化

vue使用Swiper踩坑解决避坑