当前位置: 首页 > Web前端 > vue.js

js单例模式简单解释

时间:2023-03-31 18:12:42 vue.js

什么是单例模式?顾名思义,单例模式就是保证一个类只有一个实例,也就是创建的两个实例必须相等!构造函数静态属性创建单例函数Singleton(){//如果有实例,返回实例,如果没有,创建实例if(typeofSingleton.instance==='object'){returnSingleton.instance}//自己绑定设置成insta静态属性,保证每次都创建同一个实例Singleton.instance=this}varsigle1=newSingleton()varsigle2=newSingleton()console.log(sigle1===sigle2)//true两个实例相等sigle1.instance=123console.log(sigle2.instance)//123这种方法的缺点是实例属性暴露在外,改变一个实例的属性也会改变另一个实例!当实例sigle1.instance发生变化时,sigle2.instance也会同时发生变化。这不是我们想要的结果!构造函数创建一个不透明的单例constSingleton=function(name){this.name=namethis.instance=null}Singleton.getInstance=function(name){//如果单例已经创建则返回,如果没有创建则创建并返回这个实例||(this.instance=newSingleton(name))}Singleton.prototype.getName=function(){returnthis.name}varinstance1=Singleton.getInstance('instance1')var实例e2=Singleton.getInstance('instance2')console.log(instance1===instance2)//true两个实例相等console.log(instance1.getName(),instance2.getName())//instance1instance1和前一个一个案例类似,使用构造函数的静态结构来存储单例,但是单例不能改变实例属性。但是这种创建单例的方法是不透明的,需要具体告知用户如何使用。使用闭包创建单例functionSingleton(){varMan=function(name){this.name=name}varinstance//函数返回一个函数,返回的函数占用一个实例形成一个闭包,唯一的实例返回函数(arg){if(!instance){instance=newMan(arg)}returninstance}}varsingle=Singleton()console.log(single('tom')===single('jack'))//true两个实例是相等的和前面的例子一样,创建一个带有闭包的单例是不透明的并且容易出现内存泄漏。好了,说了这么多单例的实现方式,下面来说说单例在工作中的具体用法。单例的实际使用可以使用我们html页面中的提示遮罩框来创建,因为创建一次就可以重复使用,不需要再次创建相同的遮罩框。具体面具框的款式这里就不写了,呵呵。//在html页面创建点击按钮点我创建单例//使用立即执行函数创建遮罩层varcreatLayer=(function(innerHTML){var层返回函数(innerHTML){if(!layer){layer=document.createElement('div')layer.innerHTML=innerHTMLlayer.style.display='none'document.body.appendChild(layer)}返回层}})()//点击按钮弹出遮罩框document.getElementById('app').onclick=function(){varlayer=creatLayer('我是遮罩框')layer.style.display='block'}无论按钮被点击多少次,始终只创建一个遮罩框,从而避免重复创建。但是,旁边的creatLayer函数包含了很多业务代码。按照高内聚低耦合的思路,我们来转型!//向creatLayer写入业务代码functionvarcreatLayer=function(innerHTML){varlayer=document.createElement('div')layer.innerHTML=innerHTMLlayer.style.display='none'document.body.appendChild(layer)returnlayer}//单例单例判断交给getSingle函数,与业务逻辑分离vargetSingle=function(fn){vardivreturnfunction(){returndiv||(div=fn.apply(this,arguments))}}varlayer=getSingle(creatLayer)document.getElementById('app').onclick=function(){vardiv=layer('我是遮罩盒')div.style.display='block'}好了,单例模式就详细介绍到这里了。如果想看更多的设计模式,可以看我的后期设计模式系列。觉得对你有帮助记得点个赞哦?