分析Javascript单例模式的概念和例子

序

和其他编程语言一样，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 () remove (class1，class2，)从一个元素中移除一个或多个类名，像jQuery的removeClass() contains(class)判断指定的类名是否存在，像jQuery的hasClass()，这里我们使用add方法将show classes添加到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 '，'这是一个项目符号框')} })))；这是实现单一模式的重要部分。我们来分析一下知识点：

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

使用| |语法，判断如果实例不存在，则执行后面的实例化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模式实现了弹出演示。

标签

本文只演示了单例模式的一个实现，如何构建一个通用的单例模式留给感兴趣的读者。

这篇文章的灵感来自于《Javascrit设计模式与开发实践》这本书。

以上就是本文的全部内容。希望对大家有帮助，支持我们！