commonjs和esmodule的导入导出细节

CommonJS和ES Module是JavaScript中两种不同的模块系统,它们在导入导出细节上存在差异,以下是两者的具体对比以及方便区分记忆的方法:

1. 导入导出细节

  1. CommonJS
    • 导出:使用module.exportsexports对象来导出模块中的变量、函数或类等。可以导出多个成员,但需要将它们附加到module.exportsexports对象上。
    • 导入:使用require函数来导入其他模块。require函数返回的是被导入模块module.exportsexports对象的内容。
  2. ES Module
    • 导出:使用export关键字来导出模块中的变量、函数、类等。可以导出多个成员,也可以使用默认导出(export default)来导出一个成员。
    • 导入:使用import语句来导入其他模块。import语句可以解构被导入模块的内容,也可以导入默认导出的成员。

2. 差异

  1. 语法:CommonJS使用requiremodule.exports进行导入导出,而ES Module使用importexport关键字。
  2. 模块加载时机:CommonJS是运行时加载模块,即在代码执行到require语句时才会加载模块。而ES Module是在静态编译期间就确定模块的依赖,并在运行时加载。
  3. 值的类型:CommonJS导出的是一个值的拷贝,因此模块内部对导出值的修改不会影响到外部。而ES Module导出的是一个引用,模块内部对导出值的修改可以同步到外部。
  4. 作用域:CommonJS的模块作用域是动态的,模块中定义的变量和函数会被添加到全局作用域中(尽管在实际使用中,这通常通过模块封装来避免)。而ES Module的模块作用域是静态的,模块中定义的变量和函数不会污染全局作用域。
  5. 异步加载:ES Module支持异步加载模块,以提高性能和减少启动时间。而CommonJS只能同步加载模块。
  6. 循环依赖:由于ES Module在静态编译期间就确定模块的依赖关系,因此它可以处理循环依赖。而CommonJS可能会因为循环依赖导致程序崩溃。
  7. 浏览器兼容性:ES Module在现代浏览器中得到广泛支持,而CommonJS主要在Node.js环境中使用。

3. 方便区分记忆的方法

  1. 语法差异:记住CommonJS使用requiremodule.exports这对“动词+名词”的组合进行导入导出,而ES Module使用importexport这对“动词+动词”的组合。
  2. 加载时机:将CommonJS想象成“按需加载”的模型,即代码执行到需要时才加载模块;而将ES Module想象成“预先规划”的模型,在编译期间就确定好模块的依赖关系。
  3. 值的类型:记住CommonJS导出的是“值的拷贝”,就像复印了一份文件;而ES Module导出的是“值的引用”,就像提供了一个文件的链接。
  4. 作用域:将CommonJS想象成“开放”的模型,模块中的变量和函数可能会影响到全局作用域;而将ES Module想象成“封闭”的模型,模块中的变量和函数被严格封装在模块内部。

4. esmodule特殊情况

esmodule可以这样写

// 写法一
export var m = 1;// 写法二
var m = 1;
export {m};// 写法三
var n = 1;
export {n as m};
// 报错
function f() {}
export f;// 正确
export function f() {};// 正确
function f() {}
export {f};

5. 思考

  1. CommonJS可以记忆成数据量大,所有的关键词配上s,然后实际导出都是借助moduleexports 实际上只是对 module.exports 的一个引用。
  2. esmodule导出:的实质是,在接口名与模块内部变量之间,建立了一一对应的关系。(简单记忆:直接导出或者在对象中导出,可配合as改名

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/55609.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

利用移动式三维扫描技术创建考古文物的彩色纹理网格【上海沪敖3D】

文章来源于蔡司工业质量解决方案,作者蔡司工业质量 在考古环境中,三维扫描技术应用广泛,如存档、保存、复制和分享(包括实体和虚拟形式)。 文中,通过真实的扫描案例,您将了解到三维光学解决方案…

Lua简介

软考鸭微信小程序 学软考,来软考鸭! 提供软考免费软考讲解视频、题库、软考试题、软考模考、软考查分、软考咨询等服务 在编程语言的浩瀚星空中,Lua以其独特的魅力和广泛的应用场景,成为了众多开发者心中的一颗璀璨明星。作为一篇专注于技术深度与实践应…

Python处理超大json文件的几种方案

目录 专栏导读库的安装方案1代码 方案2代码 方案3代码 总结 专栏导读 🌸 欢迎来到Python办公自动化专栏—Python处理办公问题,解放您的双手 🏳️‍🌈 博客主页:请点击——> 一晌小贪欢的博客主页求关注 &#x…

WordPress任推帮网盘拉新数据统计插件

任推邦是国内一线的APP推广项目分发和流量变现平台,隶属聚名科技集团(国家级高新技术企业、AAA重合同守信用企业,安徽百强企业),任推邦目前是阿里、字节、百度、迅雷、美团等品牌一级用户增长服务商,已入驻各类自媒体达…

如何安装MySql

一.卸载MySql 1.1安装版 进入“控制面板”,将有关“mysql”的一切都删除,再到“C:\ProgramData”中,将“mysql”文件夹删除。 1.2压缩版 先在cmd中停止mysql服务 net stop mysql8 再删除解压“mysql”文件夹即可 二.安装MySql 2.2安装版…

Vant 日期时间组件拓展

基于 "vant": "^4.8.3", 效果图 <template><!-- 弹出层 --><van-popupv-model:show"isPicker"position"bottom"><van-pickerref"picker":title"title"v-model"selectedValues"…

软考24.10.15每日一练打卡 - 错题笔记

题目来源&#xff1a;https://ruankaodaren.com/ ##1. M公司将其开发的某软件产品注册商标为S&#xff0c;为确保公司在市场竞争中占据地位&#xff0c;M公司对员工进行了保密约束&#xff0c;此情形下&#xff0c;该公司不享有&#xff08; 商标权&#xff09;。 本题题干中提…

7、Vue2(二) vueRouter3+axios+Vuex3

14.vue-router 3.x 路由安装的时候不是必须的&#xff0c;可以等到使用的时候再装&#xff0c;如果之前没有安装的话&#xff0c;可以再单独安装。之前的终端命令行不要关闭&#xff0c;再重新开一个&#xff0c;还需要再package.json文件的依赖中添加。 如果忘记之前是否有安…

机器学习:opencv--风格迁移

目录 前言 一、代码及步骤解释 1.图片与处理 2.加载模型 3.输出图像 前言 风格迁移&#xff08;Style Transfer&#xff09;是一种计算机视觉技术&#xff0c;旨在将一种图像的艺术风格应用到另一种图像上&#xff0c;同时保持其内容。 一、代码及步骤解释 1.图片与处理 …

滚雪球学Redis[7.1讲]:Redis实战案例

全文目录&#xff1a; &#x1f389;前言&#x1f6a6;1. 使用Redis实现会话管理在Web应用中使用Redis管理会话会话过期与刷新策略安全性考虑与优化 &#x1f9e9;2. 使用Redis实现缓存系统缓存的基本原理Redis缓存的应用场景缓存失效策略与雪崩预防 ✨3. Redis在排行榜系统中的…

VBA技术资料MF210:按顺序号复制工作表中的图片

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套&#xff0c;分为初级、中级、高级三大部分&#xff0c;教程是对VBA的系统讲解&#…

EKS API查询慢排查

EKS API查询异常慢&#xff0c;一次查询得4~5s&#xff0c;命令补全也是需要API查询的&#xff0c;导致执行一次查询命令可能比平常花费10倍时间 现象 1、命令输入后返回慢 2、get edit delete所有操作都慢 排查 1、同样需要查询API的kuboard在执行各项操作时无延迟 2、升级…

DirectShow过滤器开发-音频渲染过滤器

下载本过滤器 本过滤器播放PCM和FLOAT音频流。 过滤器信息 过滤器名称&#xff1a;音频渲染 过滤器GUID&#xff1a;{4A910FA8-08DC-4832-85B2-4B7A3FF87F88} DLL注册函数名&#xff1a;DllRegisterServer 删除注册函数名&#xff1a;DllUnregisterServer 过滤器有1个输入引脚…

使用 MongoDB 构建 AI:利用实时客户数据优化产品生命周期

在《使用 MongoDB 构建 AI》系列博文中&#xff0c;我们看到越来越多的企业正在利用 AI 技术优化产品研发和用户支持流程。例如&#xff0c;我们介绍了以下案例&#xff1a; Ventecon 的 AI 助手帮助产品经理生成和优化新产品规范 Cognigy 的对话式 AI 帮助企业使用任意语言&a…

OpenCV-光流估计

文章目录 一、光流估计介绍1.光流估计的基本概念2.光流估计的原理3.光流估计的前提4.OpenCV中的光流估计算法5.参数设置与调整 二、代码实现三、注意事项 OpenCV中的光流估计是计算机视觉领域中的一项重要技术&#xff0c;它通过分析图像序列中像素点的运动&#xff0c;来估计物…

约克VRF打造舒适绿色无污染的生活环境

在生活的各个方面&#xff0c;约克VRF都采取了多种措施助力碳中和。 采用国际领先的空气源热泵技术&#xff0c;只需少量电力就可将空气中的能量转化为室内热量&#xff0c;被称为“大自然的搬运工”&#xff01;COP能效值最高可达4.24&#xff08;每用一度电产生4.24度电热量&…

Elasticsearch字段数据类型

1. 前言 ES文档的每个字段都至少有一个数据类型&#xff0c;此类型决定了字段值如何被存储以及检索。例如&#xff0c;字符串类型可以定义为text或者keyword&#xff0c;前者用于全文检索&#xff0c;会经过分词后索引&#xff1b;后者用于精准匹配&#xff0c;值会保持原样被…

接口测试-接口支持幂等

接口支持幂等是什么意思&#xff1f; 接口支持幂等&#xff08;Idempotency of Interface&#xff09;意味着&#xff0c;对于同一请求&#xff0c;无论其被发送多少次&#xff0c;接口都应该返回相同的结果&#xff0c;并且不会对系统状态产生不同的影响&#xff08;即无副作…

使用verilog设计实现的数字滤波器(低通、高通、带通)及其仿真

以下是一个简单的使用Verilog设计数字滤波器(以有限脉冲响应(FIR)滤波器为例,实现低通、高通、带通滤波器)的基本步骤和代码框架: 一、FIR滤波器原理 FIR滤波器的输出 y [ n ] y[n] y[n] 是输入信号

道观小程序系统架构设计与实现开发案例分析

道观小程序是一款专为道教信仰者和文化爱好者设计的移动应用&#xff0c;旨在提供一站式服务体验。它融合了道教文化传播、道观信息查询、在线供奉祈福以及信众互动交流等多重功能&#xff0c;让用户能够轻松获取道观的最新资讯&#xff0c;参与宗教活动&#xff0c;享受便捷的…