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

深入剖析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 生态系统中&#xff0c…...

角点检测及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的值为&#xff08;&#xff09; A. 3 B. 2 C. 9 D. 2/3 数据分析认证考试介绍&#xff1a;点击进入 题目来源于CDA模拟题库 点击此处获取答案 数据分析专项练习题库 内容涵盖Python&#xff0c;SQL&…...

跟我学C++中级篇——虚函数的性能

一、虚函数性能 一般来说&#xff0c;面向对象的设计中&#xff0c;继承和多态是其中两个非常重要的特征。从使用的过程来看&#xff0c;一般应用到继承的&#xff0c;使用多态的可能性就非常大。而多态的实现有很多种&#xff0c; 但开发者通常认为的多态&#xff08;动多态&…...

trl - 微调、对齐大模型的全栈工具

文章目录 一、关于 TRL亮点 二、安装1、Python包2、从源码安装3、存储库 三、命令行界面&#xff08;CLI&#xff09;四、如何使用1、SFTTrainer2、RewardTrainer3、PPOTrainer4、DPOTrainer 五、其它开发 & 贡献参考文献最近策略优化 PPO直接偏好优化 DPO 一、关于 TRL T…...

GuLi商城-商品服务-API-品牌管理-品牌分类关联与级联更新

先配置mybatis分页&#xff1a; 品牌管理增加模糊查询&#xff1a; 品牌管理关联分类&#xff1a; 一个品牌可以有多个分类 一个分类也可以有多个品牌 多对多的关系&#xff0c;用中间表 涉及的类&#xff1a; 方法都比较简单&#xff0c;就不贴代码了...

【linux】服务器ubuntu安装cuda11.0、cuDNN教程,简单易懂,包教包会

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

在 Apifox 中如何高效批量添加接口请求 Body 参数?

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

专业PDF编辑工具:Acrobat Pro DC 2024.002.20933绿色版,提升你的工作效率!

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

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...

论文阅读:Matting by Generation

今天介绍一篇关于 matting 抠图的文章&#xff0c;抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法&#xff0c;已经有很多的工作和这个任务相关。这两年 diffusion 模型很火&#xff0c;大家又开始用 diffusion 模型做各种 CV 任务了&am…...

人工智能 - 在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型

在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型。这些平台各有侧重&#xff0c;适用场景差异显著。下面我将从核心功能定位、典型应用场景、真实体验痛点、选型决策关键点进行拆解&#xff0c;并提供具体场景下的推荐方案。 一、核心功能定位速览 平台核心定位技术栈亮…...