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

JavaScript:模块化【CommonJS与ES6】

在 JavaScript 编程中,随着项目的复杂性增加,代码的组织和管理变得至关重要。模块化是一种强大的编程概念,它允许我们将代码划分为独立的模块,提高了可维护性和可扩展性。本文将详细介绍 CommonJS 和 ES6 模块,帮助你理解它们的特点和用法。

1. CommonJS 模块化

CommonJS 是一种用于模块化 JavaScript 的标准。它主要用于服务器端的 Node.js 环境,但在浏览器端也可以使用一些工具进行转换。在 CommonJS 中,每个文件都被视为一个模块,可以使用 require 导入其他模块,使用 module.exportsexports 导出变量和函数。

// 导入模块
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 使用 requiremodule.exportsexports 进行导入和导出;ES6 使用 importexport

  • 值的复制: 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 编程中&#xff0c;随着项目的复杂性增加&#xff0c;代码的组织和管理变得至关重要。模块化是一种强大的编程概念&#xff0c;它允许我们将代码划分为独立的模块&#xff0c;提高了可维护性和可扩展性。本文将详细介绍 CommonJS 和 ES6 模块&#xff0c;帮助你理…...

Redis—持久化

这里写目录标题 AOF三种写回策略写回策略的优缺点AOF 重写机制AOF后台重写AOF优缺点使用命令 RDBRDB 持久化的工作原理执行快照时&#xff0c;数据能被修改吗RDB 持久化的优点RDB 持久化的缺点 混合持久化大key对持久化的影响 AOF 保存写操作命令到日志的持久化方式&#xff0…...

【设计模式】代理模式

在代理模式&#xff08;Proxy Pattern&#xff09;中&#xff0c;一个类代表另一个类的功能。这种类型的设计模式属于结构型模式。 在代理模式中&#xff0c;我们创建具有现有对象的对象&#xff0c;以便向外界提供功能接口。 介绍 意图&#xff1a;为其他对象提供一种代理以…...

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…...

软信天成:告别手动编码,实现智能自动化云数据管理

数字化转型浪潮之下&#xff0c;各个企业都在大力投资新的基于云的流程、平台和环境&#xff0c;以期获取可扩展性、弹性、敏捷性和成本效益等优势。 这些趋势要求企业IT部门能够帮助组织&#xff0c;在对分析进行现代化改造的过程中达到云就绪或云优先状态。事实上&#xff0…...

易基因:ChIP-seq等揭示转录因子NRF1调控原始生殖细胞发育、增殖和存活的表观遗传机制|科研进展

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。 原始生殖细胞&#xff08;Primordial germ cell&#xff0c;PGC&#xff09;是生殖细胞前体&#xff0c;可以产生卵母细胞和精子&#xff0c;确保生命延续。尽管PGC特化&#xff08;PGC …...

35岁,体能断崖?你需要健康的生活习惯

大厂裁员&#xff0c;称35岁以后体能下滑&#xff0c;无法继续高效率地完成工作&#xff1b;体重上涨&#xff0c;因为35岁以后新陈代谢开始变慢&#xff1b;甚至坐久了会腰疼、睡眠困扰开始加重&#xff0c;在众多的归因中&#xff0c;35岁的到来&#xff0c;为一切的焦虑埋下…...

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汇编语言做一个窗体

网上看到一段代码&#xff0c; .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]…...

不用技术代码,分班查询系统怎么做?

暑假即将结束&#xff0c;新学期开始将面临分班信息公布的工作&#xff01;对于分班信息公布&#xff0c;涉及到学生的个人信息&#xff0c;包括姓名、学号、班级等。在发布这些信息时&#xff0c;必须确保数据的保密性&#xff0c;防止未经授权的人员获取到学生的个人信息。因…...

【Mybatis】调试查看执行的 SQL 语句

1. 问题场景&#xff1a; 记录日常开发过程中 Mybatis 调试 SQL 语句&#xff0c;想要查看Mybatis 中执行的 SQL语句&#xff0c;导致定位问题困难 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优化&#xff1a;将多视图预测提升到三维图像4.3 基于不完美多视图的 神经表面重建*…...

(四)Unity开发Vision Pro——参考文档

4.参考文档 4.1 支持的功能和组件 4.1.1 支持的 Unity 功能和组件 大多数 Unity 组件无需修改即可在此平台上运行 - 包括大多数自定义 MonoBehaviours、动画逻辑、物理、输入处理、资产管理、AI 等。然而&#xff0c;需要渲染的组件需要特殊的支持。因此&#xff0c;一些组件…...

【Linux】简单线程池的设计与实现 -- 单例模式

前言对锁的封装整体代码LockGuard - RALLRALLMutex封装 对线程创建的封装整体代码成员函数解释声明 业务处理封装-加减乘除&#xff08;可有可无&#xff09;整体代码成员函数解释声明 线程池的设计与实现整体代码成员函数解释声明 展示 前言 线程池: 一种线程使用模式。线程过…...

[RoarCTF 2019Online Proxy]sql巧妙盲注

文章目录 [RoarCTF 2019Online Proxy]sql巧妙盲注解题脚本脚本解析 [RoarCTF 2019Online Proxy]sql巧妙盲注 解题 在源代码界面发现&#xff1a;Current Ip 我们会联想到&#xff1a;X-Forwarded-For来修改ip&#xff1a; 结果我们发现&#xff0c;response会讲Last Ip回显出…...

flutter开发实战-just_audio实现播放音频暂停音频设置音量等

flutter开发实战-just_audio实现播放音频暂停音频设置音量等 最近开发过程中遇到需要播放背景音等音频播放&#xff0c;这里使用just_audio来实现播放音频暂停音频设置音量等 一、引入just_audio 在pubspec.yaml引入just_audio just_audio: ^2.7.0在iOS上&#xff0c;video_p…...

【Bert101】最先进的 NLP 模型解释【01/4】

0 什么是伯特&#xff1f; BERT是来自【Bidirectional Encoder Representations from Transformers】变压器的双向编码器表示的缩写&#xff0c;是用于自然语言处理的机器学习&#xff08;ML&#xff09;模型。它由Google AI Language的研究人员于2018年开发&#xff0c;可作为…...

c语言经典例题讲解(输出菱形,喝汽水问题)

目录 一、输出菱形 二、喝汽水问题 方法1&#xff1a;一步一步来 方法二&#xff1a;直接套公式 一、输出菱形 输出类似于下图的菱形&#xff1a; 通过分析&#xff1a;1、先分为上下两部分输出 2.在输出前先输出空格 3.找规律进行输出 可知&#xff0c;可令上半部分lin…...

【Flutter】【基础】CustomPaint 绘画功能(一)

功能&#xff1a;CustomPaint 相当于在一个画布上面画画&#xff0c;可以自己绘制不同的颜色形状等 在各种widget 或者是插件不能满足到需求的时候&#xff0c;可以自己定义一些形状 使用实例和代码&#xff1a; CustomPaint&#xff1a; 能使你绘制的东西显示在你的ui 上面&a…...

iOS 实现图片高斯模糊效果

效果图 用到了 UIVisualEffectView 实现代码 - (UIVisualEffectView *)bgEffectView{if(!_bgEffectView){UIBlurEffect *blur [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];_bgEffectView [[UIVisualEffectView alloc] initWithEffect:blur];}return _bgEffect…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...