JavaScript设计模式（一）--- 单例模式

最新推荐文章于 2024-02-07 21:27:33 发布

蔣以夢

最新推荐文章于 2024-02-07 21:27:33 发布

阅读量83

点赞数

分类专栏： JavaScript设计模式

本文链接：https://blog.csdn.net/weixin_43165676/article/details/115167512

版权

JavaScript设计模式专栏收录该内容

3 篇文章 0 订阅

订阅专栏

单例模式

单列模式属于创建型模式，该模式创建的单例类只能有一个实例，并且是自己创建自己的唯一实例；
提供可全局访问点；
使用场景：弹窗、登录框等（不需要重复创建，如果已经创建，则直接使用）

全局对象是最简单的单列模式

var person ={
    // 属性名：属性值,
    name:"Jinag Liangji",
    sayName: function (){
        print("my name is "+ this.name)
    }
}

上述代码中的Person对象就是一个单例，符合“唯一”和“可全局访问”的特点
缺点：污染命名空间、不好维护

简单版单列模式

为了保持唯一性，使用一个if判断语句，若存在直接返回，不存在则创建一个实列

let SingleObj = function(name){
    this.name = name;
    this.projrct = null;
}

//给SingleObj类的原型添加getName方法
SingleObj.prototype.getName = function(){
    console.log(this.name);
}
//给SingleObj类添加getProject方法
SingleObj.getProject = function(name){
    if(this.projrct){
        console.log("project已创建")
        return this.projrct;
    }
    return this.projrct = new SingleObj(name);
}

let math = SingleObj.getProject("math");
math.getName()

let chinese = SingleObj.getProject("chinese");
chinese.getName()
// math
// project已创建
// math

以上方式违反了单一职责

使用闭包实现单例模式

let CreateSingleObj = (function () {
    let instance = null;
    return function (name) {
        this.name = name;
        if (instance){
            console.log("instance已创建")
            return instance
        }
        return instance = this
    }
})()

CreateSingleObj.prototype.getName = function () {
    console.log(this.name)
}
let number1 = new CreateSingleObj("007")
number1.getName()
let number2 = new CreateSingleObj("009")
number2.getName()
// 007
// instance已创建
// 007

使用场景

页面多次调用都有弹窗提示，知识弹窗内容不同
弹窗 — 单例实例；弹窗中的内容 — 传递的参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单例模式</title>
</head>
<body>
<button id="singleDiv">点击创建div并显示</button>
</body>
<script>
    let getSingleton = function (fn){
        var res ;
        return function () {
            if (res){
                alert('div已创建，不可再创建')
                return res
            }else{
                res = fn.apply(this,arguments)
                return res
            }
        }
    }
    //创建新的div
    let CreateMessage = function (html) {
        var div = document.createElement("div");
        div.innerHTML = html;
        div.style.display = 'none';
        document.body.appendChild(div);
        return div;
    }
    //点击div 创建新的div并显示
    let CreateSingleMessage = getSingleton(CreateMessage);
    document.getElementById('singleDiv').onclick = function () {
        let alterMessage = CreateSingleMessage('hello')
        alterMessage.style.display='block'
    }
</script>
</html>

蔣以夢

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript设计模式（一）--- 单例模式

单例模式单列模式属于创建型模式，该模式创建的单例类只能有一个实例，并且是自己创建自己的唯一实例；提供可全局访问点；使用场景：弹窗、登录框等（不需要重复创建，如果已经创建，则直接使用）全局对象是最简单的单列模式var person ={ // 属性名：属性值, name:"Jinag Liangji", sayName: function (){ print("my name is "+ this.name) }}上述代码中的Person对象就
复制链接

扫一扫