JavaScript中的设计模式 单例模式

目录
  • 1、什么是设计模式
  • 2、设计模式五大设计原则（SOLID）
  • 3、为什么需要设计模式？
  • 4、单例模式

前言：

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

设计模式（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中的设计模式 单例模式的文章就介绍到这了,更多相关JavaScript中的单例模式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 《javascript设计模式》学习笔记三：Javascript面向对象程序设计单例模式原理与实现方法分析

    本文实例讲述了Javascript面向对象程序设计单例模式原理与实现方法.分享给大家供大家参考,具体如下: 1.单例模式概述 源自百度百科对于单例模式的定义: 单例模式的意思就是只有一个实例.单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例.这个类称为单例类. 在javascript的世界里,其实没有严格的对象和类定义,"一切皆对象"使得javascript中都是对象,不能像java,c++或者php使用特定的方法返回一个实例来实现,因此对javascript来

  • JavaScript设计模式之单例模式简单实例教程

    JavaScript设计模式之单例模式简单实例教程

    本文实例讲述了JavaScript设计模式之单例模式.分享给大家供大家参考,具体如下: 一.单例模式概念 单例就是保证一个类只有一个实例,实现方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象.在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象. 二.单例模式的作用和注意事项 模式作用: 1.模块间通信 2.系统中某个类的对象只能存在一个 3.保护自己的属性和方法 注意事项: 1.注意th

  • JS 设计模式之：单例模式定义与实现方法浅析

    本文实例讲述了JS 设计模式之:单例模式定义与实现方法.分享给大家供大家参考,具体如下: 良好的设计模式可以显著提高代码的可读性,降低复杂度和维护成本.笔者打算通过几篇文章通俗地讲一讲常见的或者实用的设计模式. 今天先从最简单的一个入手:单例模式. 文中的示例代码会使用 ES6 语法,尽量简化不必要的细节 概念 单例模式(Singleton)属于创建型的设计模式,它限制我们只能创建单一对象或者某个类的单一实例. 通常情况下,使用该模式是为了控制整个应用程序的状态.在日常的开发中,我们遇到的单例模

  • js设计模式之单例模式原理与用法详解

    js设计模式之单例模式原理与用法详解

    本文实例讲述了js设计模式之单例模式原理与用.分享给大家供大家参考,具体如下: 关于设计模式,我的理解是它是业务代码的提前解决方案.意思就是说在没有真正的业务之前,设计模式就存在了,这个是显然的.设计模式是人长期从事业务总结的具有普通适用性的解决方案. 就个人来讲,写了太多的命令式编程代码,所谓命令式代码就是业务需要怎样就写怎么样的功能,比如添加一个点击事件,比如进行一个验证等扥.写就写了很少站在设计模式的角度或者前人的角度去改善代码. 不给自己找客观原因,最近开始关注设计模式,尝试从设计模式的

  • JavaScript设计模式---单例模式详解【四种基本形式】

    本文实例讲述了JavaScript设计模式---单例模式.分享给大家供大家参考,具体如下: 单例模式也称为单体模式,其中: 1,单体模式用于创建命名空间,将系列关联的属性和方法组织成一个逻辑单元,减少全局变量. 逻辑单元中的代码通过单一的变量进行访问. 2,三个特点: ① 该类只有一个实例: ② 该类自行创建该实例,即在该类内部创建自身的实例对象: ③ 向整个系统公开这个实例接口 3,单体模式有四种基本形式: 第一种,最简单的单体,只被实例化一次    我简记为json对象 (1)基本结构 va

  • javascript设计模式 – 单例模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 单例模式.分享给大家供大家参考,具体如下: 介绍:单例模式是结构最简单的设计模式.单例模式用于创建那些在软件系统中独一无二的对象,是一个简单但很实用的设计模式. 定义:确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例,这个类称为单例类,它提供全局访问的方法.单例模式是一种对象创建型模式. 场景:日常编码中会有很多需要重用的场景,例如弹窗,键盘输入这类公共组件,我们往往希望它只创建一次,在第二次使用时重复使用之前创建好的实例.为了节约

  • JS基于设计模式中的单例模式（Singleton）实现封装对数据增删改查功能

    本文实例讲述了JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能.分享给大家供大家参考,具体如下: 单例模式 单例模式的核心结构中只包含一个被称为单例的特殊类.通过单例模式可以保证系统中一个类只有一个实例 单例模式最初的定义出现于<设计模式>(艾迪生维斯理, 1994):"保证一个类仅有一个实例,并提供一个访问它的全局访问点." 单例模式定义:"一个类有且仅有一个实例,并且自行实例化向整个系统提供." var Singleton

  • JS设计模式之单例模式（一）

    命名空间 单例模式是JavaScript中最常见的一种模式,通过这种模式可以为我们提供一个命名空间,例如jQuery库的命名空间为jQuery或$.命名空间的使用是为了让代码更加整洁,在多人协作开发的情况下,不同的人定义的变量很有可能重复,此时就需要使用命名空间来约束每个人定义的变量,使相同名称的变量放在不同的命名空间中,避免相互干扰.例如: // A程序员的命名空间 var A = { get: function(id){ return document.getElementById(id);

  • NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】

    本文实例讲述了NodeJS设计模式.分享给大家供大家参考,具体如下: 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直接返回,若不存在,则创建实例对象,并将实例对象保存在静态变量中,当下次请求时,则可以直接返回这个对象实例,这就确保了一个类只有一个实例对象.举个例子吧~一间学校刚刚起建还没有图书馆,有的同学就向领导提意见:"hey! 哥们,能不能帮我们建一个图书馆? "(想要一个图书馆实例),然后领导说:"no pro

  • JavaScript设计模式之单例模式实例

    JavaScript设计模式之单例模式实例

    <Practical Common Lisp>的作者 Peter Seibel 曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案. 不管是弱类型或强类型,静态或动态语言,命令式或说明式语言.每种语言都有天生的优缺点.一个牙买加运动员, 在短跑甚至拳击方面有一些优势,在练瑜伽上就欠缺一些. 术士和暗影牧师很容易成为一个出色的辅助,而一个背着梅肯满地图飞的敌法就会略显尴尬. 换到程序中, 静态语言里可能需要花很多功夫来实现装饰

  • JavaScript设计模式之单例模式原理与用法实例分析

    本文实例讲述了JavaScript设计模式之单例模式原理与用法.分享给大家供大家参考,具体如下: 单例模式的定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的模式,有些对象只需要一个,如线程池.全局缓存.浏览器中的window对象等,这时候可以用到单例模式. 单例模式典型的应用场景:单击按钮时,页面中会出现一个登陆浮窗,而该登录浮窗是唯一的,无论单击多少次按钮,这个浮窗都会被创建一次,则适合用单例模式创建. 全局变量不是单例模式,但在JavaScript开发中,经

  • 学习JavaScript设计模式之单例模式

    一.定义 保证一个类仅有一个实例,并提供一个访问它的全局访问点. 当单击登陆按钮,页面中出现一个登陆浮窗,这个登陆浮窗是唯一的,无论单击多少次登陆按钮,这个浮窗都只会被创建一次,那么这个登陆浮窗就适合用单例模式来创建. 二.实现原理 要实现单例并不复杂,使用一个变量来标志当前是否已经为某个类创建过对象,如果是,则在下一次获取该类的实例时,直接返回之前创建的对象. 三.假单例 全局变量不是单例模式,但在JavaScript开发中,我们经常会把全局变量当成单例来使用. var a = {}; 降低全

随机推荐