ES6模块化学习

1. 回顾:node.js 中如何实现模块化

node.js 遵循了CommonJS 的模块化规范。其中:

导入其它模块使用 require() 方法

模块对外共享成员使用 module.exports 对象

模块化的好处: 大家都遵守同样的模块化规范写代码,降低了沟通的成本,极大方便了各个模块之间的相互调用,利人利己。

2. 前端模块化规范的分类

在 ES6 模块化规范诞生之前,JavaScript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。

但是,这些由社区提出的模块化标准,还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准,例如:
AMD 和 CMD 适用于浏览器端的 Javascript 模块化
CommonJS 适用于服务器端的 Javascript 模块化

太多的模块化规范给开发者增加了学习的难度与开发的成本。因此,大一统的 ES6 模块化规范诞生了!

3. 什么是 ES6 模块化规范

**ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范。**它的出现极大的降低了前端开发者的模块化学习成本,开发者不需再额外学习 AMD、CMD 或 CommonJS 等模块化规范。

ES6 模块化规范中定义:
每个 js 文件都是一个独立的模块
导入其它模块成员使用 import 关键字
向外共享模块成员使用 export 关键字

4. 在 node.js 中体验 ES6 模块化

node.js 中默认仅支持 CommonJS 模块化规范,若想基于 node.js 体验与学习 ES6 的模块化语法,可以按照如下两个步骤进行配置:
①确保安装了 v14.15.1 或更高版本的 node.js (node -v 查看node版本)
②在 package.json 的根节点中添加 "type": "module" 节点(npm init -y 初始化包管理配置文件,注意:初始化包管理配置文件的时候,文件名不能是中文)

5. ES6 模块化的基本语法

ES6 的模块化主要包含如下 3 种用法:

①默认导出与默认导入

②按需导出与按需导入

③直接导入并执行模块中的代码

5.1 默认导出与默认导入

①默认导出

默认导出的语法: export default 默认导出的成员

默认导出的注意事项 :每个模块中,只允许使用唯一的一次 export default,否则会报错!

②默认导入

默认导入的语法:import 接收名称 from '模块标识符'

默认导入的注意事项:默认导入时的接收名称可以任意名称,只要是合法的成员名称即可:

③按需导出

按需导出的语法: export 按需导出的成员

④按需导入

按需导入的语法: import { s1 } from '模块标识符'


按需导出与按需导入的注意事项:

每个模块中可以使用多次按需导出

按需导入的成员名称必须和按需导出的名称保持一致

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

按需导入可以和默认导入一起使用

⑤直接导入并执行模块中的代码

如果只想单纯地执行某个模块中的代码,并不需要得到模块中向外共享的成员。此时,可以直接导入并执行模块代码,示例代码如下:

相关推荐
@大迁世界2 分钟前
TypeScript 的本质并非类型,而是信任
开发语言·前端·javascript·typescript·ecmascript
GIS之路11 分钟前
GDAL 实现矢量裁剪
前端·python·信息可视化
是一个Bug15 分钟前
后端开发者视角的前端开发面试题清单(50道)
前端
Amumu1213816 分钟前
React面向组件编程
开发语言·前端·javascript
学历真的很重要17 分钟前
LangChain V1.0 Context Engineering(上下文工程)详细指南
人工智能·后端·学习·语言模型·面试·职场和发展·langchain
持续升级打怪中38 分钟前
Vue3 中虚拟滚动与分页加载的实现原理与实践
前端·性能优化
GIS之路42 分钟前
GDAL 实现矢量合并
前端
hxjhnct44 分钟前
React useContext的缺陷
前端·react.js·前端框架
前端 贾公子1 小时前
从入门到实践:前端 Monorepo 工程化实战(4)
前端
菩提小狗1 小时前
Sqlmap双击运行脚本,双击直接打开。
前端·笔记·安全·web安全