CommonJS
标准类型：社区规范
支持环境：node
依赖类型：动态依赖
如何导出
module.exports = 导出的值
js中引入模块,里面 type = "module" 表示导入的是模块。
<body>
<script src="./index.js" type="module"></script>
</body>
如何导入
require("模块路径") // 函数返回模块导出的值
此JS后缀名可以省略。
ES Module
标准类型：官方标准
支持环境：node，浏览器
依赖类型：静态依赖，动态依赖
如何导出
ES Module的导出
ES Module分为两种导出方式：
- 具名导出（普通导出），可以导出多个
- 默认导出，只能导出一个
一个模块可以同时存在两种导出方式，最终会合并为一个「对象」导出
export const a = 1; // 具名，常用
export function b() {} // 具名，常用
export const c = () => {} // 具名，常用
const d = 2;
这里注意不能直接写 export d; 因为如果这样写相当于 export 2;这样导出就没有名字了，这里可以使用下面的语法，export { d } ，这句话的 {}并不是对象，代表导出的是变量是d，然后导出变量的值是 d的值，这里就是2.
export { d } // 具名
const k = 10
export { k as temp } // 具名
上面这句的{}也不是对象的意思，这里都是新的语法，代表的是导出变量的名字是temp，而导出的值是就是k的值 10。
下面是默认导出，默认导出的是 export 后面紧跟着的是defalut,这个默认导出是不需要名字的。
// export default 3 // 默认，常用
// export default function() {} // 默认，常用
// const e = 4;
// export { e as default } // 默认
const f = 4, g = 5, h = 6
export { f, g, h as default} // 基本 + 默认
上面导出的结果是 {
f:4,
g:5,
default:6,
}
// 以上代码将导出下面的对象
/*
{
a: 1,
b: fn,
c: fn,
d: 2,
temp: 10,
f: 4,
g: 5,
default: 6
}
*/
注意：导出代码必须为顶级代码，即不可放到代码块中
如何导入
针对具名导出和默认导出，有不同的导入语法
静态导入
import ‘文件路径’。 其中文件后缀名不可以省略。
// 仅运行一次该模块，不导入任何内容
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
import c, { a, b } from "模块路径"
// 常用，将模块对象放入到变量obj中，整个模块对象是包括default，包括声明的导出时候的所有具名导出。
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 "模块路径"
// 以上均为静态导入
动态导入
import("模块路径") // 动态导入，返回一个Promise，完成时的数据为模块对象
何为静态依赖，何为动态依赖，静态依赖必须在代码运行前分析所有的所有的依赖，所以必须写在代码的顶端，不能写在if，else代码的执行语句中，而动态依赖是在代码执行过程中判断的，可以写在代码的执行过程中，可以在代码执行过程中去判断。上面的情况就分动态依赖和静态依赖。
注意：静态导入的代码必须为在代码顶端，也不可放入代码块中
另外，静态导入的代码绑定的符号是常量，不可更改
ES Module 的标准不能省略文件 .js等后缀名，也不能省略 ./ 等。
当时当导入的某个文件夹下的index.js 可以省略 index.js，举例子如下;
import { createMovieTags } from './list';
练习
静态导入
导入
import {sum} from './math.js'
const result = sum(1,2);
console.log(result);
导出
export function sum(a,b){
return a + b;
}
export const isOdd = (n) => n %2 !== 0;
导入
import math from './math.js'
const result = math.sum(1,2);
console.log(result);
console.log(math.isOdd(3));
导出
function sum(a,b){
return a + b;
}
const isOdd = (n) => n %2 !== 0;
export default {
sum,
isOdd,
};
动态导入
导入 动态导入，返回一个Promise，完成时的数据为模块对象
setTimeout(() => {
import('./math.js').then((m)=>{
const math = m.default;
const result = math.sum(2,3);
console.log(result);
})
}, 2000);
setTimeout(async() => {
const m = await import('./math.js');
const math = m.default;
const result = math.sum(2,3);
console.log(result);
}, 2000);
导出
function sum(a,b){
return a + b;
}
const isOdd = (n) => n %2 !== 0;
export default {
sum,
isOdd,
};
