javascript设计模式-单例模式

最新推荐文章于 2022-11-09 16:42:52 发布

一头猪哼哼

最新推荐文章于 2022-11-09 16:42:52 发布

阅读量115

点赞数

分类专栏： web前端文章标签： javascript 设计模式

本文链接：https://blog.csdn.net/qq_37210928/article/details/117455871

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

单例模式的概念：

单例模式是指创建一个只有一个实例的类，像js里的全局对象即是最简单的单例模式

用闭包实现的一个单例模式

let CreateSingleton=(function(){
    var instance=null

    return function(name){
        this.name=name


        if(instance){
            return instance
        }

        return instance=this
    }
})()

CreateSingleton.prototype.getName=function(){
    console.log(this.name)
}

var s1=new CreateSingleton("张三")
var s2=new CreateSingleton("李四")

console.log(s1===s2)

s1.getName()  //张三

s2.getName()  //张三

闭包实现代理单例以实现创建对象和对象判断的解耦

//改造下，实现代理单例，将创建对象和，对象判断解耦
let CreateSingleton=(function(){
    var instance=null

    return function(name){
        if(instance){
            return instance
        }

        return instance=new Singleton(name)
    }
})()

function Singleton(name){
    this.name=name
}

Singleton.prototype.getName=function(){
    console.log(this.name)
}

var s1=new CreateSingleton("张三")
var s2=new CreateSingleton("李四")

console.log(s1===s2)

s1.getName()

s2.getName()

实现一个惰性单例，创建一个唯一的提示信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单例模式</title>
</head>
<body>
    <button id="button">点我一下</button>
    <script src="singleton.js"></script>
    <script>
        // 使用惰性单例

        let getSingleton=function(fn){
            var result=null
            return function(){
                return result||(result=fn.apply(this,arguments))
            } 
        }

        let CreateMessage=function(html){
            var div=document.createElement("div")
            div.innerHTML=html
            div.style.display='none'
            document.body.appendChild(div)
            return div
        }

        let singleMessage=getSingleton(CreateMessage)

        document.getElementById("button").onclick=function(){
            let message=singleMessage('<a href="https://www.w3cschool.cn/" style="text-decoration:none;" target="_blank">W3Cschool.cn</a>')
        
            message.style.display='block'
        }

        
    </script>
</body>
</html>

一头猪哼哼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
javascript设计模式-单例模式

单例模式的概念：单例模式是指创建一个只有一个实例的类，像js里的全局对象即是最简单的单例模式用闭包实现的一个单例模式let CreateSingleton=(function(){ var instance=null return function(name){ this.name=name if(instance){ return instance } return instance=
复制链接

扫一扫