JS【详解】ES6 模块规范 vs CommonJS 模块规范

每个 js 文件都是一个模块,默认采用的 CommonJS 模块规范

新兴的 ES6 模块 pk 传统的 CommonJS 模块

特性CommonJSES6 模块化
导出exports 对象export 关键字
导入require()函数import 关键字
加载模式同步异步
执行模式单例单例
依赖关系静态动态
树形摇晃不支持支持

加载模式

  • CommonJS 是同步的, 在加载模块之前,代码会停止执行。
  • ES6 模块是异步的,代码可以继续执行,而模块将在稍后加载。

执行模式

CommonJS 和 ES6 模块的执行都是单例的:模块只会被加载一次,并且所有对模块的引用都将指向同一个实例。

依赖关系

  • CommonJS 是静态的, 模块的依赖关系在编译时确定。
  • ES6 模块是动态的,模块的依赖关系在运行时确定

树形摇晃

一种优化技术,用于从 JavaScript 捆绑包中删除未使用的代码。

  • CommonJS 不支持树形摇晃,模块中未使用的代码也会被加载。
  • ES6 模块化支持树形摇晃,可以自动删除未使用的代码,从而减小包的大小。

启用 ES6 模块的三种方法

  1. 在 package.json 文件中设置 "type": "module",这样 Node.js 就会将所有 .js 文件视为 ES6 模块。
  2. 将文件扩展名改为 .mjs,这样 Node.js 会自动将其视为 ES6 模块。
  3. 在 script 标签中添加 type="module" 属性

ES6 模块语法

默认导出导入 export default

每个模块默认的导出只能有一个

let a = 1
// 默认导出 a
export default a
// 导入默认时,可以命其他名称
import b from './demo.js'console.log(b)

可以直接使用函数表达式/匿名函数作为默认导出

export default function myFunc() {}
export default function() {}

导出导入多项 export { }

let a = 1
let b = 2export { a, b }
// 导入多项时,必须与导出名对应
import { a, b } from './demo.js'console.log(a, b)

导出时重命名 as

let a = 1
let b = 2export { a as c, b as d }
// 导入时,只能导入新的名称
import { c, d } from './demo.js'console.log(c, d)

导出其他模块指定项

export { name1, name2, ... } from 'module-name'

导入模块导出的所有内容 import *

export let a = 1;
export let b = 2;
// 通过 as 重命名为一个变量(值为对象)
import * as myModule from "./demo.mjs";console.log(myModule.a);
console.log(myModule.b);

导入时重命名 as

import {trunc as StringLib} from "../lib/string.js"
import {trunc as MathLib} from "../lib/math.js"

导入 json 格式的文件

import pkg from "./package.json" assert { type: "json" };
const { default: jsonObject } = await import('./file.json', {assert: {type: 'json'}
});

导入 CommonJS 模块

import * as 自定义名称  from '模块名称'

CommonJS 模块语法

  • 每个模块内有一个 module 对象,其有属性 exports(属性值也是一个对象)
  • 通过 require() 导入时,会获取到导出模块中 module 对象的 exports 属性
  • 在同一个模块中,不要混用 exports 和 module.exports 来导出不同的内容,因为这会导致混淆和不可预期的行为。

导出导入单项 module.exports

导出

module.exports = "朝阳";

导入

const demoModule = require("./demo.js");console.log(demoModule); // 朝阳

导出导入多项 exports

导出

exports.a = 1;
exports.b = 2;

导入

const demoModule = require("./demo.js");console.log(demoModule); // { a: 1, b: 2 }

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

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

相关文章

板级调试小助手(3)基于PYNQ的OLED视频显示

一、前言 在之前的文章中介绍了《板级调试小助手》的系统结构和DDS自定义外设的搭建。这篇文章主要介绍一下如何在PYNQ中驱动平时长剑的OLED12864显示屏,并显示BadApple(毕竟有屏幕的地方就要有BadApple)。效果如下: BadApple 本项…

Access denied for user ‘root‘@‘localhost‘ (using password: YES)解决办法

在Spring配置数据源时,当使用Spring容器加载druid.properties数据库连接池配置文件时,容易碰到create connection SQLException, url: jdbc:mysql://127.0.0.1:3306/mydbs, errorCode 1045, state 28000 java.sql.SQLException: Access denied for user …

破解YouTube限制:保姆级教程,轻松查看博主邮箱

近期YouTube取消了博主的邮箱展示,这造成了不小的轰动,给想要联系博主的粉丝和想要寻求网红合作的品牌都带来了极大的不便。但这难不倒万能的网友!最新发现,通过一串神秘代码可以在YouTube上查看到博主的邮箱,这里Nox聚…

Java进阶----多态

多态 什么是多态 在继承父类或者实现接口的基础上,允许同一类事物出现不同的状态 多态的前提:继承或实现的关系、方法的重写、父类(接口)引用指向子类(实现类)对象 表现形式 父类 变量 子类对象(); 接…

解决方案架构师系列 - AWS - AWS Amplify 服务功能介绍

探索AWS Amplify:构建高效、安全的云原生应用 AWS Amplify 是一个开源框架,由亚马逊网络服务(AWS)提供,旨在简化Web和移动应用程序的开发。它是一套完整的开发工具集合,帮助开发者快速地实现功能如身份验证…

CycleGAN深度学习项目

远程仓库 leftthomas/CycleGAN: A PyTorch implementation of CycleGAN based on ICCV 2017 paper "Unpaired Image-to-Image Translation using Cycle-Consistent Adversarial Networks" (github.com) 运行准备 Anaconda 安装需要的库 指令 pip install panda…

LPRNet 车牌识别部署 rk3588(pt-onnx-rknn)包含各个步骤完整代码

虽然车牌识别技术很成熟了,但完全没有接触过。一直想搞一下、整一下、试一下、折腾一下,工作之余找了一个简单的例子入个门。本博客简单记录一下 LPRNet 车牌识别部署 rk3588流程,训练参考 LPRNet 官方代码。 1、导出onnx   导出onnx很容易…

昇思25天打卡营-mindspore-ML- Day24-基于 MindSpore 实现 BERT 对话情绪识别

学习笔记:基于MindSpore实现BERT对话情绪识别 算法原理 BERT(Bidirectional Encoder Representations from Transformers)是由Google于2018年开发的一种预训练语言表示模型。BERT的核心原理是通过在大量文本上预训练深度双向表示&#xff0…

Win7电脑修改网卡配置连接千兆网络的方法

Win7电脑修改网卡配置连接千兆网络的方法 Realtek PCIe GBE Family Controller是千兆网卡,GBE的意思就是1Gbps网卡,也就是千兆网卡,翻译成中文就是瑞昱PCI-E总线千兆网络系列控制器。 目前有很多的电脑都是使用realtek网卡的,当时奇怪的是网卡连接到h3或者d-link千兆交换机…

探索老年综合评估实训室的功能与价值

一、引言 随着人口老龄化的加剧,老年健康问题日益受到关注。老年综合评估实训室作为专门为老年人健康服务而设立的场所,具有独特的功能和重要的价值。 二、老年综合评估实训室的功能 (一)健康评估功能 1、身体功能评估 通过专业设…

【postgresql】权限(Privileges)

权限(privileges)是决定用户或角色可以对数据库对象(如表、视图、序列和函数)执行哪些操作的许可。权限对于维护安全性和控制对数据的访问至关重要。 权限分类 在 PostgreSQL 中,权限分为以下几种: SELEC…

数据库基本查询(表的增删查改)

一、增加 1、添加信息 insert 语法 insert into table_name (列名) values (列数据1,列数据2,列数据3...) 若插入时主键或唯一键冲突就无法插入。 但如果我们就是要修改一列信息也可以用insert insert into table_name (列名) values (列数据1&am…

客户端通过服务器进行TCP通信(三)

一. 对TCP的基础讲解 服务端 1. 首先创建一个套接字,TCP是面向字节流的套接字,故需要使用SOCK_STREAM 2. 然后使用bind()函数将套接字与服务器地址关联(如果是在本地测试,直接将地址设置为217.0.0.1或者localhost,端口号为1000…

内存函数(C语言)

内存函数 以下函数的头文件:string.h 针对内存块进行处理的函数 memcpy 函数原型: void* memcpy(void* destination, const void* source, size_t num);目标空间地址 源空间地址num,被拷贝的字节个数 返回目标空间的起始地…

Python与自动化脚本编写

Python与自动化脚本编写 Python因其简洁的语法和强大的库支持,成为了自动化脚本编写的首选语言之一。在这篇文章中,我们将探索如何使用Python来编写自动化脚本,以简化日常任务。 一、Python自动化脚本的基础 1. Python在自动化中的优势 Pyth…

在 YAML 中的变量(使用 和 * 定义及引用变量)

在 YAML 文件中,使用 & 和 * 是一种常见的定义和引用变量的方式。也是最简单的方式 使用 & 定义变量 在 YAML 中,& 符号用于定义一个锚点(anchor),也就是一个命名的变量。这个变量可以在文件的其他地方被引用和复用。 例如: title: &sc test在这个例子中,t…

1.31、基于长短记忆网络(LSTM)的发动机剩余寿命预测(matlab)

1、基于长短记忆网络(LSTM)的发动机剩余寿命预测的原理及流程 基于长短期记忆网络(LSTM)的发动机剩余寿命预测是一种常见的机器学习应用,用于分析和预测发动机或其他设备的剩余可用寿命。下面是LSTM用于发动机剩余寿命预测的原理和流程: 数据收集&#…

【Linux】 GCC/G++与Makefile使用

Linux GCC/G使用 GCC如何完成 格式:gcc [选项] 要编译的文件 [选项] [目标文件] 常用选项: -E:让gcc在预处理结束后停止编译过程,输出.i的C语言原始文件。-S:该选项只是进行编译而不是进行汇编,最终生成汇…

(leetcode学习)16. 最接近的三数之和

给你一个长度为 n 的整数数组 nums 和 一个目标值 target。请你从 nums 中选出三个整数,使它们的和与 target 最接近。 返回这三个数的和。 假定每组输入只存在恰好一个解。 示例 1: 输入:nums [-1,2,1,-4], target 1 输出:2 解…

力扣144题:二叉树的先序遍历

给你二叉树的根节点 root ,返回它节点值的 前序 遍历。 示例 1: 输入:root [1,null,2,3] 输出:[1,2,3]示例 2: 输入:root [] 输出:[]示例 3: 输入:root [1] 输出&am…