JavaScript:模块化【CommonJS与ES6】
在 JavaScript 编程中,随着项目的复杂性增加,代码的组织和管理变得至关重要。模块化是一种强大的编程概念,它允许我们将代码划分为独立的模块,提高了可维护性和可扩展性。本文将详细介绍 CommonJS 和 ES6 模块,帮助你理解它们的特点和用法。
1. CommonJS 模块化
CommonJS 是一种用于模块化 JavaScript 的标准。它主要用于服务器端的 Node.js 环境,但在浏览器端也可以使用一些工具进行转换。在 CommonJS 中,每个文件都被视为一个模块,可以使用 require 导入其他模块,使用 module.exports 或 exports 导出变量和函数。
// 导入模块
const math = require('./math');// 使用导入的模块
console.log(math.add(2, 3));
console.log(math.subtract(5, 2));
// math.js 模块
exports.add = (a, b) => a + b;
exports.subtract = (a, b) => a - b;
2. ES6 模块化
ES6 引入了一种原生的模块化系统,使得在现代浏览器和 Node.js 中都可以使用。ES6 模块采用了更简洁和直观的语法,使用 import 导入模块,使用 export 导出变量、函数、类等。
// 导入模块
import { add, subtract } from './math';// 使用导入的模块
console.log(add(2, 3));
console.log(subtract(5, 2));
// math.js 模块
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
3. 区别与特点
-
加载时机: CommonJS 模块是动态加载的,模块在运行时加载;ES6 模块是静态加载的,在编译时就确定加载关系。
-
导入和导出: CommonJS 使用
require和module.exports或exports进行导入和导出;ES6 使用import和export。 -
值的复制: CommonJS 在导入时会复制一份值的副本,后续修改不会影响原模块;ES6 模块在导入时保持引用关系,修改会影响原模块。
-
异步加载: CommonJS 模块加载是同步的,阻塞了后续代码的执行;ES6 模块加载是异步的,不会阻塞代码执行。
-
浏览器支持: 浏览器端,ES6 模块需要使用
<script type="module">标签,而 CommonJS 需要借助工具进行转换。
4. 如何选择?
在现代 JavaScript 开发中,ES6 模块被广泛采用,因为它更加简洁、直观,并且在浏览器和 Node.js 中都有原生支持。如果你的项目需要兼容多个环境,可以使用工具进行模块转换,将 ES6 模块转换为 CommonJS 模块。
模块化是组织和管理代码的关键,CommonJS 和 ES6 模块是两种不同的模块化标准,各自有其特点和适用场景。通过合理选择和运用这两种模块化方式,你可以提高代码的可维护性和可扩展性,让你的 JavaScript 项目更加优雅和高效。无论是在 Node.js 环境还是在浏览器端,掌握模块化的原理和用法都是成为一名优秀 JavaScript 开发者的必备技能。
相关文章:
JavaScript:模块化【CommonJS与ES6】
在 JavaScript 编程中,随着项目的复杂性增加,代码的组织和管理变得至关重要。模块化是一种强大的编程概念,它允许我们将代码划分为独立的模块,提高了可维护性和可扩展性。本文将详细介绍 CommonJS 和 ES6 模块,帮助你理…...
Redis—持久化
这里写目录标题 AOF三种写回策略写回策略的优缺点AOF 重写机制AOF后台重写AOF优缺点使用命令 RDBRDB 持久化的工作原理执行快照时,数据能被修改吗RDB 持久化的优点RDB 持久化的缺点 混合持久化大key对持久化的影响 AOF 保存写操作命令到日志的持久化方式࿰…...
【设计模式】代理模式
在代理模式(Proxy Pattern)中,一个类代表另一个类的功能。这种类型的设计模式属于结构型模式。 在代理模式中,我们创建具有现有对象的对象,以便向外界提供功能接口。 介绍 意图:为其他对象提供一种代理以…...
mac arm 通过brew搭建 php+nginx+mysql+xdebug
1.安装nginx brew install nginx //安装brew services start nginx //启动2.安装php brew install php7.4 //安装export PATH"/opt/homebrew/opt/php7.4/bin:$PATH" //加入环境变量 export PATH"/opt/homebrew/opt/php7.4/sbin:$PATH"brew serv…...
软信天成:告别手动编码,实现智能自动化云数据管理
数字化转型浪潮之下,各个企业都在大力投资新的基于云的流程、平台和环境,以期获取可扩展性、弹性、敏捷性和成本效益等优势。 这些趋势要求企业IT部门能够帮助组织,在对分析进行现代化改造的过程中达到云就绪或云优先状态。事实上࿰…...
易基因:ChIP-seq等揭示转录因子NRF1调控原始生殖细胞发育、增殖和存活的表观遗传机制|科研进展
大家好,这里是专注表观组学十余年,领跑多组学科研服务的易基因。 原始生殖细胞(Primordial germ cell,PGC)是生殖细胞前体,可以产生卵母细胞和精子,确保生命延续。尽管PGC特化(PGC …...
35岁,体能断崖?你需要健康的生活习惯
大厂裁员,称35岁以后体能下滑,无法继续高效率地完成工作;体重上涨,因为35岁以后新陈代谢开始变慢;甚至坐久了会腰疼、睡眠困扰开始加重,在众多的归因中,35岁的到来,为一切的焦虑埋下…...
mysql 习题总结
1.select sex,avg(salsry) as 平均薪资 from emp group by sex; 2.select depart,sum(salsry) from emp group by depart; 3.select depart ,sum(salary) from emp group by depart order by sum(salary) desc limit 1,1; 4.select name from emp group by name having count(n…...
IL汇编语言做一个窗体
网上看到一段代码, .assembly extern mscorlib {} .assembly Classes { .ver 1:0:1:0 } .namespace MyForm { .class public TestForm extends [System.Windows.Forms]System.Windows.Forms.Form { .field private class [System]…...
不用技术代码,分班查询系统怎么做?
暑假即将结束,新学期开始将面临分班信息公布的工作!对于分班信息公布,涉及到学生的个人信息,包括姓名、学号、班级等。在发布这些信息时,必须确保数据的保密性,防止未经授权的人员获取到学生的个人信息。因…...
【Mybatis】调试查看执行的 SQL 语句
1. 问题场景: 记录日常开发过程中 Mybatis 调试 SQL 语句,想要查看Mybatis 中执行的 SQL语句,导致定位问题困难 2. 解决方式 双击shift找到mybatis源码中的 MappedStatement的getBoundSql()方法 public BoundSql getBoundSql(Object para…...
【多视重建】从Zero-123到One-2-3-45:多视角生成
文章目录 摘要一、引言二、相关工作三、Zero-1-to-33.1.学习如何控制照相机的视角3.2.视角作为条件的扩散3.3三维重构3.4 数据集 四、One-2-3-454.1 Zero123: 视角条件的 2D Diffusion4.2 NeRF优化:将多视图预测提升到三维图像4.3 基于不完美多视图的 神经表面重建*…...
(四)Unity开发Vision Pro——参考文档
4.参考文档 4.1 支持的功能和组件 4.1.1 支持的 Unity 功能和组件 大多数 Unity 组件无需修改即可在此平台上运行 - 包括大多数自定义 MonoBehaviours、动画逻辑、物理、输入处理、资产管理、AI 等。然而,需要渲染的组件需要特殊的支持。因此,一些组件…...
【Linux】简单线程池的设计与实现 -- 单例模式
前言对锁的封装整体代码LockGuard - RALLRALLMutex封装 对线程创建的封装整体代码成员函数解释声明 业务处理封装-加减乘除(可有可无)整体代码成员函数解释声明 线程池的设计与实现整体代码成员函数解释声明 展示 前言 线程池: 一种线程使用模式。线程过…...
[RoarCTF 2019Online Proxy]sql巧妙盲注
文章目录 [RoarCTF 2019Online Proxy]sql巧妙盲注解题脚本脚本解析 [RoarCTF 2019Online Proxy]sql巧妙盲注 解题 在源代码界面发现:Current Ip 我们会联想到:X-Forwarded-For来修改ip: 结果我们发现,response会讲Last Ip回显出…...
flutter开发实战-just_audio实现播放音频暂停音频设置音量等
flutter开发实战-just_audio实现播放音频暂停音频设置音量等 最近开发过程中遇到需要播放背景音等音频播放,这里使用just_audio来实现播放音频暂停音频设置音量等 一、引入just_audio 在pubspec.yaml引入just_audio just_audio: ^2.7.0在iOS上,video_p…...
【Bert101】最先进的 NLP 模型解释【01/4】
0 什么是伯特? BERT是来自【Bidirectional Encoder Representations from Transformers】变压器的双向编码器表示的缩写,是用于自然语言处理的机器学习(ML)模型。它由Google AI Language的研究人员于2018年开发,可作为…...
c语言经典例题讲解(输出菱形,喝汽水问题)
目录 一、输出菱形 二、喝汽水问题 方法1:一步一步来 方法二:直接套公式 一、输出菱形 输出类似于下图的菱形: 通过分析:1、先分为上下两部分输出 2.在输出前先输出空格 3.找规律进行输出 可知,可令上半部分lin…...
【Flutter】【基础】CustomPaint 绘画功能(一)
功能:CustomPaint 相当于在一个画布上面画画,可以自己绘制不同的颜色形状等 在各种widget 或者是插件不能满足到需求的时候,可以自己定义一些形状 使用实例和代码: CustomPaint: 能使你绘制的东西显示在你的ui 上面&a…...
iOS 实现图片高斯模糊效果
效果图 用到了 UIVisualEffectView 实现代码 - (UIVisualEffectView *)bgEffectView{if(!_bgEffectView){UIBlurEffect *blur [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];_bgEffectView [[UIVisualEffectView alloc] initWithEffect:blur];}return _bgEffect…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...
从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路
进入2025年以来,尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断,但全球市场热度依然高涨,入局者持续增加。 以国内市场为例,天眼查专业版数据显示,截至5月底,我国现存在业、存续状态的机器人相关企…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装;只需暴露 19530(gRPC)与 9091(HTTP/WebUI)两个端口,即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表
1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...
ETLCloud可能遇到的问题有哪些?常见坑位解析
数据集成平台ETLCloud,主要用于支持数据的抽取(Extract)、转换(Transform)和加载(Load)过程。提供了一个简洁直观的界面,以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入(联动)2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
STM32---外部32.768K晶振(LSE)无法起振问题
晶振是否起振主要就检查两个1、晶振与MCU是否兼容;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容(CL)与匹配电容(CL1、CL2)的关系 2. 如何选择 CL1 和 CL…...
Web后端基础(基础知识)
BS架构:Browser/Server,浏览器/服务器架构模式。客户端只需要浏览器,应用程序的逻辑和数据都存储在服务端。 优点:维护方便缺点:体验一般 CS架构:Client/Server,客户端/服务器架构模式。需要单独…...
go 里面的指针
指针 在 Go 中,指针(pointer)是一个变量的内存地址,就像 C 语言那样: a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10,通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...
水泥厂自动化升级利器:Devicenet转Modbus rtu协议转换网关
在水泥厂的生产流程中,工业自动化网关起着至关重要的作用,尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关,为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多,其中不少设备采用Devicenet协议。Devicen…...
