深入剖析CommonJS modules和ECMAScript modules
目录
- 前言
- CommonJS:服务器端模块化的先驱
- 背景与起源
- 语法与机制
- ECMAScript Modules:现代前端的基石
- 背景与起源
- 语法与机制
- 比较与权衡
- 语法差异
- 加载机制
- 编译时与运行时
- 运行时行为
- 构建第三方库
- 现代开发环境
- 结论
前言
在 JavaScript 生态系统中,模块化编程已经成为构建大型、可维护应用的关键技术。CommonJS 和 ECMAScript Modules (ESM) 作为两种主要的模块化标准,各自承载着历史的重量和未来的愿景。本文将深入探讨这两种模块系统的设计哲学、语法差异、运行时行为以及在现代开发环境中的地位变迁。
CommonJS:服务器端模块化的先驱
背景与起源
CommonJS 规范最初设计用于服务器端 JavaScript,特别是针对 Node.js 平台。它的出现解决了早期 JavaScript 应用中缺乏模块化支持的问题,使得开发者能够编写可重用、可维护的代码。
语法与机制
在 CommonJS 中,每个文件都被视为一个模块,拥有自己的作用域。模块的导出和导入通过 module.exports 和 require 函数实现:
创建一个module
// math.js
// 通过module.exports的形式导出模块
function add(a, b) {return a + b;
}
module.exports = {add: add
};//或者通过exports的形式导出
exports.add = function (a, b) {return a + b;
}
其他js文件中使用
// app.js
const math = require('./math');
console.log(math.add(1, 2)); // 输出:3
ECMAScript Modules:现代前端的基石
背景与起源
随着前端技术的发展,浏览器开始支持 ECMAScript Modules,这是一种更加现代化的模块化标准,旨在提供跨平台、跨环境的模块化解决方案。ESM 设计时考虑了浏览器和服务器端的通用性,同时也优化了模块的加载性能。
语法与机制
ESM 使用 import 和 export 关键字来定义模块的导出和导入:
创建模块
// math.mjs
export function add(a, b) {return a + b;
}
使用模块
// app.mjs
import { add } from './math.mjs';
console.log(add(1, 2)); // 输出:3
比较与权衡
语法差异
CommonJS 使用 require 和 module.exports,语法较为冗长。
ESM 使用 import 和 export,语法更为简洁,易于阅读和编写。
加载机制
CommonJS 是同步加载,适合于需要立即访问所有依赖的场景。
ESM 是异步加载,更适合于按需加载和性能优化。
编译时与运行时
CommonJS 的依赖解析发生在运行时,可能引入不确定性和性能开销。
ESM 的依赖解析发生在编译时,提高了加载效率和可预测性。
运行时行为
与 CommonJS 不同,ESM 的导入是异步的,这意味着 import 语句不会阻塞执行流程。ESM 还支持动态导入 (import()),允许在运行时按需加载模块,进一步提高了应用的性能和响应速度。
构建第三方库
在构建三方库时需要注意,如果构建ECMAScript Modules,那么在package.json里面需要配置type字段为 “module” ,如果构建CommonJS模块,则不需要配置type或者将type配置为 “commonjs”
现代开发环境
随着 Node.js 对 ESM 的原生支持,以及现代浏览器对 ESM 的广泛采纳,ESM 正逐渐成为 JavaScript 社区的首选模块化方案。然而,由于历史原因,许多现有的 Node.js 包仍然使用 CommonJS,这要求开发者在新旧模块系统间进行适当的桥接和转换。
结论
无论是 CommonJS 还是 ESM,它们都在各自的领域内发挥了重要作用。随着 JavaScript 生态系统的不断演进,ESM 凭借其现代特性和性能优势,正逐步成为行业标准。然而,CommonJS 的影响力不容忽视,尤其是在庞大的 Node.js 生态系统中。未来,我们期待看到更多的工具和框架能够无缝地支持两种模块系统,促进 JavaScript 社区的持续繁荣和发展。
相关文章:
深入剖析CommonJS modules和ECMAScript modules
目录 前言CommonJS:服务器端模块化的先驱背景与起源语法与机制 ECMAScript Modules:现代前端的基石背景与起源语法与机制 比较与权衡语法差异加载机制编译时与运行时运行时行为构建第三方库现代开发环境 结论 前言 在 JavaScript 生态系统中,…...

角点检测及MATLAB实现
一、角点简介 角点通常指的是两条直线构成角时的交点。在更广泛的应用中,角点这一概念也被扩展到数字图像处理领域,其中角点被定义为图像中物体轮廓线的连接点,这些点在某方面属性特别突出,即在某些属性上强度最大或者最…...
TypeScript导学:从零开始
引言 TypeScript的背景 TypeScript是一种由微软开发的开源编程语言,它是JavaScript的一个超集,添加了可选的静态类型和基于类的面向对象编程。自2012年首次发布以来,TypeScript因其能够提高代码的可读性、可维护性和可扩展性而迅速获得了广…...

【BUG】已解决:IndexError: list index out of range
已解决:IndexError: list index out of range 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页,我是博主英杰,211科班出身,就职于医疗科技公司,热衷分享知识,武汉城市开发者社区主…...

AWS-S3实现Minio分片上传、断点续传、秒传、分片下载、暂停下载
文章目录 前言一、功能展示上传功能点下载功能点效果展示 二、思路流程上传流程下载流程 三、代码示例四、疑问 前言 Amazon Simple Storage Service(S3),简单存储服务,是一个公开的云存储服务。Web应用程序开发人员可以使用它存…...
Selenium - 设置元素等待及加载策略
7月18日资源分享: 耿直哥三部曲全——机器学习,强化学习,深度学习 链接: https://pan.baidu.com/s/1c_eVVeqCZmB6zszHt6ZXiw?pwdtf2a 在使用Selenium进行网页自动化测试时,一个常见的问题是页面加载速度和元素的可见性问题。…...

【数据结构】线性结构——数组、链表、栈和队列
目录 前言 一、数组(Array) 1.1优点 1.2缺点 1.3适用场景 二、链表(Linked List) 2.1优点 2.2缺点 2.3适用场景 三、栈(Stack) 3.1优点 3.2缺点 3.3适用场景 四、队列(Queue) 4.1优点…...

json将列表字典等转字符串,然后解析又转回来
在 Python 中使用 json 模块来方便地在数据和 JSON 格式字符串之间进行转换,以便进行数据的存储、传输或与其他支持 JSON 格式的系统进行交互。 JSON 字符串通过 json.loads() 函数转换为 Python 对象。 pthon对象通过json.dumps()转为字符串 import jsonstr_list…...

记录|.NET上位机开发和PLC通信的实现
本文记录源自:B站视频 实验结果:跟视频做下来是没有问题的。能运行。 自己补充做了视频中未实现的读取和写入数据部分【欢迎小伙伴指正不对的地方】 目录 前言一、项目Step1. 创建项目Step2. 创建动态图片展示Step3. 创建图片型按钮Step4. 创建下拉框Ste…...

微服务实战系列之玩转Docker(二)
前言 上一篇,博主对Docker的背景、理念和实现路径进行了简单的阐述。作为云原生技术的核心之一,轻量级的容器Docker,受到业界追捧。因为它抛弃了笨重的OS,也不带Data,可以说,能够留下来的都是打仗的“精锐…...

Linux:信号的概念与产生
信号概念 信号是进程之间事件异步通知的一种方式 在Linux命令行中,我们可以通过ctrl c来终止一个前台运行的进程,其实这就是一个发送信号的行为。我们按下ctrl c是在shell进程中,而被终止的进程,是在前台运行的另外一个进程。因…...

云监控(华为) | 实训学习day2(10)
spring boot基于框架的实现 简单应用 - 用户数据显示 开发步骤 第一步:文件-----》新建---项目 第二步:弹出的对话框中,左侧选择maven,右侧不选任何内容. 第三步,选择maven后,下一步 第4步 :出现对话框中填写项目名称 第5步&…...
数据结构第35节 性能优化 算法的选择
算法的选择对于优化程序性能至关重要。不同的算法在时间复杂度、空间复杂度以及适用场景上有着明显的差异。下面我将结合具体的代码示例,来讲解几种常见的算法选择及其优化方法。 示例 1: 排序算法 场景描述: 假设我们需要对一个整数数组进行排序。 算法选择: …...
每天一个数据分析题(四百三十六)- 正态分布
X为服从正态分布的随机变量N(2, 9), 如果P(X>c)P(X<c), 则c的值为() A. 3 B. 2 C. 9 D. 2/3 数据分析认证考试介绍:点击进入 题目来源于CDA模拟题库 点击此处获取答案 数据分析专项练习题库 内容涵盖Python,SQL&…...
跟我学C++中级篇——虚函数的性能
一、虚函数性能 一般来说,面向对象的设计中,继承和多态是其中两个非常重要的特征。从使用的过程来看,一般应用到继承的,使用多态的可能性就非常大。而多态的实现有很多种, 但开发者通常认为的多态(动多态&…...

trl - 微调、对齐大模型的全栈工具
文章目录 一、关于 TRL亮点 二、安装1、Python包2、从源码安装3、存储库 三、命令行界面(CLI)四、如何使用1、SFTTrainer2、RewardTrainer3、PPOTrainer4、DPOTrainer 五、其它开发 & 贡献参考文献最近策略优化 PPO直接偏好优化 DPO 一、关于 TRL T…...

GuLi商城-商品服务-API-品牌管理-品牌分类关联与级联更新
先配置mybatis分页: 品牌管理增加模糊查询: 品牌管理关联分类: 一个品牌可以有多个分类 一个分类也可以有多个品牌 多对多的关系,用中间表 涉及的类: 方法都比较简单,就不贴代码了...

【linux】服务器ubuntu安装cuda11.0、cuDNN教程,简单易懂,包教包会
【linux】服务器ubuntu安装cuda11.0、cuDNN教程,简单易懂,包教包会 【创作不易,求点赞关注收藏】 文章目录 【linux】服务器ubuntu安装cuda11.0、cuDNN教程,简单易懂,包教包会一、版本情况介绍二、安装cuda1、到官网…...

在 Apifox 中如何高效批量添加接口请求 Body 参数?
在使用 Apifox 进行 API 设计时,你可能会遇到需要添加大量请求参数的情况。想象一下,如果一个接口需要几十甚至上百个参数,若要在接口的「修改文档」里一个个手动添加这些参数,那未免也太麻烦了,耗时且易出错。这时候&…...

专业PDF编辑工具:Acrobat Pro DC 2024.002.20933绿色版,提升你的工作效率!
软件介绍 Adobe Acrobat Pro DC 2024绿色便携版是一款功能强大的PDF编辑和转换软件,由Adobe公司推出。它是Acrobat XI系列的后续产品,提供了全新的用户界面和增强功能。用户可以借助这款软件将纸质文件转换为可编辑的电子文件,便于传输、签署…...

python打卡day49
知识点回顾: 通道注意力模块复习空间注意力模块CBAM的定义 作业:尝试对今天的模型检查参数数目,并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

P3 QT项目----记事本(3.8)
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

云原生安全实战:API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关(API Gateway) API网关是微服务架构中的核心组件,负责统一管理所有API的流量入口。它像一座…...
JavaScript 数据类型详解
JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型(Primitive) 和 对象类型(Object) 两大类,共 8 种(ES11): 一、原始类型(7种) 1. undefined 定…...
学习一下用鸿蒙DevEco Studio HarmonyOS5实现百度地图
在鸿蒙(HarmonyOS5)中集成百度地图,可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API,可以构建跨设备的定位、导航和地图展示功能。 1. 鸿蒙环境准备 开发工具:下载安装 De…...
离线语音识别方案分析
随着人工智能技术的不断发展,语音识别技术也得到了广泛的应用,从智能家居到车载系统,语音识别正在改变我们与设备的交互方式。尤其是离线语音识别,由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力,广…...

图解JavaScript原型:原型链及其分析 | JavaScript图解
忽略该图的细节(如内存地址值没有用二进制) 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么:保存在堆中一块区域,同时在栈中有一块区域保存其在堆中的地址(也就是我们通常说的该变量指向谁&…...

链式法则中 复合函数的推导路径 多变量“信息传递路径”
非常好,我们将之前关于偏导数链式法则中不能“约掉”偏导符号的问题,统一使用 二重复合函数: z f ( u ( x , y ) , v ( x , y ) ) \boxed{z f(u(x,y),\ v(x,y))} zf(u(x,y), v(x,y)) 来全面说明。我们会展示其全微分形式(偏导…...