1.介绍
说明:ES6之前主要有CommonJS和AMD两种,前者用于服务器,后者用于浏览器。 ES6在语言标准的层面上,实现了模块功能,取代了CommonJS和AMD,成功服务器和浏览器通用的模块解决方案。 ES6设计思想就是尽可能的静态化,使得编译确定模块的依赖关系,CommonJS 和 AMD 模块,都只能在运行时确定这些东西。CommonJS 模块就是对象,输入时必须查找对象属性。
2.CommonJS模块
let {name,study,love}=require("student")
说明:其实上面的用解构的方法,将name,study,love变量从student中提取出来。ES6模块不是对象,而是通过export命令显示指定输出的代码,再通过import命令输入。ES6可以在编译时就完成模块加载,效率很高,导致了ES6模块本身不能引用,因为它不是对象。
3.严格模式
- ES6语法中模块自动开启严格模式
- 函数的参数不能有同名属性,否则报错
- 不能对只读属性赋值,否则报错
- 变量必须声明后再使用
- 禁止this指向全局对象
注意:ES6 模块之中,顶层的this指向undefined,即不应该在顶层代码使用this。
4.export命令
说明:说明:export命令用于规定模块的对外接口。 一个模块就是一个独立的文件,文件的内部的所有变量,外部无法获取,必须通过export暴露。
good.js
const name="李四"
const age=18
const love="每天学习前端"
export {name,age,love as love1}
export default function(){
console.log("默认暴露");
}
引入的文件
import { name, age, love } from "./goodDay.js"
console.log(name, age, love); //李四 18 每天学习前端
注意:ES6暴露的基本变量类型也是对象,export命令除了输出变量,还可以输出函数或类,export输出的变量就是本来的名字,但是可以使用as关键字重命名。
5.import
说明:使用export命令定义了模块的对外接口后,其他JS文件就可以通过import命令加载这个模块。
const name1="李四"
const age1=18
export {name1,age1}
// 上面的代码放在另一个文件
import { name1, age1 } from "./路径" //路径写全,不能省略./
//as关键字可以将输入的变量重命名
// import { myName as name1 } from "./路径"
注意: import变量输入的变量都只是可读,是不可以在加载模块中修改的,如果import输入的对象,那么可以修改对象的属性,一般不修改,容易混淆。import命令具有提升效果,会提升到整个模块的头部,首先执行。import是静态执行,所有不能使用表达式和变量进而赋值等操作。import语句是 Singleton 模式。(它确保一个类只能有一个实例,并提供一个全局访问点。称为单例)。
6.模块的整体加载
说明:指定加载某个输出值,还可以使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面。
school.js
export function student() {
}
export function age() {
}
加载这个模块
import * as school from "路径"
注意:意思是引入所有的通过school变量保存。
7.export.default
说明:import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。为了不用阅读文档就能加载模块,就要用export default命令,为模块指定默认输出。
shcool.js
export default function () {
}
说明:上面代码是一个模块文件export-default.js,它的默认输出是一个函数。
import sch from "路径"
sch()
function foo() {
console.log('foo');
}
export default foo;
注意: import命令可以为该匿名函数指定任意名字。 export default命令用在非匿名函数前,也是可以的。foo函数的函数名foo,在模块外部是无效的。加载的时候,视同匿名函数加载。
import yx, { name, age, love } from "./goodDay.js"
// 执行默认暴露函数
yx()
// 正常暴露
console.log(name); //李四
8.export与import的复合写法
说明:在一个模块之中,先输入后输出同一个模块,import语句可以与export写在一起。
import {name1,age1} from "路径"
export {name1}
9.模块可以继承
10. 适合场合
- 按需加载
- 条件加载
- 满足条件语句后自动加载
11.import.meta
说明:只能在模块内部使用,这个属性返回一个对象有两个属性。
11.1import.meta.url
说明:import.meta.url返回当前模块的 URL 路径
11.2import.meta.scriptElement
说明:import.meta.scriptElement,import.meta.scriptElement是浏览器特有的元属性。