JavaScript中的设计模式之一--单例模式和模块

这篇具有很好参考价值的文章主要介绍了JavaScript中的设计模式之一--单例模式和模块。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

虽然有一种疯狂天才的感觉可能很诱人,但重新发明轮子通常不是设计软件的最佳方法。很有可能有人已经遇到了和你一样的问题,并以一种聪明的方式解决了它。这样的最佳实践在形式化后被称为设计模式。今天我们来看看它们的概念,并检查单例模式模块

什么是设计模式

我们可以将设计模式视为许多开发人员在各种现实生活场景中测试过的经过验证的解决方案。它们旨在支持软件设计师以可读和可预测的方式解决常见问题。如果我们的应用程序基于经过验证的模式,我们就不用太担心整体结构,因为它们倾向于鼓励我们以一种有组织的方式编写代码。
查看包含某种设计模式的现有代码库可能比尝试理解一种不熟悉的方法更容易。他们也是其他开发者和我们之间的桥梁。使用众所周知的策略可以使沟通更快更容易。
设计模式并不是精确的解决方案。他们为我们提供了一个方案,我们可以根据自己的需要进行调整。这些模式没有绑定到特定的问题,这使得它们非常可重用。它们与特定的编程语言无关,但JavaScript拥有比其他语言更流行的设计模式。
你可能已经使用了其中的一些。常见的JavaScript解决方案往往具有在实现时感觉足够的设计模式。React经常合并高阶组件模式和flux架构。在实现观察者设计模式时,Angular应用程序似乎运行得很好。

单例模式

我们从一个叫做单例的设计模式开始。它是最著名的模式之一,因此是一个很好的起点。其核心是限制一个类只能有一个实例,并确保它是全局可访问的。当你需要管理整个应用程序中的某些内容时,它可能会派上用场。
单例这个术语来自数学,意思是一个集合恰好有一个元素。
按照设计,单例会在类还不存在时创建一个实例。否则,它们返回对现有实例的引用。

class Singleton {
        static instance;
  constructor() {
          // your logic here
  }
  static getInstance() {
          if (Singleton.instance) {
            return Singleton.instance;
    }
    Singleton.instance = new Singleton();
    return Singleton.instance;
  }
}

现在,每次调用Singleton.getInstance(),我们都会得到相同的对象。

Singleton.getInstance() === Singleton.getInstance(); // true

上面的代码乍一看没什么问题,但它有一些问题。没有什么可以限制我们直接调用单例构造函数。这时TypeScript可能就派上用场了。

class Singleton {
  private static instance?: Singleton;
  private constructor() {
    // your logic here
  }
  static getInstance() {
    if (Singleton.instance) {
       return Singleton.instance;
    }
    Singleton.instance = new Singleton();
    return Singleton.instance;
  }
}

通过将单例构造函数变为私有,我们只能在getInstance函数中调用它。
另一种方法是直接从构造函数中返回一个实例。

class Singleton {
  static instance;
  constructor() {
    if (Singleton.instance) {
      return Singleton.instance;
    }
    Singleton.instance = this;
    // your logic here
  }
}
new Singleton() === new Singleton() // true

上面的代码让它变得不那么透明,因为有人可能不知道构造函数每次都返回相同的对象。
单例与全局变量有很多共同之处。这也是为什么它们通常不被鼓励的原因,因为它们共享了它们的缺点,因为它可能会使您的应用程序的可读性更差。无论我们认为单例是好是坏,它们都是基本的设计模式之一。了解它们也许有一天会派上用场。即使您不决定自己编写它们,您也可能在某些应用程序中遇到它们。

模块模式

JavaScript应用程序中的另一种典型模式是模块设计模式。将我们的应用程序代码分成模块,对于保持我们的代码库整洁组织起着重要的作用。
不久前,一种流行的方法是将一段代码包含在立即调用的函数表达式(IIFE)中。这是因为所有JavaScript文件共享相同的作用域。

index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hello world!</title>
        <script src="hello.js"></script>
        <script src="main.js"></script>
    </head>
    <body>
    </body>
</html>
hello.js
function hello() {
            console.log('Hello world!');
}
hello(); // Hello world!
main.js
hello(); // Hello world!

在一个文件中定义某些内容会污染整个全局范围,这不是一种理想的情况。解决这个问题的一个常见方法是通过创建一个函数并立即调用它来引入模块模式。

hello.js
(function(){
   function hello() {
     console.log('Hello world!');
  }
  hello(); // Hello world!
})();
main.js
hello(); // Uncaught ReferenceError: hello is not defined

上述方法的一个重要的事情是,如果我们在上面的模块内定义任何变量,它在它之外是不可用的。
我们还可以通过从立即调用的函数表达式返回一些东西来导出hello() 函数。

hello.js
const helloModule = (function(){
  function hello() {
    console.log('Hello world!');
  }
  return {
    hello
  }
})();
main.js
helloModule.hello(); // Hello world!

随着JavaScript语言的发展,我们找到了其他方法来处理上述问题。其中之一是ES6模块,其中每个模块都有自己的文件。现代浏览器已经支持它们。
Node.js环境还通过实现一个名为CommonJS的模块系统来提供解决方案。让我们来看看一段奇怪的代码:

console.log('Hello');
return;
console.log('world!');

这看起来很奇怪,因为return语句不能在函数之外发生。当我们导入这样的文件时,Node.js将其包装在一个函数中,如下所示:

function (exports, require, module, __filename, __dirname) {
            console.log('Hello');
  return;
  console.log('world!');
}

多亏了上面的代码,该模块有了自己的作用域,上面的代码可以正常运行。

总结

在本文中,我们了解了什么是设计模式。我们首先要知道的是单例模式和模块模式。上面文章的一个观点是,你可能已经在使用设计模式了。这可能是一个好主意,去学习更多并扩展我们的编程词汇。多亏了这一点,我们才能更快地想出解决问题的办法。此外,它可能会更高效,可读性更强。文章来源地址https://www.toymoban.com/news/detail-654041.html

到了这里,关于JavaScript中的设计模式之一--单例模式和模块的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript中的设计模式

    本文作者为 360 奇舞团前端开发工程师 JavaScript 设计模式是编程世界的智慧结晶,提供了解决常见问题的优秀方案。无论你是初学者还是经验丰富的开发者,掌握这些模式都能让你的代码更清晰、更灵活。本文将为你介绍一些常见的设计模式,帮助你提高代码质量,构建更可

    2024年02月21日
    浏览(41)
  • 写点东西《JavaScript 中的设计模式:综合指南》

    JavaScript 因其广泛采用和多功能性,已成为现代 Web 开发的基石。随着您深入研究 JavaScript 开发,理解和利用模式变得至关重要。在本文中,我们将踏上揭开 JavaScript 模式的神秘面纱的旅程,并探讨它们如何增强您的编码实践。 要理解本文中讨论的概念和技术,您应该了解

    2024年02月02日
    浏览(41)
  • 【Java基础教程】(十八)包及访问权限篇 · 下:Java编程中的权限控制修饰符、单例设计模式 (Singleton)和多例设计模式的综合探析~

    掌握Java 中的4种访问权限; 掌握Java 语言的命名规范; 掌握单例设计模式与多例设计模式的定义结构; 对于封装性,实际上之前只详细讲解了 private , 而封装性如果要想讲解完整,必须结合全部4种访问权限来看,这4种访问权限的定义如下表所示。 范围 private default protected

    2024年02月16日
    浏览(48)
  • Java设计模式之一:建造者模式

    目录 一、什么是建造者模式 二、建造者模式如何使用 三、建造者模式的优势和应用场景 Java建造者模式是一种创建对象的设计模式,它通过将对象的构造过程分离出来,使得同样的构建过程可以创建不同的表示。建造者模式适用于创建复杂对象,它将对象的构建过程分解成

    2024年02月13日
    浏览(53)
  • Java设计模式之一:装饰器模式

    目录 一、什么是装饰器模式 二、装饰器模式如何使用 三、装饰器模式的优势和应用场景   装饰器模式是一种结构型设计模式,允许通过动态地将新功能添加到现有对象上,来扩展其行为或修改其外观,同时不改变其原始类的结构 。 在装饰器模式中,有一个抽象基类(Com

    2024年02月13日
    浏览(56)
  • 懒汉单例设计模式与饿汉单例设计模式

    单例模式即一个类确保只有一个对象,主要用于避免浪费内存 1 .饿汉单例设计模式 :拿到对象时,对象就早已经创建好了 写法: 把类的构造器私有 在类中自己创建一个对象,并赋值到一个变量 定义一个静态方法,返回自己创建的这个对象 2. 懒汉单例设计模式 :第一次拿到对象时

    2024年02月21日
    浏览(59)
  • 【设计模式】单例设计模式

    目录 1、前言 2、基本语法 2.1、懒汉式单例 2.2、饿汉式单例 2.3、双重检验锁单例模式 2.4、静态内部类单例模式 2.5、枚举单例模式 2.6、ThreadLocal单例模式 2.7、注册单例模式 3、使用场景 4、使用示例 5、常见问题 5、总结 单例模式是一种设计模式,它确保一个类只能创建一个实

    2024年02月09日
    浏览(44)
  • 设计模式学习(一)单例模式补充——单例模式析构

    目录 前言 无法调用析构函数的原因 改进方法 内嵌回收类 智能指针 局部静态变量 参考文章 在《单例模式学习》中提到了,在单例对象是通过 new 动态分配在堆上的情况下,当程序退出时,不会通过C++的RAII机制自动调用其析构函数。本文讨论一下这种现象的原因以及

    2024年03月19日
    浏览(53)
  • 【设计模式】单例模式|最常用的设计模式

    单例模式是最常用的设计模式之一,虽然简单,但是还是有一些小坑点需要注意。本文介绍单例模式并使用go语言实现一遍单例模式。 单例模式保证一个类仅有一个实例,并提供一个访问它的全局访问点。 使用场景: 当类只能有一个实例而且可以从一个公开的众所周知的访

    2024年04月29日
    浏览(42)
  • 设计模式之单例设计模式

    就是一个类只允许创建一个对象,那么我们称该类为单例类,这种设计模式我们称为单例模式。 资源共享:有些类拥有共享的资源,例如数据库连接池、线程池、缓存等。使用单例模式确保只有一个实例,避免资源浪费和竞争条件。 线程安全:单例模式可以用来保证多线程

    2024年02月07日
    浏览(75)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包