JavaScript中如何实现单例模式

这篇文章主要为大家展示了“JavaScript中如何实现单例模式”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JavaScript中如何实现单例模式”这篇文章吧。

前言：

设计模式在我们编程中是十分重要的！

设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

最近在学习设计模式，铁铁们一起来卷嘛？

1、什么是设计模式

在软件设计过程中，针对特定问题的简洁而优雅的解决方案。

把之前的经验总结并且合理运用到某处场景上，能够解决实际的问题。

2、设计模式五大设计原则（SOLID）

S-单一职责原则

即一个程序只做好一件事

O-开放封闭原则

可扩展开放，对修改封闭

L-里氏置换原则

子类能覆盖父类，并能出现在父类出现的地方

I-接口独立原则

保持接口的单一独立

D-依赖导致原则

使用方法只关注接口而不关注具体类的实现

3、为什么需要设计模式？

易读性

使用设计模式能够提升我们的代码可读性，提升后续开发效率

可拓展性

使用设计模式对代码解耦，能很好的增强代码的yi修改性和拓展性

复用性

使用设计模式可以复用已有的解决方案，无需重复相同工作

可靠性

使用设计模式能够增加系统的健壮性，使代码编写真正工程化

4、单例模式

定义：唯一&全局访问。保证一个类仅有一个实例，并提供一个访问它的全局访问点。

另外一种多例模式，通过一个类构造出多个不一样的实例，这就是多例模式。

单例模式与多例模式最本质的区别：实例的数量。

单例模式永远只有一个实例，这个实例可以被缓存起来，可以复用。

应用场景：就是能被缓存的内容，例如登录弹窗。

我觉得就是一个地方如果在你的项目中可以用到两次或两次以上，都可以尝试一下这个，能够减少很多代码。

来看这段伪代码：

const creatLoginLayer = () => {
    const div = document.createElement("div");
    div.innerHtml = "登录浮窗";
    div.style.display = "none";
    document.body.appendChild(div);
    return div;
};

document.getElementById("loginBtn").onclick = () => {
    const loginLayer = creatLoginLayer();
    loginLayer.style.display = "block";
};

creatLoginLayer的作用是创建一个登录浮窗并将节点添加到body上，下面做的是登录按钮的一个点击事件，点击登录按钮就会创建登录浮窗并将display从none改为block，将他显示出来。

这个逻辑是没毛病的，但是我们想一下，每点击一下登录按钮就要执行这些代码，一个项目中如果有很多地方要呢？我们上面这短短几行而已，如果是上百上千甚至上万呢？是不是就非常损耗性能，这个时候，我们的单例模式就派上了用场。

使用单例模式后：

const getSingle = (fn) => {
    let result;
    return (...rest) =>{
        return result || (result = fn.apply(this.rest));
    };
};

const creatLoginLayer = () => {
    const div = document.createElement("div");
    div.innerHtml = "登录浮窗";
    div.style.display = "none";
    document.body.appendChild(div);
    return div;
};

const createSingleLoginLayer = getSingle(createLoginLayer);

document.getElementById("loginBtn").onclick = () => {
    const loginLayer = createSingleLoginLayer();
    loginLayer.style.display = "block";
};

可以见到，增加了一个getSingle函数，这里有个闭包的概念，result变量只要一直在引用就不会被销毁，起到了一个缓存的作用，函数的参数是一个function，如果result是null或者undefined就执行后面的逻辑，将这个传进来的函数的返回值也就是这个div赋给result，这样我们下面的函数就执行一次就可以了，下次调用的时候result有值，所以就直接返回了，不会在执行后面的逻辑。

以上是“JavaScript中如何实现单例模式”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！