ES Module - LuckyStar

1. 如何导出

ES Module 的导出

ES Module 分为两种导出方式：

具名导出（普通导出），可以导出多个
默认导出，只能导出一个

一个模块可以同时存在两种导出方式，最终会合并为一个「对象」导出

export const a = 1;     //具名，常用
export function b() {}; //具名，常用
export function c(){}   //具名，常用

const d = 2;
export { d }            //具名

const k = 10
export { k as temp } // 具名

// 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} // 基本 + 默认

// 以上代码将导出下面的对象
/*
{
    a: 1,
    b: fn,
    c: fn,
    d: 2,
    temp: 10,
    f: 4,
    g: 5,
    default: 6
}
*/

注意： 导出代码必须为顶级代码，即不可放到代码块中

2. 如何导入

针对具名导出和默认导出，有不同的导入语法

// 仅运行一次该模块，不导入任何内容
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中
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，完成时的数据为模块对象

注意1： 静态导入的代码必须为在代码顶端，也不可放入代码块中

注意2： 静态导入的代码绑定的符号是常量，不可更改

注意3： 导入路径不可省略文件后缀

3. 示例代码

3-1. 主文件【index.html】

当 script 标签中存在属性 type="module",这个js就会以模块方式运行;
以模块方式运行就不会存在变量污染,即 index.js 中的全局变量不会污染其他文件也不会出现在 window 上;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./js/index.js" type="module"></script>
</body>
</html>

3-2. 功能模块【math.js】

// 具名导出
export function sum(a, b) {
  return a + b;
};
export const isOdd = (n) => n % 2 !== 0;

// 默认导出
export default {
  sum_d(a,b){
    return a + b;
  },
  isOdd_d(n){
    return n % 2 !== 0;
  }
};

// 导出对象对象如下：
// {
//   sum: fn,
//   isOdd: fn,
//   default: {
//     sum_d: fn,
//     isOdd_d:fn
//   }
// }

3-3. 入口文件【index.js】【静态导入】

导入方式随意使用; 详情
静态导入的代码绑定的符号是常量，不可更改

//具名导入
import { sum,m } from "./math.js"
//默认导入
import math from "./math.js"

3-4. 入口文件【index.js】【动态导入】

setTimeout(()=>{
    import("./math.js").then(m => {
        const result = m.default.sum_d(2,3)
        console.log(result);
    });
},1000)

setTimeout(async ()=>{
    const m = await import("./math.js");
    const math = m.default;
    const result = math.sum_d(2,3)
    console.log(result);
},2000)

// 这里返回的数据为模块对象；
// {
//   sum: fn,
//   isOdd: fn,
//   default: {
//     sum_d: fn,
//     isOdd_d:fn
//   }
// }