ES6 模块化介绍

ES6 模块化是指在 ES2015 (ES6) 中，引入了模块化相关的支持

我们主要介绍导入和导出的方法

模块导出

导出分为默认导出和正常导出，普通的导出直接在变量面前加export关键字或export {}即可，如

export let name = "Li MeiMei";
export { say, eat };

也可以进行默认导出，默认导出与普通导出不冲突，二者的区别在于引用时的方式不同，我个人倾向于这种引用方式的不懂表达了其模块本身的语义，default提供了一个模块最常用的功能，而普通导出则提供了其次需要暴露的功能。

export default {
  name: "person export",
};

模块导入

普通导出的函数如果进行导入一般有三种方法，我们直接一口气列出来了

//普通导入
import { name } from "./person.js";
//普通导入后改名
import { name as liName } from "./person.js";
//将所有普通导出的内容都设置到person对象上
import * as person from "./person.js";

console.log(name); //"Li MeiMei"
console.log(liName); //"Li MeiMei"
console.log(person.name); //"Li MeiMei"

而默认导出只需要不写括号即可导入

import deafultExport from "./person.js";
//默认导出也可以更名，只需要`deafultExport as newName`
//其中newName替换成别名即可实现在该模块更名

console.log(deafultExport); //"person export"

同时也可以把默认导出和普通导出合并到一条语句中，例如

import deafultExport, { name } from "./person.js";

等价前面我们说的

动态导入

在import时必须处于顶级作用域，也就是不能有任何函数包裹，那如果我们真的需要动态加载某些模块该怎么办？我们可以直接使用import函数

import函数会返回一个Promise，其 then 返回了模块的导出内容，内容默认是普通导出的属性，如果想要获取默认导出只需要读取default属性即可，例如

setTimeout(() => {
  import("./person.js").then((module) => {
    const defaultExport = module.default;
    const name = module.name;
    console.log(name, defaultExport);
  });
}, 3000);