模块化开发
1. 模块化开发最终的目的是将程序划分成 一个个小的结构 。
2. 这个结构中编写属于 自己的逻辑代码 ，有 自己的作用域 ，定义变量名词时不会影响到其他的结构。
3. 这个结构可以将自己希望暴露的 变量、函数、对象等导出 给其结构使用， 也可以通过某种方式， 导入 另外结构中的 变量、函数、对象 等。
早期没有模块化
没有模块化带来了很多的问题：比如命名冲突问题，立即函数调用表达式解决这个问题。
const moduleA = (function () {let name = "lisi";let age = 18;return {name,age,};
}());缺点：
1. 每个文件中的代码都需要包裹在一个匿名函数中来编写
2. 可能出现模块名称相同的情况
CommonJS
CommonJS规范的核心变量 ： exports、module.exports、require
1. exports和module.exports 可以负责 对模块中的内容进行导出
2. require函数 可以帮助我们 导入其他模块（自定义模块、系统模块、第三方库模块）中的内容
exports导出
exports是一个对象，我们可以在这个对象中添加很多个属性，添加的属性会导出。
const UTIL_NAME = "lisi";function add(a, b) {return a + b;
}exports.UTIL_NAME = UTIL_NAME;
exports.add = add;引入：
const aaa = require("./aaa.js");
console.log(aaa.UTIL_NAME);
console.log(aaa.add(1, 2));如果在 引入方 修改 aaa 对象的属性，在 导出方 也会修改。
引入方：
const aaa = require("./aaa.js");
console.log(aaa.UTIL_NAME);
aaa.UTIL_NAME = "zhangsan";导出方：
const UTIL_NAME = "lisi";exports.UTIL_NAME = UTIL_NAME;setTimeout(() => {console.log(exports.UTIL_NAME);
}, 2000);
效果：
原理：
共同修改一块内存。
module.exports导出
module才是导出的真正实现者
const name = "lisi";
console.log(exports == module.exports); // truemodule.exports = {name: "zhangsan",
};
exports.name = "wangwu";===============================================const aaa = require("./aaa.js");
console.log(aaa.name); // zhangsanconst name = "lisi";
console.log(exports == module.exports); //trueexports = {name: "zhangsan",
};
module.exports.name = "wangwu";==============================================const aaa = require("./aaa.js");
console.log(aaa.name); // wangwu所以，require 的本质是在找 module.exports 对象。
内存图：
CommonJS规范缺点
CommonJS加载模块是同步的，只有 等到对应的模块加载完毕 ， 当前模块中的内容才能被运行， 如果将它应用于浏览器， 浏览器 加载js文件需要先从服务器将文件下载下来 ，之后 再加载运行， 那么采用 同步的就意味着后续的js代码都无法正常运行 ，即使是 一些简单的DOM操作 。
ES Module
ES Module 和 CommonJS 的差异
1. 使用了 import 和 export 关键字， export 负责将模块内的内容 导出， import 负责从其他模块 导入 内容。
2. 采用 编译期的静态分析 ，并且也 加入了动态引用的方式
使用方式：
1. 常规用法：
const name = "lisi";
const age = 18;function sayHello() {console.log("hello");
}export { name, age, sayHello };导入：
import { name, age, sayHello } from "./aaa";2. 导出时，起别名
const name = "lisi";
const age = 18;function sayHello() {console.log("hello");
}export { name as fname, age, sayHello };导入时，起别名
import { name as fname, age, sayHello } from "./aaa";3. * 导入
import * as foo from "./aaa";
console.log(foo.name);
console.log(foo.age);
foo.sayHello();default用法（默认导出）
默认导出export时可以不需要指定名字，导入时不需要使用 {}，并且可以自己来指定名字，在一个模块中，只能有一个默认导出（default export）
function sayHello() {console.log("hello");
}export default sayHello;============================== 使用import fun from "./aaa";
fun();import函数
动态加载某一个模块，import函数返回一个Promise，可以通过then获取结果
