ES6单例模式实战：从原理到登录弹窗实现

作者：拾光时间：2026-10-22 10:31:43浏览：188

本文深入解析ES6中的单例模式，通过对比ES5与ES6实现方式，展示如何利用class关键字和静态方法确保类仅有一个实例。文章结合网站登录弹窗的实际场景，提供完整的HTML、CSS及JS代码，帮助开发者掌握单例模式在Web开发中的具体应用。

单例模式概述

前言

在传统前端开发视角中，单例模式的核心在于确保一个类仅存在一个实例。其实现逻辑通常是先检查实例是否存在，若存在则直接返回，若不存在则创建后返回，从而保证全局唯一性。在JavaScript环境中，单例主要作为命名空间提供者，从全局命名空间提供一个唯一的访问入口来操作该对象。

单例模式的定义明确为：保证一个类仅有一个实例，并提供一个访问它的全局访问点。

该模式的关键能力在于能在合适的时机创建对象，并且严格限制只创建一个实例。

代码逻辑往往映射现实生活场景，颇具趣味。例如网站登录功能，点击登录后弹出登录框，再次点击不会生成第二个相同的弹窗；又如音乐播放器，当用户打开新音乐时，旧播放界面自动关闭并切换至当前界面。这些都是单例模式的典型应用场景。

实现单例模式的一种经典策略是构建一个类，该类包含一个用于创建实例的方法以及一个状态标记，用于记录实例是否已创建。若实例已存在，则直接返回首次实例化的引用；否则创建新实例。

ES5与ES6实现对比

单例模式的实现

ES5实现方式


var Singleton = function(name) {
 this.name = name;
 //一个标记，用来判断是否已将创建了该类的实例
 this.instance = null;
}
// 提供了一个静态方法，用户可以直接在类上调用
Singleton.getInstance = function(name) {
 // 没有实例化的时候创建一个该类的实例
 if(!this.instance) {
  this.instance = new Singleton(name);
 }
 // 已经实例化了，返回第一次实例化对象的引用
 return this.instance;
}

用户可以通过一个广为人知的接口，对该实例进行访问。

我们尝试对该对象进行两次实例化，观察两次实例化结果是否指向同一个对象。


var a = Singleton.getInstance('sven1');
var b = Singleton.getInstance('sven2');
// 指向的是唯一实例化的对象
console.log(a === b);

返回结果是：true。说明a、b之间是引用关系。

ES6实现方式

创建Singleton类。class关键字和静态函数都是es6新增的。


class Singleton {
 constructor(name) {
  this.name = name;
  this.instance = null;
 }
 // 构造一个广为人知的接口，供用户对该类进行实例化
 static getInstance(name) {
  if(!this.instance) {
   this.instance = new Singleton(name);
  }
  return this.instance;
 }
}

登录弹窗实战应用

单例模式应用实例

我们用一个生活中常见的一个场景来说明单例模式的应用。

任意一个网站，点击登录按钮，只会弹出有且仅有一个登录框，即使后面再点击登录按钮，也不会再弹出多一个弹框。这就是单例模式的典型应用。接下来我们实现它。为了注重单例模式的展示，我们把登录框简化吧😜

在页面上设置一个按钮


<button id="loginBtn">登录</button>

为这个按钮添加点击事件


const btn = document.getElementById('loginBtn');
btn.addEventListener('click', function() {
 loginLayer.getInstance();
}, false);

我们先给一个初始化方法init，在点击按钮之后，在页面上添加一个框框（权当登录框了）


init() {
 var div = document.createElement('div');
 div.classList.add('login-layer');
 div.innerHTML = "我是登录浮窗";
 document.body.appendChild(div);
}

那么接下来要用单例模式实现，点击按钮出现有且仅有一个浮窗，方法就是在构造函数中创建一个标记，第一次点击时创建一个浮窗，用改变标记的状态，再次点击按钮时，根据标记的状态判断是否要再创建一个浮窗。

上源码：


class loginLayer {
 constructor() {
  // 判断页面是否已有浮窗的标记
  this.instance = null;
  this.init();
 }
 init() {
  var div = document.createElement('div');
  div.classList.add('login-layer');
  div.innerHTML = "我是登录浮窗";
  document.body.appendChild(div);
 }
 // 静态方法作为广为人知的接口
 static getInstance() {
  // 根据标记的状态判断是否要再添加浮窗，如果标记不为空就创建一个浮窗
  if(!this.instance) {
   this.instance = new loginLayer();
  }
  return this.instance;
 }
}

当然不要忘记为浮窗添加一个样式，让浮窗显示啦


.login-layer {
 width: 200px;
 height: 200px;
 background-color: rgba(0, 0, 0, .6);
 text-align: center;
 line-height: 200px;
 display: inline-block;
}

最后奉上该实例的源码：


<!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>单例实现登录弹窗</title>
 <style>
  .login-layer {
   width: 200px;
   height: 200px;
   background-color: rgba(0, 0, 0, .6);
   text-align: center;
   line-height: 200px;
   display: inline-block;
  }
 </style>
</head>
<body>
 <button id="loginBtn">登录</button>
 <script>
  const btn = document.getElementById('loginBtn');
  btn.addEventListener('click', function() {
   loginLayer.getInstance();
  }, false);  
  class loginLayer {
   constructor() {
    this.instance = null;
    this.init();
   }
   init() {
    var div = document.createElement('div');
    div.classList.add('login-layer');
    div.innerHTML = "我是登录浮窗";
    document.body.appendChild(div);
   }
   static getInstance() {
    if(!this.instance) {
     this.instance = new loginLayer();
    }
    return this.instance;
   }
  }
 </script>
</body>
</html>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对本站的支持。

作者最新文章

JS处理含Emoji或中文的字符串转数组乱码问题

2026-11-05 16:12:28

JS怎么使用展开运算符合并对象

2026-11-05 14:42:18

ES6+环境下判断JS对象为空的简洁写法

2026-11-05 12:12:23

怎么通过replacer函数自定义JS中JSON的格式化输出

2026-11-05 11:19:44

JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符

2026-11-05 11:16:58