在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。
<强>单例模式的定义是:保证一个类仅有一个一个实例,并提供一个访问它的全局访问点。
单例模式能在合适的时候创建对象,并且创建唯一的一个。
代码接近于生活,很有意思。比如一个网站的登录,点击登录后弹出一个登录弹框,即使再次点击,也不会再出现一个相同的弹框,又或者一个音乐播放程序,如果用户打开了一个音乐,又想打开一个音乐,那么之前的播放界面就会自动关闭,切换到当前的播放界面。这些都是单例模式的应用场景。
要实现一个单例模式,一个经典的方式是创建一个类,类中又一个方法能创建该类的实例对象,还有一个标记,记录是否已经创了过了实例对象。如果对象已经存在,就返回第一次实例化对象的引用。
<强> es5实现方式
var单=function(名字){
this.name=名称;//一个标记,用来判断是否已将创建了该类的实例
这一点。实例=零;
}//提供了一个静态方法,用户可以直接在类上调用
单例。getInstance=function(名字){//没有实例化的时候创建一个该类的实例
如果(! this.instance) {
这一点。=new Singleton实例(名称);
}//已经实例化了,返回第一次实例化对象的引用
返回this.instance;
}
用户可以通过一个广为人知的接口,对该实例进行访问。
我们尝试对该对象进行两次实例化,观察两次实例化结果是否指向同一个对象。
var=Singleton.getInstance (“sven1”);
var b=Singleton.getInstance (“sven2”);//指向的是唯一实例化的对象
控制台。日志(a===b);
返回结果是:真的。说明a, b之间是引用关系。
<强> es6实现方式
创建单例类的. class关键字和静态函数都是es6新增的。
单例类{
构造函数(名字){
this.name=名称;
这一点。实例=零;
}//构造一个广为人知的接口,供用户对该类进行实例化
静态getInstance () {
如果(! this.instance) {
这一点。=new Singleton实例(名称);
}
返回this.instance;
}
}
我们用一个生活中常见的一个场景来说明单例模式的应用。
任意一个网站,点击登录按钮,只会弹出有且仅有一个登录框,即使后面再点击登录按钮,也不会再弹出多一个弹框。这就是单例模式的典型应用。接下来我们实现它。为了注重单例模式的展示,我们把登录框简化吧& # 128540;
在页面上设置一个按钮
& lt;按钮id=" loginBtn "祝辞登录& lt;/button>
为这个按钮添加点击事件
const btn=. getelementbyid (“loginBtn”);
btn。addEventListener(“点击”,函数(){
loginLayer.getInstance ();
},假);
我们先给一个初始化方法初始化,在点击按钮之后,在页面上添加一个框框(权当登录框了)
init () {
var div=document.createElement (div);
div.classList.add(登录层);
div.innerHTML="我是登录浮窗”;
document.body.appendChild (div);
}
那么接下来要用单例模式实现,点击按钮出现有且仅有一个浮窗,方法就是在构造函数中创建一个标记,第一次点击时创建一个浮窗,用改变标记的状态,再次点击按钮时,根据标记的状态判断是否要再创建一个浮窗。
<强>上源码:
类loginLayer {
构造函数(){//判断页面是否已有浮窗的标记
这一点。实例=零;
this.init ();
}
init () {
var div=document.createElement (div);
div.classList.add(登录层);
div.innerHTML="我是登录浮窗”;
document.body.appendChild (div);
}//静态方法作为广为人知的接口
静态getInstance () {//根据标记的状态判断是否要再添加浮窗,如果标记不为空就创建一个浮窗
如果(! this.instance) {
这一点。实例=new loginLayer ();
}
返回this.instance;
}
}
