JavaScript单例模式详解：概念解析与登录弹窗实战

JavaScript单例模式详解：概念解析与登录弹窗实战

前言

与众多编程语言类似，JavaScript也包含丰富的设计模式，如单例模式、代理模式和观察者模式等。熟练掌握并应用这些设计模式，有助于提升代码逻辑的清晰度，使后续的代码维护与重构工作更加高效便捷。

本文将重点介绍JavaScript中常见且实用的单例模式，内容主要涵盖概念解析与实例演示两部分。在展示具体代码示例的同时，还会对代码中涉及的关键知识点进行补充说明。

单例模式概念解析

单例模式概念

首先明确单例模式的定义：其核心目标是确保一个类在整个应用程序中只存在一个实例，并提供一个全局的访问入口以便获取该实例。

若对上述概念仍感抽象，可参考生活中的实际场景。例如在注册账号时，若系统检测到该账号已存在，会提示“账号已存在，是否登录”，从而阻止用户创建重复账号，除非先注销原账号。这一机制正是单例模式的生动体现。

另一个常见例子是网页上的登录弹窗。无论用户点击多少次登录按钮，界面上始终只显示一个登录窗口，系统不会创建第二个相同的弹窗实例。

本文将以上述登录弹窗为例，详细讲解单例模式的具体应用方式。

单例模式代码实现

单例模式实例

1.demo展示

相关代码下载地址为：弹框实例

2.代码展示

虽然不同开发者构建单例模式弹窗的代码实现可能各异，但其核心目标一致：构建一个全局唯一且可被访问的弹窗实例。接下来我们将分步骤实现该示例。

（1）获取DOM对象

var $ = function(id) {
 return typeof id === 'string' ? document.getElementById(id) : id; 
};

为了便于后续对DOM元素进行操作，我们基于函数式编程思想，封装了一个获取指定id元素对象的方法。通过直接调用即可快速获取目标DOM节点。

（2）弹框构造函数

var Modal = function(id, html) {
 this.html = html;
 this.id = id;
 this.open = false;
};

此处声明了一个名为Modal的构造函数用于创建弹窗实例。在构造函数内部，我们定义了三个公有属性：html、id和open。其中，html用于定义弹窗内部的内容，id用于标识弹窗的唯一名称，open则用于标记弹窗当前的打开状态。

（3）open方法

Modal.prototype.create = function() {
 if (!this.open) {
 var modal = document.createElement('div');
 modal.innerHTML = this.html;
 modal.id = this.id;
 document.body.appendChild(modal);
 setTimeout(function() {
  modal.classList.add('show');
 }, 0);
 this.open = true;
 }
};

我们在Modal的原型链上定义了create方法。该方法内部负责创建弹窗元素并将其插入到DOM中，同时为弹窗添加class为“show”的动画效果。此处简要介绍classList属性：

classList是一个比className更便捷的操作元素class名的属性，但其兼容性存在局限，不支持IE10以下的浏览器版本：

其提供的操作class的方法与jQuery类似，主要包括：

• add(class1, class2, …) 在元素中添加一个或多个类名，功能类似jQuery的addClass()
• remove(class1, class2, …) 移除元素中一个或多个类名，功能类似jQuery的removeClass()
• contains(class) 判断指定的类名是否存在，功能类似jQuery的hasClass()

在本实例中，我们调用了add方法为Modal元素添加show类，以触发显示动画。

（4）close方法

Modal.prototype.delete = function() {
 if (this.open) {
 var modal = $(this.id);
 modal.classList.add('hide'); 
 setTimeout(function() {
  document.body.removeChild(modal);
 }, 200);
 this.open = false;
 }
};

在定义open方法之后，我们定义了关闭弹窗的方法。该方法内部首先给弹窗对象添加hide类以触发隐藏动画，随后在页面加载延迟后移除弹窗DOM对象。

（5）创建实例

var createIntance = (function() {
 var instance;
 return function() {
 return instance || (instance = new Modal('modal', '这是一个弹框'))
 }
})();

这是实现单例模式的关键部分，我们来分析其中的核心知识点：

使用闭包封装了instance私有变量，并返回一个函数。

利用||语法进行判断：如果instance不存在，则执行后者的Modal实例化方法；如果instance已存在，则直接返回该instance。这一机制确保了系统中始终只存在一个弹窗实例。

从某种角度看，本实例的创建过程也可视为代理模式的一部分应用。

（6）按钮操作

var operate = {
 setModal: null,
 open: function() {
 this.setModal = createIntance();
 this.setModal.create();
 },
 delete: function() {
 this.setModal ? this.setModal.delete() : '';
 }
};

我们将按钮的操作逻辑封装在operate对象中，使得打开和关闭操作可以通过this获取实例setModal，从而统一管理弹窗状态。

（7）绑定事件

$('open').onclick = function() {
 operate.open();
};
$('delete').onclick = function() {
 operate.delete();
};

最后，我们将打开和关闭方法分别绑定到对应的两个按钮上。至此，基于单例模式实现的弹窗Demo便完整实现了。

总结与参考

结语

本文仅演示了单例模式的一种具体实现方式。关于如何构建更加通用的单例模式，留给有兴趣的读者进一步探索。

本文灵感来源于《JavaScript设计模式与开发实践》一书。

以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持本站！