commonjs和esmodule的导入导出细节
CommonJS和ES Module是JavaScript中两种不同的模块系统,它们在导入导出细节上存在差异,以下是两者的具体对比以及方便区分记忆的方法:
1. 导入导出细节
- CommonJS
- 导出:使用
module.exports或exports对象来导出模块中的变量、函数或类等。可以导出多个成员,但需要将它们附加到module.exports或exports对象上。 - 导入:使用
require函数来导入其他模块。require函数返回的是被导入模块module.exports或exports对象的内容。
- 导出:使用
- ES Module
- 导出:使用
export关键字来导出模块中的变量、函数、类等。可以导出多个成员,也可以使用默认导出(export default)来导出一个成员。 - 导入:使用
import语句来导入其他模块。import语句可以解构被导入模块的内容,也可以导入默认导出的成员。
- 导出:使用
2. 差异
- 语法:CommonJS使用
require和module.exports进行导入导出,而ES Module使用import和export关键字。 - 模块加载时机:CommonJS是运行时加载模块,即在代码执行到
require语句时才会加载模块。而ES Module是在静态编译期间就确定模块的依赖,并在运行时加载。 - 值的类型:CommonJS导出的是一个值的拷贝,因此模块内部对导出值的修改不会影响到外部。而ES Module导出的是一个引用,模块内部对导出值的修改可以同步到外部。
- 作用域:CommonJS的模块作用域是动态的,模块中定义的变量和函数会被添加到全局作用域中(尽管在实际使用中,这通常通过模块封装来避免)。而ES Module的模块作用域是静态的,模块中定义的变量和函数不会污染全局作用域。
- 异步加载:ES Module支持异步加载模块,以提高性能和减少启动时间。而CommonJS只能同步加载模块。
- 循环依赖:由于ES Module在静态编译期间就确定模块的依赖关系,因此它可以处理循环依赖。而CommonJS可能会因为循环依赖导致程序崩溃。
- 浏览器兼容性:ES Module在现代浏览器中得到广泛支持,而CommonJS主要在Node.js环境中使用。
3. 方便区分记忆的方法
- 语法差异:记住CommonJS使用
require和module.exports这对“动词+名词”的组合进行导入导出,而ES Module使用import和export这对“动词+动词”的组合。 - 加载时机:将CommonJS想象成“按需加载”的模型,即代码执行到需要时才加载模块;而将ES Module想象成“预先规划”的模型,在编译期间就确定好模块的依赖关系。
- 值的类型:记住CommonJS导出的是“值的拷贝”,就像复印了一份文件;而ES Module导出的是“值的引用”,就像提供了一个文件的链接。
- 作用域:将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. 思考
- CommonJS可以记忆成数据量大,所有的关键词配上
s,然后实际导出都是借助module,exports实际上只是对module.exports的一个引用。 - esmodule导出:的实质是,在接口名与模块内部变量之间,建立了一一对应的关系。(简单记忆:直接导出或者在对象中导出,可配合as改名)
相关文章:
commonjs和esmodule的导入导出细节
CommonJS和ES Module是JavaScript中两种不同的模块系统,它们在导入导出细节上存在差异,以下是两者的具体对比以及方便区分记忆的方法: 1. 导入导出细节 CommonJS 导出:使用module.exports或exports对象来导出模块中的变量、函数…...
【热门】用ChatGPT做智慧农业云平台——农业ERP管控系统
随着科技的进步,原有农业种植方式已经不能满足社会发展的需要,必须对传统的农业进行技术更新和改造。经过多年的实践,人们总结出一种新的种植方法——温室农业,即“用人工设施控制环境因素,使作物获得最适宜的生长条件,从而延长生产季节,获得最佳的产出”。这种农业生产方式…...
Android从上帝视角来看PackageManagerService
戳蓝字“牛晓伟”关注我哦! 用心坚持输出易读、有趣、有深度、高质量、体系化的技术文章,技术文章也可以有温度。 前言 阅读该篇之前,建议先阅读下面的系列文章: Android深入理解包管理–PackageManagerService和它的“小伙伴…...
阵列式位移计与传统测斜仪相比的优势
在岩土工程监测领域,位移测量是确保工程质量和安全的重要环节。传统的测斜仪,如活水平固定测斜仪和固定式测斜仪,尽管在一定程度上满足了工程监测的需求,但某些方面限制了其应用范围。随着阵列式位移计这种新型的传感器的出现&…...
第7章 网络请求和状态管理
一、Axios 1 Axios概述 Axios是一个基于Promise的HTTP库,可以发送get、post等请求,它作用于浏览器和Node.js中。当运行在浏览器时,使用XMLHttpRequest接口发送请求;当运行在Node.js时,使用HTTP对象发送请求。 Axios的…...
苍穹外卖学习笔记(二十七)
客户催单 OrderController /*** 催单*/GetMapping("/reminder/{id}")ApiOperation("催单")public Result reminder(PathVariable("id") Long id) {orderService.reminder(id);return Result.success();}OrderServer /*** 催单*/void reminder(L…...
使用exe4j打包jar包生成exe文件,GUI应用详细使用教程
使用exe4j打包jar包生成exe文件,GUI应用详细使用教程 exe4j应用教程使用方式搞副业 exe4j应用教程 《exe4j 下载地址》 exe4j是一个功能强大的多平台 Java 安装程序生成器,它可以为 Java 应用程序生成本机安装程序和应用程序启动器。exe4j 的优点在于它的易用性、广…...
go jwt 用户登录和返回用户信息 token ----important!!!
1.每一行代码都有详细注释,解释了其功能和作用。这些注释可以帮助你理解代码如何工作,特别是在处理用户登录、生成 JWT、验证 JWT 和返回用户信息的过程中。 package main // 指定这个文件是一个可执行程序import ("fmt" …...
OpenCV高级图形用户界面(12)用于更改指定窗口的大小函数resizeWindow()的使用
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 cv::resizeWindow() 函数用于更改指定窗口的大小。这使得你可以根据需要调整窗口的宽度和高度。 注释 指定的窗口大小是指图像区域的大小。工具栏…...
babylonjs shader学习之copy shadertoy案例
shadertoy案例: 准备 const onSceneReady (scene: Scene) > {const light new HemisphericLight(light, new Vector3(0, 1, 0), scene);light.intensity 0.7;Effect.ShadersStore[planeMatVertexShader] precision highp float;attribute vec3 position;attr…...
Leetcode 1137. 第 N 个泰波那契数
原题链接:Leetcode 1137. 第 N 个泰波那契数 代码1: class Solution { public:int a[40];int tribonacci(int n) {a[0]0;a[1]1;a[2]1;if(n<1) return n;if(a[n]) return a[n];a[n]tribonacci(n-1)tribonacci(n-2)tribonacci(n-3);return a[n];} };代…...
Rust 语言持续崛起,即将冲击 TIOBE 指数前十,能否成为编程语言新王者?
Rust 语言持续崛起,即将冲击 TIOBE 指数前十,能否成为编程语言新王者? 2024 年 10 月,全球编程语言 TIOBE 排行榜再次更新,各大编程语言在各自领域中继续发挥着独特的优势。官方的标题是: Rust排名稳步攀升…...
Linux 手撕线程池
前言 线程池 是 池化技术 中很典型的一个,它旨在高效的管理和复用线程资源!在现在的计算机体系中,线程是执行任务(调度)的基本单位。然而,频繁的创建和销毁线程也会带来较大的开销,包括系统资源…...
[Unity Demo]从零开始制作空洞骑士Hollow Knight第十五集:制作更多地图,更多敌人,更多可交互对象
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、第一个代表性场景 1.制作更多敌人2.制作更多可交互对象二、第二个代表性场景 1.制作更多敌人2.制作更多可交互对象三、第三个代表性场景 1.制作更多敌人2.制…...
在Openshift上安装MetalLB
1.部署MetalLB Operator 2.部署AddressPool addresses 必须和ocp节点在同一网段 apiVersion: metallb.io/v1beta1 kind: AddressPool metadata:name: metallb-ipaddressnamespace: metallb-system spec:addresses:- 192.168.1.51-192.168.1.60- 192.168.1.61-192.168.1.70aut…...
mysql其他对象
一、存储引擎 mysql的存储引擎包括: InnoDB,MyISAM,Memory(Heap),Archive,CSV,NDB Cluster 常用的只有前两个。 InnoDB与MyISAM的区别: InnoDB 简介:Inn…...
英语单词之社会生活之聚会
一些关于聚会的单词和短语 句子 English中文What’s the plan?计划是什么?I’m going out with some friends.我要跟几个朋友一起出去。I don’t really feel like going out.我不是很想出去。What time suits you ?你什么时间合适?Where shall we m…...
Qt - 地图相关 —— 1、加载百度在线地图(附源码)
效果图 开始加载地图 1、百度地图开发者网站中注册,获取密钥 2、进入开发文档中 将下图内容保存到本地文件中,文件名为"index.html"文件即可。接着将内容中的“您的密钥”改为刚刚创建应用出来的AK密钥即可。 然后双击打开若在浏览器中正常看到下图右侧地图则说明没…...
Elasticsearch 简单使用
Elasticsearch 安装和基本操作 一、引言 Elasticsearch 是一个基于 Lucene 构建的开源分布式搜索引擎,提供了实时的搜索和数据分析能力。它广泛应用于日志分析、全文搜索、数据可视化等场景。本文将详细介绍 Elasticsearch 的安装步骤及基本操作,包括索…...
基于SpringBoot+Vue+uniapp微信小程序的垃圾分类系统的详细设计和实现(源码+lw+部署文档+讲解等)
项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念,提供了一套默认的配置,让开发者可以更专注于业务逻辑而不是配置文件。Spring Boot 通过自动化配置和约…...
CentOS服务器上VNC连接失败?手把手教你排查并修复个人端口问题(附重启命令)
CentOS服务器VNC连接故障深度排查指南:从原理到实战当你在深夜赶项目时,突然发现VNC连接不上服务器,那种焦虑感我深有体会。去年参与半导体器件仿真项目时,我也曾被这个问题困扰整整两天。本文将分享一套经过实战检验的排查方法论…...
基于ATtiny84的智能冰箱监控器:低功耗温度与门状态监测方案
1. 项目概述:一个装在树莓派盒子里的智能冰箱管家如果你家里有台老冰箱,或者对食物储存温度特别在意,总担心冰箱门没关严或者突然断电导致内部升温,那么这个自己动手做的“冰箱看门狗”项目就太适合你了。它本质上是一个高度定制化…...
AI IDE 革命:程序员正在被重新定义
很多开发者第一次使用 Cursor 的 CtrlK 或 Composer(高级多文件编辑模式)时,都会有一种强烈的、甚至让人有些脊背发凉的冲击感。 因为: 它已经不再是那个我们熟悉的、只能在原地等待光标落下的: “代码自动补全插件&am…...
CSharpVerbalExpressions常见问题解答:解决开发者遇到的10个典型挑战
CSharpVerbalExpressions常见问题解答:解决开发者遇到的10个典型挑战 【免费下载链接】CSharpVerbalExpressions 项目地址: https://gitcode.com/gh_mirrors/cs/CSharpVerbalExpressions CSharpVerbalExpressions是一个强大的C#库,它通过类自然语…...
为什么你的DeepSeek微调loss震荡不止?(Meta/DeepSeek联合团队未公开的梯度裁剪+LoRA初始化双校准协议)
更多请点击: https://codechina.net 第一章:DeepSeek微调loss震荡的根本归因剖析 DeepSeek系列模型在微调过程中频繁出现loss剧烈震荡现象,其本质并非单一因素所致,而是数据、优化器、梯度动态与模型结构四者耦合失稳的系统性表现…...
告别手动复制!用这个自定义编辑器脚本一键备份/克隆Unity Terrain Data
告别手动复制!用这个自定义编辑器脚本一键备份/克隆Unity Terrain Data在Unity关卡设计和技术美术的工作流中,地形数据的灵活复用往往意味着反复的手动操作——导出高度图、备份材质参数、复制植被分布,每个环节都可能成为效率瓶颈。想象这样…...
XZ1018,100V,40A,NMOS 封装:TO252
封装:TO252类型:NVDS:100V VGS: 20V ID:40ARDS(ON):10V <14mΩRDS(ON):4.5V <19mΩ型号: XZ1018 封装:TO252类型…...
XXPermissions:Android权限管理框架的架构设计与最佳实践
XXPermissions:Android权限管理框架的架构设计与最佳实践 【免费下载链接】XXPermissions Android Permissions Framework, Adapt to Android 16 项目地址: https://gitcode.com/GitHub_Trending/xx/XXPermissions 在Android应用开发中,权限管理一…...
YOLOv8道路交通信号标志识别检测系统(项目源码+YOLO数据集+模型权重+UI界面+python+深度学习+环境配置)
摘要 道路交通信号标志的自动检测是智能驾驶与交通管理系统中的核心环节。本文基于YOLOv8目标检测算法,构建了一个涵盖21类常见交通信号标志的检测系统,包括禁令标志、指示标志、警告标志及信号灯等。模型在包含1376张训练图像、488张验证图像和229张测…...
基于ESP8266与RGBDigit的Wi-Fi网络时钟:硬件设计、物联网集成与DIY实践
1. 项目概述:一个能感知环境的网络时钟如果你和我一样,对复古又带点科技感的显示设备没有抵抗力,同时又是个喜欢动手折腾的极客,那么这个项目绝对能让你在工作室或家里多一个既实用又炫酷的玩意儿。我说的就是这款基于RGBDigit数码…...
