-
与其他编程语言一样，Javaｓｃｒｉｐｔ也有很多种设计模式，如单模式、代理模式、观察器模式，熟练使用Javaｓｃｒｉｐｔ设计模式可以使我们的代码逻辑更加清晰，更易于维护和重构。
本文将介绍Javaｓｃｒｉｐｔ模式中比较常见和实用的模式，单个示例，主要分为概念和实例部分。
单示例模式概念
第一个例子是什么可以理解，单例模式的设计目的是确保一个类只有一个实例，并提供一个全局访问点。
也许有人仍然不理解单个案例的概念，所以你可以想象一些生命的例子。例如，当注册一个帐户时，如果我们的注册帐户已经存在，那么系统将提示我们的帐户存在。如果我们使用这个帐户登录，我们不能创建另一个相同的帐户，除非我们取消原来的帐户，这是单件模式的生动体现。
类似的例子是网页上的登陆框。不管我们点击多少次登陆按钮，总会有一个登陆杆，不能再创造第二个。
本文以着陆弹框架为例，介绍单壳体的使用方式。
单一示例模式示例
1.demo显示
下载地址是：一个炸弹盒子的例子。
2。代码显示
构建单实例模式框的代码与每个人不同，但是我们的目标是构建一个全局唯一的、可访问的框。
（1）获取DOM对象
函数（id）{
返回类型的ID（ID）：document.getelementbyid 'String' = ID；
}；
首先，为了方便后续的DOM操作，我们利用函数编程的原理封装了ID的目标对象元素方法，可以直接使用$（id）来获得它。
（2）弹框构造函数
var函数=（id，html）{
this.html = HTML；
this.id = ID；
this.open = false；
}；
在这里，我们声明一个模态作为炸弹盒的构造函数，以及公共属性HTML、id和开放的内部定义。HTML用于定义炸弹帧内部的内容，ID用于定义炸弹盒的ID名称，而开放用于确定盒子是否打开。
（3）开放法
modal.prototype.create =函数（）{
如果（！打开）{
VAR模型= document.createelement（'div）；
modal.innerhtml = this.html；
modal.id this.id =；
document.body.appendchild（模态）；
setTimeout（）{（）函数（
Modal.classList.add（'show）；
}，0）；
this.open =真；
}
}；
定义了模型原型链的创建方法。我们创建并插入到DOM DOM，并添加一个类动画显示。这里的列表简介：
ClassList is an attribute of class, an operating element that is more convenient than className, but it is incompatible with the following versions of IE10 for compatibility.
它提供的操作类方法类似于jQuery。
添加（1，2，…）中添加一个或多个元素的类名称，类似于jQuery的addClass（）
删除（1，2，…）中删除一个或多个元素的类名称，类似于jQuery的removeClass（）
包含（级）确定是否存在指定的类的名称，类似于hasclass的jQuery（）。
在这里，我们使用Add方法将show类添加到模式中。
（4）闭合法
modal.prototype.delete =函数（）{
如果（此打开）{
var = $（这个id）；
Modal.classList.add（'hide）；
setTimeout（）{（）函数（
document.body.removechild（模态）；
}，200）；
this.open = false；
}
}；
在定义了Open方法后，定义了闭合帧的方法，将隐藏类动画效果添加到其中的弹丸对象中，最后删除了页面上的子弹盒对象。
（5）创建实例
无功createintance =（函数（）{（）
Var instance;
返回函数（）{
返回| |实例（实例=新的模态（'modal '，'这是一个弹盒））
}
}）；
这是实现单例模式的一个重要部分，我们将分析知识点：
使用闭包封装实例私有变量并返回一个函数
使用| |语法判断如果实例不存在实施后者的方法实例化模型，有实例的直接回报，确保只有一个弹框实例
这个实例的创建也可以理解为代理模式的一部分。
（6）按钮操作
var操作= {
setmodal：空，
打开：函数（）{
this.setmodal = createintance（）；
this.setmodal.create（）；
}，
删除：函数（）{
This.setModal this.setModal.delete（）：；
}
}；
在这里，我们把按钮操作的操作对象，使开闭运算可以通过这个来获得实例setmodal。
（7）绑定事件
$（‘'）。Onclick =函数（）{（）
operate.open（）；
}；
$（'delete）。Onclick =函数（）{（）
operate.delete（）；
}；
最后，我们将打开和删除方法绑定到两个按钮，此时我们实现了一个单模式实现的炸弹盒演示。
后记
这就说明了如何实现单模式，B关于如何为感兴趣的读者构建一个通用的单模式。
文章的灵感来自这本书JavaScrit设计模式和开发实践。
以上就是这篇文章的全部内容，希望能对你有所帮助，同时也希望更多的支持！
tag：实例电脑软件Javascript