【前端】CommonJS和ES Module

区别

语法差异:
CommonJS:使用 require() 导入模块,使用 module.exports 或 exports 导出模块
ES Module:使用 import 导入模块,使用 export 导出模块。

编译时 vs 运行时:
CommonJS 是在运行时加载模块,模块代码是动态执行的。
ES Module 是在编译时静态解析模块依赖关系,以便更好地进行优化和静态分析。

异步加载:
CommonJS 不支持异步加载模块,只能同步加载。
ES Module 支持异步加载模块,可以使用动态 import() 实现按需加载模块。

作用域:
CommonJS 模块在运行时将模块中定义的变量放在一个单独的作用域中,并且是值的拷贝。
ES Module 模块会创建一个词法作用域,在模块中定义的变量不会被外部访问,需要显式导出才能被其他模块引用。

循环依赖:
CommonJS 允许循环依赖,但可能会导致一些问题。
ES Module 不允许循环依赖,会在静态解析阶段就报错。

总的来说,ES Module 是 ECMAScript 的官方标准,具有更好的静态分析、异步加载和模块作用域等特性;而 CommonJS 在 Node.js 等环境下广泛使用,是一种常见的模块系统。在现代的 Web 开发中,通常推荐使用 ES Module 来组织和管理模块。

使用

CommonJS自定义的模块,默认有

module.exports = {}

A:自定义模块a

const age = 20
// 向 module.exports 对象上挂载 username 属性
module.exports.username = 'aa'
// 向 module.exports 对象上挂载 sayHello 方法
module.exports.sayHello = function () {console.log('Hello')return '返回值'
}
module.exports.age = age

调用,前面区别说了,这里的module可以省略,直接export.age这种即可

const myNode = require('./myNode')
console.log(myNode.sayHello())

B:如果a里额外新增,等于覆盖默认的,所以只会导出这个,上面的方法也调用不到

module.exports = {nickname: "ZZZ",
}

要么直接声明A方案,省略module,或者使用B直接导出一个对象,不要混用,自己会乱。

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

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

相关文章

Python中的函数参数传递方式是怎样的?

Python中的函数参数传递方式是怎样的? 在Python中,函数参数传递是函数调用的重要部分,它决定了如何将数据从调用者传递到函数中。Python的参数传递方式主要可以分为两类:位置参数(Positional Arguments)和…

前端需要掌握的 mysql 基础知识

常用的 mysql 的操作方法 1. 新增 这里新增phone,username,password三个参数,后面的?就是写几个, 对应的[phone, username, password]要和前面的顺序一致。 const sql2 INSERT INTO user(phone,username,password) VALUES(?,?,?); const data2 aw…

从原理到实践:深入探索Linux安全机制(一)

前言 本文将从用户和权限管理、文件系统权限、SELinux、防火墙、加密和安全传输、漏洞管理和更新等几个Linux安全机制中的重要方面,深入探索其工作原理和使用方法。在当今数字化时代,网络安全问题备受关注,Linux作为广泛应用的操作系统之一&…

每日一题 --- 977. 有序数组的平方[力扣][Go]

今天这一题和昨天的知识点是一样的,就是双指针法。 题目: 给你一个按 非递减顺序 排序的整数数组 nums,返回 每个数字的平方 组成的新数组,要求也按 非递减顺序 排序。 示例 1: 输入:nums [-4,-1,0,3,1…

对话悠易科技蔡芳:品牌逐渐回归核心能力建设,布局和构建自己的流量阵地

关于SaaS模式在中国的发展,网上出现多种声音。Marteker近期采访了一些行业专家,围绕SaaS模式以及Martech在中国的发展提出独特观点。悠易科技副总裁蔡芳认为,中国目前存在SaaS的应用场景与客户需求,用户的应用能力也在提升&#x…

Ollama 在本地快速启动并执行LLM【大语言模型】

文章目录 1. 什么是Ollama?1.1. SDK库1.2. 提供的api服务1.3. [支持的LLM](https://ollama.com/library)2. 如何安装2.1.下载docker镜像2.2. 启动docker容器3. 如何使用?3.1. 如何加载模型3.2. 使用 Ollama CLI 进行推理3.3. 使用 Ollama API 进行推理参考1. 什么是Ollama?

containerd源代码分析: 整体架构

本文从代码的大的整体组织上来熟悉containerd项目 containerd项目总的说是一个cs模式的原生控制台程序组。containerd作为服务端来接收处理client的各种请求,如常用的拉取推送镜像,创建查询停止容器,生成快照,发送消息等。client/…

蓝桥杯:数的分解

题目 把 2019 分解成 3 个各不相同的正整数之和,并且要求每个正整数都不包含数字 2 和 4, 一共有多少种不同的分解方法? 注意交换 3 个整数的顺序被视为同一种方法,例如 1000100118 和 1001100018 被视为同一种。 思路 循环遍历看每个数的…

XS2105S,IEEE 802.3af 兼容、用电设备接口控制器集成功率 MOSFET V0.5

XS2105S 为用电设备(PD)提供符合以太网供电(PoE)系统 IEEE802.3af 标准的完整接口。XS2105S 为 PD 提供检测信号、分级信号以及带有浪涌电流控制的 集成隔离功率开关。发生浪涌期间,XS2105S 将电流限 制在 180mA 以内,直到隔离功率 MOSFET 完全开启后切 …

【Linux命令】查看内存占用情况(mem, swap)

1. 方法1(top) # top2.方法2(free) # free -h3. 方法3(swapon) # swapon -s

GraalVM详细安装及打包springboot、java、javafx使用教程(打包springboot3篇)

前言 在当前多元化开发环境下,Java作为一种广泛应用的编程语言,其应用部署效率与灵活性的重要性日益凸显。Spring Boot框架以其简洁的配置和强大的功能深受开发者喜爱,而JavaFX则为开发者提供了构建丰富桌面客户端应用的能力。然而&#xff…

物联网如何改善供应链的透明度和效率

物联网(IoT)技术通过将物理对象连接到互联网,使得它们能够收集和交换数据,从而为供应链管理带来了革命性的变化。物联网改善供应链透明度和效率的几个关键方式包括: 实时追踪和监控:物联网设备可以实时追踪…

什么是虚拟继承

由于C支持多继承&#xff0c;除了public、protected和private三种继承方式外&#xff0c;还支持虚拟&#xff08;virtual&#xff09;继承&#xff0c;举个例子&#xff1a; #include <iostream> using namespace std;class A {}; class B : virtual public A {}; class…

Vue模块化开发步骤—遇到的问题—解决办法

目录 1.npm install webpack -g 2.npm install -g vue/cli-init 3.初始化vue项目 4.启动vue项目 Vscode初建Vue时几个需要注意的问题-CSDN博客 1.npm install webpack -g 全局安装webpack 直接命令提示符运行改指令会报错&#xff0c;operation not permitted 注意&#…

复试专业前沿问题问答合集14——自然语言处理

复试专业前沿问题问答合集14——自然语言处理 自然语言处理相关的基础知识问答: Q1: 什么是自然语言处理(NLP)? A1: 自然语言处理是计算机科学、人工智能和语言学领域的一个交叉学科,它致力于使计算机能够理解和处理人类语言。NLP的研究包括语言的语法、语义和语境分析…

第一部分:岗位认知

一、谈谈你对大学教师岗位的认识。&#xff08;了解&#xff09; 我想用三种身份来概括我对大学老师的认识&#xff1a;知识的传授者、生命的塑造者、学问的探求者。 &#xff08;一&#xff09;知识的传授者 韩愈曾说&#xff1a;“师者&#xff0c;所以传道授业解惑也。”教师…

算法设计与分析-分支限界——沐雨先生

&#xff08;1&#xff09;抓奶牛问题描述&#xff1a; 农夫约翰被告知逃跑的奶牛的位置&#xff0c;并且要求立即去抓住它。约翰开始的位置在数轴上位置 N &#xff08; 0 ≤ N ≤ 100) &#xff0c;而奶牛的位置在同样一个数轴上的 K (0 ≤ K ≤ 100) 。约翰有两种移动方式&…

Windows下同时安装多个版本的JDK并配置环境变量

说明&#xff1a;这里安装的JDK版本为1.8和17 JDK下载 官方地址: https://www.oracle.com/java/ 我这里下载的是exe安装包 安装这里就不阐述了&#xff0c;安装方法都是一样的。 系统环境变量配置 1、首先新建JDK1.8和17的JAVA_HOME&#xff0c;他们的变量名区分开&#xff…

Disruptor概览

版本&#xff1a;3.4.2 使用案例 初始化 Disruptor<T> disruptor new Disruptor<>(T::new, RING_BUFFER_SIZE,(Runnable r) -> new Thread(r, "MY-DISRUPTOR-THREAD"),ProducerType.MULTI,new SleepingWaitStrategy(50, TimeUnit.MICROSECONDS.to…

只看到真人版《武庚纪》的顶级特效?那你亏大了!

“一不留神就看6集”&#xff0c;一看一个不吱声&#xff0c;相信看过《烈焰》&#xff08;原名&#xff1a;武庚纪&#xff09;的观众或多或少都有和笔者一样的感受。 与其他国产剧不同的是&#xff0c;《烈焰》改编自动画《武庚纪》&#xff0c;“漫改”让他的人物装造更贴近…