从0开始学习JavaScript--JavaScript ES6 模块系统

JavaScript ES6(ECMAScript 2015)引入了官方支持的模块系统,使得前端开发更加现代化和模块化。本文将深入探讨 ES6 模块系统的各个方面,通过丰富的示例代码详细展示其核心概念和实际应用。

ES6 模块的基本概念

1 模块的导出

ES6 模块通过 export 关键字导出功能,可以导出变量、函数、类等。

// mathModule.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

2 模块的导入

使用 import 关键字导入模块提供的功能。

// app.js
import { add, subtract } from './mathModule';console.log(add(5, 3)); // 输出: 8
console.log(subtract(5, 3)); // 输出: 2

默认导出与默认导入

1 默认导出

一个模块可以有一个默认导出,通过 export default 实现。

// defaultModule.js
const defaultMessage = 'Hello, default export!';export default defaultMessage;

2 默认导入

在导入时,使用 import moduleName from 'modulePath' 语法进行默认导入。

// appDefault.js
import defaultMessage from './defaultModule';console.log(defaultMessage); // 输出: Hello, default export!

模块的重命名与整体导入

1 重命名导入项

在导入时,可以使用 as 关键字进行重命名。

// appRename.js
import { add as addition, subtract as subtraction } from './mathModule';console.log(addition(5, 3)); // 输出: 8
console.log(subtraction(5, 3)); // 输出: 2

2 整体导入

使用 * as 语法进行整体导入。

// appNamespace.js
import * as math from './mathModule';console.log(math.add(5, 3)); // 输出: 8
console.log(math.subtract(5, 3)); // 输出: 2

动态导入

ES6 模块系统支持动态导入,通过 import() 函数实现在运行时动态加载模块。

// dynamicImport.js
export const dynamicImport = async (path) => {const module = await import(path);return module;
};
// appDynamic.js
import { dynamicImport } from './dynamicImport';(async () => {const math = await dynamicImport('./mathModule');console.log(math.add(5, 3)); // 输出: 8
})();

模块的循环依赖

ES6 模块系统解决了循环依赖的问题,确保模块之间的依赖关系不会陷入死循环。

// circularModuleA.js
import { messageB } from './circularModuleB';export const messageA = `Module A: ${messageB}`;
// circularModuleB.js
import { messageA } from './circularModuleA';export const messageB = `Module B: ${messageA}`;

模块的静态化

在ES6模块系统中,模块的静态化是其一个重要特性。这一特性意味着模块的依赖关系在代码执行前就已经确定,为编译器进行优化提供了有力支持。

// mathModule.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
// app.js
import { add, subtract } from './mathModule';console.log(add(5, 3)); // 输出: 8
console.log(subtract(5, 3)); // 输出: 2

在这个例子中,编译器可以在构建时静态地确定app.js模块对mathModule.js的依赖关系,因此可以在输出时进行相应的优化。

模块的生命周期

模块的生命周期在ES6模块系统中是一个重要的概念,它影响着模块在应用中的行为和性能。了解模块的生命周期有助于更好地组织和优化代码。

1. 模块的执行时机

模块在第一次被导入时会被执行。这意味着模块内的代码在第一次导入时会立即执行,而不是等到模块被使用时再执行。

考虑以下模块:

// lifecycleModule.js
console.log('Module is executed.');export const message = 'Hello from the module!';
// app.js
import { message } from './lifecycleModule';console.log(message);

app.js第一次导入lifecycleModule.js时,控制台将输出"Module is executed.",说明模块内的代码在导入时执行。之后再次导入相同的模块,不会再次执行模块内的代码。

2. 模块的缓存

为了提高性能,ES6模块系统采用了缓存机制。一旦模块被执行过一次,其结果将被缓存,之后的导入会直接使用缓存的结果,而不再执行模块内的代码。

这意味着模块的状态和数据在多次导入之间是共享的。这对于避免重复执行代码、节省资源是非常有利的。

3. 使用示例

考虑以下场景:

// counterModule.js
let count = 0;export const increment = () => {count++;console.log('Incremented count:', count);
};export const getCount = () => {console.log('Current count:', count);return count;
};
// appCounter.js
import { increment, getCount } from './counterModule';// 第一次导入
increment(); // 输出: Incremented count: 1
getCount(); // 输出: Current count: 1// 第二次导入
increment(); // 输出: Incremented count: 2
getCount(); // 输出: Current count: 2

在这个例子中,counterModule.js模块内的count变量被多次导入的appCounter.js共享。每次调用increment函数都会修改count,而每次调用getCount函数都会输出当前的count值。

总结

ES6 模块系统为 JavaScript 开发者提供了现代化、灵活且高效的模块化工具。通过深入学习其基本概念、默认导出与默认导入、模块的重命名与整体导入、动态导入、循环依赖的处理等方面,我们更深刻地理解了其使用方式和优势。ES6 模块系统不仅提升了代码的可维护性和可读性,同时通过静态分析和优化,也有助于提高性能。

在现代前端开发中,充分利用 ES6 模块系统将为项目带来更好的可维护性和可扩展性。

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

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

相关文章

【算法刷题】Day10

文章目录 15. 三数之和题干:算法原理:1、排序 暴力枚举 利用set 去重2、排序 双指针 代码: 18. 18. 四数之和题干:算法原理:1、排序 暴力枚举 利用set 去重2、排序 双指针 代码: 15. 三数之和 原题链…

springboot数据格式验证——自定义日期格式验证及list验证

我们在工作中经常需要对日期格式进行定义,如果客户端传来的日期字符串不符合要求,那么根本无法保存,但是已有的注解并没有日期格式的验证,那我们就自己实现一个 一、自定义日期格式验证的注解DateFormat import javax.validatio…

2023年阅读类APP如何发展?怎么做好商业化? | TopOn观察

前言 阅读类APP作为泛娱乐应用的重要板块,近年来在全球都发展火热。本文将主要从阅读类应用的市场规模、头部产品及地区特点、商业化模式及提升商业变现几个方面入手,解析2023年阅读类APP的发展趋势,希望为阅读类应用开发者带来参考价值。 一…

28.线段树与树状数组基础

一、线段树 1.区间问题 线段树是一种在算法竞赛中常用来维护区间的数据结构。它思想非常简单,就是借助二叉树的结构进行分治,但它的功能却非常强大,因此在很多类型的题目中都有它的变种,很多题目都需要以线段树为基础进行发展。…

分享一个关于 Go 错误处理的新提案

在比较一段长的时间里,Go 的错误处理已经没有什么特别的进展和新改进了。看着已经到了瓶颈期。 今天在 GitHub 上学习时,看到 Go 社区里有人提了个错误处理的优化提案《proposal: Go 2: Error-Handling Paradigm with !err Grammar Sugar》,…

【PyTorch】(五)模型训练

文章目录 1. 基本步骤 1. 基本步骤 for epoch in range(num_epochs):for _X, _y in dataloader:# 将数据转移到GPU_X, _y _X.to(device), _y.to(device)# 前向传播计算损失loss criterion(model(_X).reshape(_y.shape), _y)# 清空优化器梯度缓存optimizer.zero_grad()# 误差…

SELinux refpolicy详解(7)

接前一篇文章:SELinux refpolicy详解(6) 三、refpolicy内容详解 1. README 文件路径:refpolicy源码根目录/README。 文件内容如下: 1) Reference Policy make targets:General Make targets:install-src Install …

【Skynet 入门实战练习】分布式 ID | 雪花算法 | 缓存设计 | LRU算法 | 数据库

文章目录 前言雪花算法LRU 算法缓存模块数据库测试逻辑 前言 本节实现了 分布式 ID 生成系统,采用雪花算法实现唯一 ID;实现缓存架构,采用 LRU (最近最少使用)算法。 雪花算法 分布式 ID 生成算法的有很多种&#x…

Redis——某马点评day01——短信登录

项目介绍 导入黑马点评项目 项目架构 基于Session实现登录 基本流程 实现发送短信验证码功能 controller层中 /*** 发送手机验证码*/PostMapping("code")public Result sendCode(RequestParam("phone") String phone, HttpSession session) {// 发送短信…

mysql8.0 提取json数据转为行

仅适用于mysql8.0,之前的版本不支持JSON_TABLE函数 数据结构: idnamejsonarr1张三[{"daystr": "2023-12-01","score": "53"},{"daystr": "2023-12-02","score": "78"}]2李四[{&q…

B站缓存视频M4S合并MP4(js + ffmpeg )

文章目录 B站缓存视频转MP4(js ffmpeg )1、说明 2、ffmpeg2.1 下载地址2.2 配置环境变量2.3 测试2.4 转换MP4命令 3、处理程序 B站缓存视频转MP4(js ffmpeg ) 注意:这样的方式只用于个人之间不同设备的离线观看。请…

spring boot mybatis TypeHandler 看源码如何初始化及调用

目录 概述使用TypeHandler使用方式在 select | update | insert 中加入 配置文件中指定 源码分析配置文件指定Mapper 执行query如何转换 结束 概述 阅读此文 可以达到 spring boot mybatis TypeHandler 源码如何初始化及如何调用的。 spring boot 版本为 2.7.17,my…

SQL Server 2016(创建数据表)

1、需求描述。 在名为“class”的数据库中创建表,表名称为“course”,其中要包含序号、课程、课程编号、学分、任课教师、上课地点、开始时间、结束时间、备注等列。 设置各个字段的数据类型。其中,"序号"列为标识列,从…

4-Docker命令之docker kill

1.docker kill介绍 docker kill命令是用来杀掉一个或多个正在运行中的容器。 2.docker kill用法 docker kill [参数] container [container......] [root@centos79 ~]# docker kill --helpUsage: docker kill [OPTIONS] CONTAINER [CONTAINER...]Kill one or more running…

分享几个可以免费使用GPT工具

1. 国产可以使用GPT3.5和4.0的网站,每日有免费的使用额度,响应速度,注册时不用使用手机号,等个人信息,注重用户隐私,好评! 一个好用的ChatGPT系统 ,可以免费使用3.5 和 4.0https://…

3台4核16G机器搭建K8S集群

在三台具有4核16GB内存的机器上安装Kubernetes(K8s)集群涉及到几个关键步骤。我们将一个机器设为主节点(Master)和两个工作节点(Worker)。以下是详细步骤: 1. 系统环境准备(在所有机…

企业如何做好合规管理?

近年来“合规”作为一个热点话题,频繁出现在公众视野,已然成为企业管理发展的大趋势。国家相继出台的各项合规管理标准预示着我国的企业合规管理正逐步从头部央企向民营企业扩展。因此,各大企业将合规管理作为了企业管理的首要任务。 随着中…

Mysql 行转列,把逗号分隔的字段拆分成多行

目录 效果如下源数据变更后的数据 方法第一种示例SQL和业务结合在一起使用 第二种示例SQL和业务结合在一起使用 结论 效果如下 源数据 变更后的数据 方法 第一种 先执行下面的SQL,看不看能不能执行,如果有结果,代表数据库版本是可以的&…

C语言:写一个函数,输入一个十六进制数,输出相应的十进制数

分析: 当用户运行该程序时,程序会提示用户输入一个十六进制数。用户需要在命令行中输入一个有效的十六进制数,例如:"1A3F"。 接下来,程序调用了名为 xbed 的函数,并将用户输入的十六进制数作…

_WorldSpaceLightPos0的含义 UNITY SHADER

_WorldSpaceLightPos0 为当前平行光的方向,方向是从光源到照射的方向。 因此,如果要算发现和平行光之间的夹角, 则需要首先将归一化的_WorldSpaceLightPos0去负数。这样才能继续去计算。 也就是: fixed3 reflectdirnormalize…