概述
- 单例模式
- es5实现
- es6实现
- 惰性单例
- 通用惰性单例实例
单例模式
一开始不创建实例对象,当第一次使用时才创建
用一个变量标志当前是否已经为某个类创建过对象,如果已创建则在下次获取时返回之前创建的实例对象
es5实现
function Singleton(name){//对象构造方法
this.name=name;
this.instance;
}
Singleton.prototype.getName=()=>{//对象原型方法
console.log(this.name);
}
Singleton.getInstance=(name)=>{//对象静态方法
//如果有实例则返回,没有则创建并返回
return this.instance || (this.instance=new Singleton(name))
}
let a=Singleton.getInstance('aa')
let b=Singleton.getInstance('bb')
console.log(a,b,a===b);
//Singleton { name: 'aa' } Singleton { name: 'aa' } true
//a===b说明只第一次访问的时候创建了实例,后面每次调用会获取第一次创建的同一个实例
es6实现
class Singleton{//类声明
constructor(name){//类构造器
this.name=name;
this.instance;
}
getName(){//原型方法
console.log(this.name);
}
static getInstance(name){//静态方法
//如果有实例则返回,没有则创建并返回
return this.instance || (this.instance=new Singleton(name))
}
}
let c=Singleton.getInstance('cc')
let d=Singleton.getInstance('dd')
console.log(c,d,c===d);
//Singleton { name: 'aa' } Singleton { name: 'aa' } true
惰性单例
一开始不创建实例对象,当第一次使用的时候才创建
通用惰性单例实例
当第一次点击登录按钮时才渲染登录框,无论点击多少次,都弹出同一个登录框
let getSingle=function(fn){
let result
return function(){
//如果有实例则返回,没有则创建并返回
return result || (result=fn.apply(this,arguments))
}
}
//单一责任原则,将创建实例和创建DOM的操作解耦
let createLoginLayer=function(){
let div=document.createElement('div')
div.innerHTML="我是登录框"
div.style.display="none"
document.body.appendChild(div)
return div
}
//第一次点击登录的时候才渲染登录框,多次点击登录都返回同一个登录框,不再重新插入DOM
document.getElementById('btnLogin').onclick=function(){
let loginLayer=getSingle(createLoginLayer)
loginLayer.style.display="block"
}
//点击关闭的时候设置登录框不可见,下次点击登录的时候就不需要重新生成插入DOM,只需要设置登录框可见
document.getElementById('btnClose').onclick=function(){
let loginLayer=getSingle(createLoginLayer)
loginLayer.style.display="none"
}
(ps:有说的不对的地方欢迎留言讨论)
最后
以上就是虚心学姐为你收集整理的js单例模式的es5实现和es6实现,以及通用惰性单例实现单例模式惰性单例的全部内容,希望文章能够帮你解决js单例模式的es5实现和es6实现,以及通用惰性单例实现单例模式惰性单例所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复