ES6 模块
模块特点
- ES6 的模块自动开启严格模式,不管你有没有在模块头部加上 use strict;
- 模块中可以导入和导出各种类型的变量,如函数,对象,字符串,数字,布尔值,类等。
- 每个模块都有自己的上下文,每一个模块内声明的变量都是局部变量,不会污染全局作用域。
- 每一个模块只加载一次(是单例的), 若再去加载同目录下同文件,直接从内存中读取
export 与 import
注意项:
- 导出的函数声明与类声明必须要有名称(export default 命令另外考虑)
- 不仅能导出声明还能导出引用(例如函数)。
- export 命令可以出现在模块的任何位置,但必需处于模块顶层。
- import 命令会提升到整个模块的头部,首先执行
export
导入的值需要是变量(不能使用运算符)
//语法
export {变量1,变量2,变量3...};
//必须用{}接收
export default
注意项:
- 在一个文件或模块中,export、import 可以有多个,export default 仅有一个。
- export default 中的 default 是对应的导出接口变量。
- 通过 export 方式导出,在导入时要加{ },export default 则不需要。
- export default 向外暴露的成员,可以使用任意变量来接收
//语法
export default 变量;
//只能添加一个变量,可以使用运算符,但不能使用声明
import
注意项:
- import只读属性:不允许在加载模块的脚本里面,改写接口的引用指向,即可以改写 import 变量类型为对象的属性值不能改写 import 变量类型为基本类型的值
- import单例模式:多次重复执行同一句 import 语句,那么只会执行一次,而不会执行多次。import 同一模块 声明不同接口引用,会声明对应变量,但只执行一次 import
- 静态执行特性:import 是静态执行,所以不能使用表达式和变量
- 导入的变量名,须和导出的接口名称相同,即顺序可以不一致
//语法1
import {变量1,变量2,变量3...} from "./文件路径";
//语法2
import 变量 from "./文件路径";
//只能用于接收export default,接收的变量名可以任意取,仅有一个变量接收
as
不同模块导出接口名称命名重复, 使用 as 重新定义变量名
//导入
import {变量1 as 新变量名,变量2 as 新变量名} from "./文件路径";
import {* as 新变量集合} from "./文件路径";
//导出
export {变量1 as 新变量名,变量2 as 新变量名};