15 单例模式及应用

最新推荐文章于 2024-07-14 15:54:59 发布

weixin_50464014

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量101

点赞数

分类专栏： javascript 文章标签： javascript html html5

本文链接：https://blog.csdn.net/weixin_50464014/article/details/120665977

版权

javascript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

单例模式：只有一个实例，可以全局的访问

如何实现：判断系统是否已经有这个单例，如果有则返回，没有则创建

单例模式优点：内存中只有一个实例，减少了内存的开销，尤其是频繁的创建和销毁实例（比如说是首页页面的缓存）

使用场景：1 全局的缓存 2 弹窗

#es5 实现单例模式

-需求实现一个登陆的弹窗

1.加载完成时，已经创建好这个弹窗了，一开始是隐藏的状态，弹窗出现

<body>
<button id="button">登录</button>
<script>
var loginLayer=(function(){
    var div=cocument.createElement('div')
    div.innerHTML='我是登陆的弹窗'
    div.style.display='none'
    document.body.appendChild(div)
    return div
})()
document.getElementById('button').onclick=function(){
    loginLayer.style.display='block'
}
</script>
</body>
//缺点：资源的浪费，对于不需要登陆的人，白创建了这个div
//若点击时创建
<script>
var createLoginLayer=function(){
    var div=cocument.createElement('div')
    div.innerHTML='我是登陆的弹窗'
    div.style.display='none'
    document.body.appendChild(div)
    return div
}
document.getElementById('button').onclick=function(){
    var loginLayer=createLoginLayer()
    loginLayer.style.display='block'
}
//则会点几次创建几个
//使用单例模式
var createLoginLayer=(
function(){
    var div
    return function(){
    if(!div){
        var div=cocument.createElement('div')
        div.innerHTML='我是登陆的弹窗'
        div.style.display='none'
        document.body.appendChild(div)
    }
    return div
    }
}
)()
document.getElementById('button').onclick=function(){
    var loginLayer=createLoginLayer()
    loginLayer.style.display='block'
}
//还可以改进
var getSingle=function(fn){
    var result
    return function(){
        return result ||(result=fn.apply(this,arguments))
    }
}
var createLoginLayer=function(){
    var div=document.createElement('div')
    div.innerHTML='我是登陆的弹窗'
    div.style.display='none'
    document.body.appendChild(div)
    return div
}
var createSingleLogin=getSingle(createLoginLayer)
document.getElementById('button').onclick=function(){
    var loginLayer=createSingleLogin()
    loginLayer.style.display='block'
}
</script>

#es6 实现单例模式

class LyEdu{
    constructor(name,creator,products){
        this.name=name
        this.creator=creator
        this.products=products
    }
    static getInstance(name,creator,products){
        if(!this.instance)    
            this.instance=new LyEdu(name,creator,products)
        return this.instance
    }
}
let lyCom=LyEdu.getInstance(...)
let lyComCom=LyEdu.getInstance(...)
lyCom===lyComCom //true

weixin_50464014

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
15 单例模式及应用

单例模式：只有一个实例，可以全局的访问如何实现：判断系统是否已经有这个单例，如果有则返回，没有则创建单例模式优点：内存中只有一个实例，减少了内存的开销，尤其是频繁的创建和销毁实例（比如说是首页页面的缓存）使用场景：1 全局的缓存 2 弹窗#es5 实现单例模式-需求实现一个登陆的弹窗1.加载完成时，已经创建好这个弹窗了，一开始是隐藏的状态，弹窗出现<body><button id="button">登录</button><scri
复制链接

扫一扫