JavaScript中的设计模式-单例模式

简介: 设计模式在我们编程中是十分重要的!设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

前言

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

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

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

什么是设计模式?

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

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

设计模式五大设计原则(SOLID)

  • S-单一职责原则

    即一个程序只做好一件事
  • O-开放封闭原则

    可扩展开放,对修改封闭
  • L-里氏置换原则

    子类能覆盖父类,并能出现在父类出现的地方
  • I-接口独立原则

    保持接口的单一独立
  • D-依赖导致原则

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

为什么需要设计模式?

  • 易读性

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

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

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

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

单例模式

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

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

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

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

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

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

来看这段伪代码:

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上,下面做的是登录按钮的一个点击事件,点击登录按钮就会创建登录浮窗并将displaynone改为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有值,所以就直接返回了,不会在执行后面的逻辑。

相关文章
|
6月前
|
设计模式 缓存 安全
【设计模式】【创建型模式】单例模式(Singleton)
一、入门 什么是单例模式? 单例模式是一种设计模式,确保一个类只有一个实例,并提供一个全局访问点。它常用于需要全局唯一对象的场景,如配置管理、连接池等。 为什么要单例模式? 节省资源 场景:某些对象创
184 15
|
设计模式 安全 Java
Kotlin教程笔记(57) - 改良设计模式 - 单例模式
Kotlin教程笔记(57) - 改良设计模式 - 单例模式
98 2
|
7月前
|
设计模式 存储 安全
设计模式-单例模式练习
单例模式是Java设计模式中的重要概念,确保一个类只有一个实例并提供全局访问点。本文详解单例模式的核心思想、实现方式及线程安全问题,包括基础实现(双重检查锁)、懒汉式与饿汉式对比,以及枚举实现的优势。通过代码示例和类图,深入探讨不同场景下的单例应用,如线程安全、防止反射攻击和序列化破坏等,展示枚举实现的简洁与可靠性。
122 0
|
8月前
|
设计模式 安全 Java
设计模式:单例模式
单例模式是一种创建型设计模式,确保一个类只有一个实例,并提供全局访问点。它通过私有化构造函数、自行创建实例和静态方法(如`getInstance()`)实现。适用于数据库连接池、日志管理器等需要全局唯一对象的场景。常见的实现方式包括饿汉式、懒汉式、双重检查锁、静态内部类和枚举。线程安全问题可通过`synchronized`或双重检查锁解决,同时需防止反射和序列化破坏单例。优点是避免资源浪费,缺点是可能增加代码耦合度和测试难度。实际开发中应优先选择枚举或静态内部类,避免滥用单例,并结合依赖注入框架优化使用。
|
9月前
|
设计模式 JavaScript 算法
浅谈几种js设计模式
设计模式是软件开发中的宝贵工具,能够提高代码的可维护性和扩展性。通过单例模式、工厂模式、观察者模式和策略模式,我们可以解决不同场景下的实际问题,编写更加优雅和高效的代码。
217 8
|
9月前
|
设计模式 存储 安全
设计模式2:单例模式
单例模式是一种创建型模式,确保一个类只有一个实例,并提供全局访问点。分为懒汉式和饿汉式: - **懒汉式**:延迟加载,首次调用时创建实例,线程安全通过双重检查锁(double check locking)实现,使用`volatile`防止指令重排序。 - **饿汉式**:类加载时即创建实例,线程安全但可能浪费内存。 示例代码展示了如何使用Java实现这两种模式。
180 4
|
11月前
|
设计模式 存储 前端开发
前端必须掌握的设计模式——单例模式
单例模式是一种简单的创建型设计模式,确保一个类只有一个实例,并提供一个全局访问点。适用于窗口对象、登录弹窗等场景,优点包括易于维护、访问和低消耗,但也有安全隐患、可能形成巨石对象及扩展性差等缺点。文中展示了JavaScript和TypeScript的实现方法。
424 13
|
11月前
|
设计模式 安全 Java
Kotlin教程笔记(57) - 改良设计模式 - 单例模式
Kotlin教程笔记(57) - 改良设计模式 - 单例模式
126 2
|
12月前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
157 2
|
12月前
|
设计模式 Java 数据库连接
Java编程中的设计模式:单例模式的深度剖析
【10月更文挑战第41天】本文深入探讨了Java中广泛使用的单例设计模式,旨在通过简明扼要的语言和实际示例,帮助读者理解其核心原理和应用。文章将介绍单例模式的重要性、实现方式以及在实际应用中如何优雅地处理多线程问题。
154 4

热门文章

最新文章

下一篇
开通oss服务