Javascript单例模式的介绍和示例

序

事实上，和其他编程语言一样，Javascript也有很多设计模式，比如singleton模式、proxy模式、observer模式等。熟练使用Javascript设计模式可以使我们的代码逻辑更清晰，更容易维护和重构。

本文将介绍Javascript中的单例模式。在传统开发工程师看来，一个简单的例子就是确保一个类只有一个实例。一般实现方法是先判断一个实例是否存在，存在就直接返回，不存在就创建，然后返回。这确保了一个类只有一个实例对象。在JavaScript中，singleton充当名称空间提供者，从全局名称空间提供唯一的访问点来访问对象。我们来看看详细的介绍。

单一模式概念

首先，什么是单例模式？可以这样理解：singleton模式旨在确保一个类只有一个实例，并提供一个全局访问点。

可能有些人还不理解单个案例的概念，所以你可以想象一些生活中的例子。比如注册账户时，如果我们注册的账户已经存在，系统会提示我们“要用这个账户登录吗？”除非取消原始帐户，否则我们无法再次创建相同的帐户。这就是单件模式的生动体现。

一个类似的例子是网页上的落地子弹框。无论我们点击多少次落地按钮，界面上始终只会显示一个落地弹框，无法创建第二个。

本文将以落地炸弹框架为例，介绍单件模式的使用。

单一模式示例

1 .演示展示

2.代码显示

每个人都可以编写不同的代码来构建单例模式项目符号框的实例，但目的是构建一个全局唯一且可访问的项目符号框。接下来，我们将逐步实现这个示例。

(1)获取一个DOM对象

var $=function(id) {返回类型id==='string '？document . getelementbyid(id): id；};首先，为了方便后面对DOM的一些操作，我们利用函数编程的原理，封装了获取目标id的元素对象方法，使用$(id)可以直接获取。

(2)弹性框架结构

var Modal=function(id，html){ this.html=html；this.id=idthis.open=false};这里，我们声明一个Modal作为项目符号框的构造函数，并在其中定义公共属性html、id和open。Html用于定义项目符号框内部的内容，id用于定义项目符号框的id名称，open用于判断项目符号框是否打开。

(3)开放式方法

modal . prototype . create=function(){ if(！this . open){ var modal=document . create element(' div ')；this.html；modal . id=this . id；document.body.appendChild(模式)；setTimeout(function(){ modal . class list . add(' show '))；}, 0);this.open=true}};我们在Modal的原型链上定义了创建方法。在方法内部，我们创建一个项目符号框并将其插入到DOM中，并在项目符号框中添加一个带有类“show”的动画效果。以下是对classList的简单介绍：

ClassList是operation元素类的一个属性，比className方便，但在兼容性方面与IE10的以下版本不兼容：

类列表兼容性

它提供的操作类方法类似于jQuery，主要包括

添加(1类，2类，)向元素添加一个或多个类名，类似于jQuery的addClass()

移除(类别1，类别2，)从元素中移除一个或多个类名，类似于jQuery的removeClass()

Contains(类)确定指定的类名是否存在，类似于jQuery的hasClass()

这里我们使用add方法将show类添加到Modal中。

(4)关闭方法

modal . prototype . delete=function(){ if(this . open){ var modal=$(this . id)；modal . class list . add(' hide ')；setTimeout(函数(){ document.body.removeChild(模态)；}, 200);this.open=false}};在定义了打开方法之后，我们在这里定义了关闭项目符号框的方法，在其中给项目符号框对象添加隐藏动画效果，最后从页面中移除项目符号框对象。

(5)创建一个实例

var createIntance=(function(){ var instance；return function(){ return instance | |(instance=new modal(' modal '，'这是一个项目符号框')} })))；这是实现单一模式的重要部分。我们来分析一下知识点：

1.用闭包封装实例私有变量并返回一个函数

2.使用| |语法，判断如果实例不存在，则执行后面的实例化Modal方法，如果存在，则直接返回实例，保证只有一个项目符号框实例。

这个实例的创建也可以理解为代理模式的一部分。

(6)按钮操作

var operate={ setModal: null，open : function(){ this . setmodal=createIntance()；this . SetModal . create()；}，delete:函数(){ this.setModal？this . SetModal . delete():“”；}};这里我们把按钮操作放在operate对象中，这样打开和关闭操作就可以通过这个获得实例setModal。

(7)绑定事件

$(“打开”)。onclick=function(){ operate . open()；};$(“删除”)。onclick=function(){ operate . delete()；};最后，我们将open和delete方法绑定到两个按钮上，到目前为止，我们已经用singleton模式实现了弹出演示。

摘要

本文只演示了单例模式的一个实现，如何构建一个通用的单例模式留给感兴趣的读者。以上就是本文的全部内容，希望能给大家的学习或工作带来一些帮助。