如何使用Javascript实现单例模式

发布时间：2021-04-26 10:17:16 作者：小新
来源：亿速云阅读：143

这篇文章给大家分享的是有关如何使用Javascript实现单例模式的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

JavaScript是什么

JavaScript是一种直译式的脚本语言，其解释器被称为JavaScript引擎，是浏览器的一部分，JavaScript是被广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。

概述

单例模式也称为单体模式，规定一个类只有一个实例，并且提供可全局访问点；

在读这篇文章之前，也许你对单例模式的概念感到模糊或者不清楚，但是其实在日常的开发中你肯定用到过单例模式；

JavaScript中没有类的定义，单例模式的特点是”唯一“和”全局访问“，那么我们可以联想到JavaScript中的全局对象，利用ES6的let不允许重复声明的特性，刚好符合这两个特点；是的，全局对象是最简单的单例模式；

let obj = {
    name:"咸鱼",
    getName:function(){}
}

上述代码中可以知道obj就是一个单例，因为obj刚好就符合单例模式的两大特点："唯一"和"可全局访问"；

但是我们并不建议这么实现单例，因为全局对象/全局变量会有一些弊端：

污染命名空间（容易变量名冲突）维护时不容易管控 (搞不好就直接覆盖了)

代码实现

简单版单例模式

分析：只能有一个实例，所以我们需要使用if分支来判断，如果已经存在就直接返回，如果不存在就新建一个实例；

let Singleton = function(name){
    this.name = name;
    this.instance = null; 
}

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

Singleton.getInstance = function(name){
    if(this.instace){
        return this.instance; 
    }
    return this.instance = new Singleton(name);
}

let winner = Singleton.getInstance("winner");   //winner
console.log(winner.getName());
let sunner = Singleton.getInstance("sunner");   //winner
console.log(sunner.getName())

上面代码中我们是通过一个变量instance的值来进行判断是否已存在实例，如果存在就直接返回this.instance，如果不存在，就新建实例并赋值给instance；

但是上面的代码还是存在问题，因为创建对象的操作和判断实例的操作耦合在一起，并不符合”单一职责原则“；

改良版

思路：通过一个闭包，来实现判断实例的操作；

闭包警告：不理解闭包的同学请先学习闭包

let CreateSingleton = (function(){
    let instance = null;
    return function(name){
        this.name = name;
        if(instance){
            return instance
        }
        return instance = this;
    }
})()


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

let winner = new CreateSingleton("winner");  //winner
console.log(winner.getName());
let sunner = new CreateSingleton("sunner");  //winner
console.log(sunner.getName())

代理版单例模式

通过代理的形式，将创建对象的操作和实例判断的操作进行解耦拆分，实现更小粒度的划分，符合”单一职责原则“；

let ProxyCreateSingleton = (function(){
    let instance = null;
    return function(name){
        if(instance){
            return instance
        }
        return instance = new Singlton(name);
    }
})();

let Singlton = function(name){
    this.name = name;
} 

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

let winner = new ProxyCreateSingleton("winner");
console.log(winner.getName());
let sunner = new ProxyCreateSingleton("sunner");
console.log(sunner.getName());

上面的代码中，ProxyCreateSingleton()只负责判断实例，Singlton只负责创建对象和赋值；

惰性单例模式

我们经常会有这样的场景：页面多次调用都有弹窗提示，只是提示内容不一样；

这个时候我们可以立马想到是单例模式，弹窗就是单例实例，提示内容是参数传递；我们可以用惰性单例模式来实现它；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="loginBtn">有梦想的咸鱼</div>
</body>
<script>
let getSingleton = function(fn) {
    var result;
    return function() {
        return result || (result = fn.apply(this, arguments)); // 确定this上下文并传递参数
    }
}
let createAlertMessage = function(html) {
    var div = document.createElement('div');
    div.innerHTML = html;
    div.style.display = 'none';
    document.body.appendChild(div);
    return div;
}

let createSingleAlertMessage = getSingleton(createAlertMessage);
    document.getElementById('loginBtn').onclick=function(){
        let alertMessage = createSingleAlertMessage('看来真的是个咸鱼');
        alertMessage.style.display = 'block';
    }
</script>
</html>

惰性单例是指的是页面开始加载的时候我们的实例是没有进行创建的，是当我们点击页面的div之后才开始创建实例（按需创建），这可以提高我们的网页性能，加快我们的页面渲染速度；

感谢各位的阅读！关于“如何使用Javascript实现单例模式”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！