什么是单一案例？

单身意味着一个。示例：它是实例化的对象，共同确保只能创建构造函数的一个实例。为什么要学习单例模式？或者单例模式中有哪些常见的应用场景？它仍然被广泛使用。例如，弹出一个模式框。一般来说，网站上会弹出一个模态框，不停点击才能创建一个。后台还有数据库连接，通常保证连接等等。今天的主题是单格在模态框中的应用。我们必须首先找出如何获得一个案例。

我们先来看看常见的构造函数加原型方法。以下是常见的方法

函数Singleton(uName){ this . username=uName；this.ins=null} singleton . prototype . show username=function(){ return this . username；} var obj 1=new Singleton(' ghost Wu ')；var obj 2=new Singleton(' ghostw U2 ')；console . log(obj 1===obj 2)；//false每次new都会在内存中生成一个新的内存区域来保存一个新的实例，所以这种方式不能保证new只能生成单个实例。因此，如果我们想要创建单个实例，我们必须能够通过New来控制创建实例的过程！这是单个案例的关键，所以要控制这个过程，我们一定不能让用户直接调用构造函数，所以我们要另辟蹊径。

第一种方法：向函数添加静态方法，以控制创建实例的过程

函数Singleton(uName){ this . username=uName；} singleton . prototype . show username=function(){ return this . username；} singleton . getinstance=function(uName){ if(！this . ins){ this . ins=new Singleton(uName)；}返回this.ins} var obj 1=Singleton . GetInstance(' ghost Wu ')；var obj 2=Singleton . GetInstance(' ghostw U2 ')；console . log(obj 1===obj 2)；//true第8行判断ins变量是否保存了一个实例，如果没有，则是新的，否则直接返回。第二次调用时，因为ins已经存在，所以不需要在new中直接返回，这样可以保证是单个实例

第二种方法：利用闭包和即时表达式的特性

函数Singleton(uName){ this . username=uName；} singleton . prototype . show username=function(){ return this . username；} singleton . getinstance=(function(){ var ins=null；返回函数(uName ) { if(！ins){ ins=new Singleton(uName)；}退回这个；} })();var obj 1=Singleton . GetInstance(' ghost Wu ')；var obj 2=Singleton . GetInstance(' ghostw U2 ')；console . log(obj 1===obj 2)；两种方法都可以使用。接下来，我将选择第二种方法弹出一个单模态框

第三，传统的面向对象方式，每次点击都会弹出一个新的模态框

风格：

div { width: 200px高度： 200 px；border:1px固体# 09fbox-shadow : 2px 2px 1px # 666；绝对位置：}html:

输入类型='按钮'值='弹出窗口'

部分js:

var oBtn=document . query selector(' input ')，offset=20，index=1；功能模块(pos){ this . offset=pos | | 20；} module . prototype . create=function(){ var Odiv=document . create element(' div ')；odiv . style . left=(index)* offset ' px '；oDiv.style.top=(索引)*偏移量“px”；ODiv.innerHTML='ghostwu教你在实战中使用设计模式'；返回oDiv} obtn . onclick=function(){ var oDiv=new Module()；document . body . appendchild(odiv . create())；}

第四，用单个案例来转化

html:

输入类型='按钮'值='弹窗1 '输入类型='按钮'值='弹窗2 ' var aBtn=文档。queryselectorall(' input ')，偏移量=20，索引=1；功能模块{这个。offset=pos | | 20}模块。原型。create=function(){ var Odiv=document。创建元素(' div ')；奥迪夫。风格。左=(索引)*偏移量“px”；oDiv.style.top=(索引)*偏移量“px”；oDiv.innerHTML='ghostwu '教你用设计模式实战；返回oDiv}模块。one=(function(){ var ins=null，isExist=false返回函数(pos ){ if(！ins ) ins=新模块(pos)；if(！isExist){ document。尸体。appendchild(ins。create())；isExist=true } } })()；aBtn[0].onclick=function(){ module。一(10)个；} aBtn[1]。onclick=function(){ module。一(10)个；}在模块一中通过变量isExist的两种状态和闭包特性控制元素只能被添加一次

以上这篇[js高手之路]单例模式实现模态框的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。