标准类型:官方标准
支持环境:node,浏览器
依赖类型:静态依赖,动态依赖
如何导出
ES Module 分为两种导出方式:
- 具名导出(普通导出):可以导出多个
- 默认导出:只能导出一个
一个模块可以同时存在两种导出方式,最终会合并为一个对象导出。
一、html中引入
html 文件 script 标签中 type="module" 是指将引入的 js 文件当成一个模块进行引入。
<script src="./index.js" type="module"></script>
二、导出方式
具名导出与默认导出 ESModule.js :
export const a = 1 // 具名导出,常用
export function isOdd(a){
return a % 2 !== 0
} // 具名导出,常用
export function sum(a,b){
return a + b
} // 具名导出,常用
const b = 2
export { b } // 具名,名称与值都为b
const k = 10
export { k as temp } // 具名,名称为temp,值为k
// export default 3 // 默认导出,常用
// export default function c(){} // 默认导出,常用
// const d = 4
// export {d as default} // 默认
const e = 1,f = 2,g = 3
export {e,f,g as default} // 基本 + 默认
// 导出对象结果
/**
* {
* a:1,
* isOdd:fn,
* sum:fn,
* b:2,
* temp:10,
* e:1,
* f:2,
* default:3
* }
*/
三、导入方式
1. 静态导入 :
静态依赖:代码运行前就要分析出依赖关系。
// 仅运行一次该模块,不导入任何内容
import "模块路径"
// 常用,导入属性 a、b,放到变量a、b中。a->a,b->b
import { a,b } from "模块路径"
// 常用,导入属性default,放入变量c中。default->c
import c from "模块路径"
// 常用,default->c,a->a,b->b,default需要写在前面
import c,{a,b} from "模块路径"
// 常用,将模块对象放入到变量obj中
import * as obj from "模块路径"
// 导入属性a、b,放到变量temp1、temp2 中
import {a as temp1,b as temp2} from "模块路径"
// 导入属性default,放入变量a中,default是关键字,不能作为变量名,必须定义别名
import {default as a} from "模块路径"
//导入属性default、b,放入变量a、b中
import {default as a,b} from "模块路径"
注意:
静态导入的代码必须为在代码顶端,也不可放入代码块中。
另外,静态导入的代码绑定的符号是常量,不可更改。
例1: index.js
import {isOdd,sum as add} from "./ESModule.js"
const result = add(1,2)
console.log(result) // 3
例2: ESModule.js
export default {
sum(a,b){
return a+b
},
isOdd(a){
return a % 2 !== 0
}
}
index.js
import math from "./ESModule.js"
const result2 = math.isOdd(4)
console.log(result2) // false
2. 动态导入 :
动态依赖:代码运行过程中调用才会导入,分析依赖关系。
import("模块路径") // 动态导入,返回一个Promise,完成时的数据为模块对象
例: index.js
// 动态导入1
setTimeout(()=> {
// 返回一个promise
import("./ESModule.js").then((math)=> {
const result2 = math.isOdd(4)
console.log(result2) // false
})
},1000)
// 动态导入2
setTimeout(async()=>{
const math = await import("./ESModule.js")
const result1 = math.sum(1,2)
console.log(result1) // 3
},2000)