ES6模块化与导出(export)导入(import)的用法

简介: 1.ES6模块化的介绍在 ES6 模块化规范诞生之前,JavaScript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。但是,这些由社区提出的模块化标准,还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准,例如:⚫ AMD 和 CMD 适用于浏览器端的 Javascript 模块化⚫ CommonJS 适用于服务器端的 Javascript 模块化太多的模块化规范给开发者增加了学习的难度与开发的成本。因此,大一统的 ES6 模块化规范诞生了!

ES6模块化与导出(export)导入(import)的用法



文章目录

1.ES6模块化的介绍

2.什么是 ES6 模块化规范

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

4. ES6 模块化的导入与导出


1.ES6模块化的介绍


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


但是,这些由社区提出的模块化标准,还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化

标准,例如:


⚫ AMD 和 CMD 适用于浏览器端的 Javascript 模块化

⚫ CommonJS 适用于服务器端的 Javascript 模块化

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


2.什么是 ES6 模块化规范


ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学


习成本,开发者不需再额外学习 AMD、CMD 或 CommonJS 等模块化规范。

ES6 模块化规范中定义:


⚫ 每个 js 文件都是一个独立的模块

⚫ 导入其它模块成员使用 import 关键字

⚫ 向外共享模块成员使用 export 关键字


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


node.js 中默认仅支持 CommonJS 模块化规范,若想基于 node.js 体验与学习 ES6 的模块化语法,可以按照

如下两个步骤进行配置:

① 确保安装了 v14.15.1 或更高版本的 node.js

② 在 package.json 的根节点中添加 “type”: “module” 节点

在项目的终端输入npm init -y 可以快速初始化一个包管理配置文件package.json


7a2c4a81240d40cc8ac74681cc353b36.png


终端输出文件格式:node 文件名

注意:在cmd窗口中输入node -v可以查看node版本


4. ES6 模块化的导入与导出


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

(1)默认导出与默认导入

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


1b361eb3aebe4b4193207edc804c5b27.png


默认导出的注意事项:


每个模块中,只允许使用唯一的一次 export default,否则会报错!

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


import m1 from "./01-默认导出.js";
console.log(m1);
// 打印输出为{ n1: 10, show: [Function: show] }


默认导入的注意事项:


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

(2)按需导出与按需导入

①按需导出:

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


ba8b2901f2ae4ca59d666a14cde7af16.png


②按需导入:

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


74f23932cccd46128b4d096545dd2bc5.png


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

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

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

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

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


(3)直接导入并执行模块中的代码

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

块代码,示例代码如下:


e7d21da6afa940e38ede26bbe65d6c7a.png

目录
相关文章
|
JSON 前端开发 Java
SpringBoot中Date格式化处理
日期格式化处理:从混乱到清晰,轻松转换日期格式
419 1
|
JSON 数据可视化 数据库
vue3+threejs+koa可视化项目——实现登录注册(第三步)
vue3+threejs+koa可视化项目——实现登录注册(第三步)
377 5
|
移动开发 资源调度 Dart
react Native 环境安装配置——图解版一目了然
react Native 环境安装配置——图解版一目了然
react Native 环境安装配置——图解版一目了然
|
存储 C++ 索引
哈希表、集合、映射
哈希表、集合、映射
|
JavaScript 前端开发 索引
TypeScript(四)接口interface使用详解
接口是TypeScript中一个非常重要的概念,在其他很多语言中已经有了并且被大量使用。本来这个章节我打算更新其他的内容,但是发现很多东西都依赖接口,所以我们先来学习一下接口相关的知识吧!
701 0
|
10月前
|
JavaScript
使用Node.js创建一个简单的Web服务器
使用Node.js创建一个简单的Web服务器
|
Java Spring
SpringBoot接收参数的方式
本文介绍了Java Spring Boot中处理GET请求的多种方式。可以使用方法参数直接接收,或者通过`@RequestParam`注解指定必传参数。此外,可以用实体类接收多个相关参数,但不能同时使用`@RequestParam`。还可以通过`HttpServletRequest`对象获取参数,或利用`@PathVariable`接收路径变量。对于数组和集合参数,需注意使用`@RequestParam`注解。
791 1
|
9月前
|
存储 弹性计算 数据管理
阿里云对象存储OSS收费标准:存储、流量和请求等多个计费项详解
阿里云对象存储OSS提供多样化的计费模式,涵盖存储、流量、请求等多项费用。存储费用方面,按量付费标准型为0.09元/GB/月,包年包月则有9元40GB等多种选择。流量费用仅对公网出方向收费,价格区间从0.25至0.50元/GB不等,支持按量付费与流量包抵扣两种方式。更多详情及精准报价,欢迎访问阿里云OSS官方页面。
6407 1
|
10月前
|
网络协议 算法 网络性能优化
计算机网络常见面试题(一):TCP/IP五层模型、TCP三次握手、四次挥手,TCP传输可靠性保障、ARQ协议
计算机网络常见面试题(一):TCP/IP五层模型、应用层常见的协议、TCP与UDP的区别,TCP三次握手、四次挥手,TCP传输可靠性保障、ARQ协议、ARP协议
|
前端开发 JavaScript