当前位置: 首页 > news >正文

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!');
}

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

总结

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

相关文章:

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

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

回归预测 | MATLAB实现GAM广义加性模型多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现GAM广义加性模型多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现GAM广义加性模型多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基本…...

css学习4(背景)

1、CSS中&#xff0c;颜色值通常以以下方式定义: 十六进制 - 如&#xff1a;"#ff0000"RGB - 如&#xff1a;"rgb(255,0,0)"颜色名称 - 如&#xff1a;"red" 2、background-image 属性描述了元素的背景图像. 默认情况下&#xff0c;背景图像进…...

二、SQL,如何实现表的创建和查询

1、新建表格&#xff08;在当前数据库中新建一个表格&#xff09;&#xff1a; &#xff08;1&#xff09;基础语法&#xff1a; create table [表名]( [字段:列标签] [该列数据类型] comment [字段注释], [字段:列标签] [该列数据类型] comment [字段注释], ……&#xff0c…...

大数据及软件教学与实验专业实训室建设方案

一 、系统概述 大数据及软件教学与实验大数据及软件教学与实验在现代教育中扮演重要角色&#xff0c;这方面的教学内容涵盖了大数据处理、数据分析、数据可视化和大数据应用等多个方面。以下是大数据及软件教学与实验的一般内容&#xff1a;1. 数据基础知识&#xff1a;教授学生…...

信创办公–基于WPS的EXCEL最佳实践系列 (公式和函数)

信创办公–基于WPS的EXCEL最佳实践系列 &#xff08;公式和函数&#xff09; 目录 应用背景相关知识操作步骤1、认识基本的初级函数2、相对引用&#xff0c;绝对引用&#xff0c;混合引用3、统计函数4、文本函数 应用背景 熟练掌握Excel的函数工具能让我们在日常的使用中更加方…...

【Apollo】自动驾驶感知——毫米波雷达

作者简介&#xff1a; 辭七七&#xff0c;目前大一&#xff0c;正在学习C/C&#xff0c;Java&#xff0c;Python等 作者主页&#xff1a; 七七的个人主页 文章收录专栏&#xff1a; 七七的闲谈 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f…...

SpringBoot部署到腾讯云

SpringBoot部署到腾讯云 此处默认已经申请到腾讯云服务器&#xff0c;因为本人还没有申请域名&#xff0c;所以就直接使用的ip地址 XShell连接到腾讯云 主机中填写腾讯云的公网ip地址 公网ip地址在下图中找到 接下来填写服务器的用户名与密码 一般centOS用户名为root&#xff…...

Git 设置代理

Git 传输分两种协议&#xff0c;SSH和 http(s)&#xff0c;设置代理也需要分两种。 http(s) 代理 Command Line 使用 命令行 模式&#xff0c;可以在Powershell中使用以下命令设置代理&#xff1a; $env:http_proxy"http://127.0.0.1:7890" $env:https_proxy&quo…...

基于Spring Boot的机场VIP客户管理系统的设计与实现(Java+spring boot+MySQL)

获取源码或者论文请私信博主 演示视频&#xff1a; 基于Spring Boot的机场VIP客户管理系统的设计与实现&#xff08;Javaspring bootMySQL&#xff09; 使用技术&#xff1a; 前端&#xff1a;html css javascript jQuery ajax thymeleaf 微信小程序 后端&#xff1a;Java s…...

图数据库_Neo4j学习cypher语言_使用CQL_构建明星关系图谱_导入明星数据_导入明星关系数据_创建明星关系---Neo4j图数据库工作笔记0009

首先找到明星数据 可以看到有一个sheet1,是,记录了所有的关系的数据 然后比如我们搜索一个撒贝宁,可以看到撒贝宁的数据 然后这个是构建的CQL语句 首先我们先去启动服务 neo4j console 然后我们再来看一下以前导入的,可以看到导入很简单, 就是上面有CQL 看一下节点的属性...

恒运资本:算力概念强势拉升,亚康股份“20cm”涨停,首都在线等大涨

算力概念21日盘中强势拉升&#xff0c;到发稿&#xff0c;亚康股份“20cm”涨停&#xff0c;首都在线、汇金股份涨逾11%&#xff0c;鸿博股份亦涨停&#xff0c;南凌科技涨近9%&#xff0c;科创信息、神州数码、铜牛信息等涨超7%。 音讯面上&#xff0c;8月19日&#xff0c;202…...

Neo4j之union基础

UNION 用于将多个 MATCH 或 RETURN 子句的结果合并为一个结果集。它可以用来合并不同模式的节点和关系&#xff0c;或者将多个查询的结果合并在一起。以下是一些常用的示例和解释&#xff1a; 基本用法&#xff1a; MATCH (p:Person) WHERE p.age > 30 RETURN p.name AS n…...

搭建:基于nginx的上传功能

搭建&#xff1a;基于nginx的上传功能 文章目录 搭建&#xff1a;基于nginx的上传功能一、准备二、安装nginx1.1 解压nginx和nginx插件1.2 编译并安装nginx 三、启动一个python后台服务&#xff0c;用于上传到临时路径文件&#xff0c;转移到正式路径四、添加nginx配置&#xf…...

JavaScript高级

1、JavaScript面向对象 1.1、面向对象介绍 ​ 在 Java 中我们学习过面向对象&#xff0c;核心思想是万物皆对象。在 JavaScript 中同样也有面向对象。思想类似。 1.2、类的定义和使用 结构说明 代码实现 <!DOCTYPE html> <html lang"en"> <head>…...

隔断让你的办公室变得更加智能、环保、人性化

隔断可以在办公室中起到多种重要作用&#xff0c;使办公室更加智能、环保和人性化。以下是一些可能的方式&#xff1a; 1. 智能办公室控制系统&#xff1a;可以通过隔断集成智能办公室控制系统&#xff0c;实现办公室照明、温度和空调等设备的自动调节&#xff0c;提高能效和舒…...

web文件上传

文件上传指的是&#xff0c;将本地的图片、视频、音频上传到服务器&#xff0c;提供给其他用户浏览和下载的过程 前端需求 想要进行文件上传对于web前端来说有三个重要要素 1.<input type"file" name"image"> 提供这样的file文件上传格式 2. metho…...

二刷LeetCode--48. 旋转图像(C++版本),数学题

思路&#xff1a;主要是观察变化之后的数组和最开始的数组的区别&#xff0c;不难发现&#xff0c;先转置在左右镜像对称即可。需要注意的是转置和镜像对称中for变量的终止条件。 class Solution { public:void rotate(vector<vector<int>>& matrix) {// 行数…...

神经网络改进:注重空间变化,权重参数调整,正则化, 熵的简单理解

目录 神经网络改进&#xff1a;注重空间变化 将高纬空间映射到地位空间便于表示&#xff08;供给数据&#xff09; 将地位空间映射到高纬空间进行分类聚合&#xff08;达到可分状态&#xff08;K-means&#xff09;&#xff09; 神经网络改进&#xff1a;权重参数调整 自注…...

快速入门vue3新特性和新的状态管理库pinia

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 Vue3.3新特性 defineOptions defineModel pinia 介绍 与 Vuex 3.x/4.x 的比较 安装 核心概念 定义…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...