什么是模块？
把逻辑分块，各自封装，互相独立，每个块自行决定对外暴露什么，同时自行决定引入执行那些外部代码。
即：自治
分点阐述：
- 模块化开发的目的就是将代码分割为多个小单元-逻辑分块
- 每个单元编写自己的逻辑代码，有自己的作用域，不会影响其他的代码-互相独立
- 每个单元可以导入或暴露变量、函数、对象等，用于调用其他模块/供其他模块调用-有计划的交互
按照模块划分开发程序的过程，就是模块化开发的过程。
认识模块应知：
- 每个模块都有自己的模块标识符，模块标识符不会冲突。
- 任何模块都应该能无歧义的引用其他模块。
模块化出现原因：---代码越来越复杂---
为什么使用模块？
-
解决了命名冲突
-
提供复用性
-
提高代码可维护性
没有模块的原始程序员是怎么解决命名冲突的？
- 答：使用立即调用函数表达式的方式创建一个函数作用域，就可以避免污染全局环境。
CommonJS规范---在浏览器以外的地方使用
是一个将浏览器排除在外的模块化方案：CommonJS行于node之间
使用
模块导出：
方法1：
module.exports = {}
方法2：
export.name = "name"//实际效果就是往 `module.exports = {}` 这个对象中添加属性
模块引入：
require('模块位置')
注意:
模块在被第一次引入时，模块中的 js 代码会被执行一次。
模块在被多次加载后，内部代码也会只运行一次（第一次）：
- 模块对象有一个
loaded属性，加载了 loaded 就变为了 true。循环引用的加载顺序：循环引用生成了引用图---遍历图使用深度优先搜索。
为什么CommonJS不在浏览器使用？
CommonJS 模块的加载是同步的，浏览器加载 js 文件需要先从服务端下载下来，之后再加载运行；要等模块中加载完毕后，后面的逻辑才会执行，要等到天荒地老。
这个在服务器不会有什么问题，因为服务器加载的是本地 JS 文件，速度会很快。
CommonJS还有个致命问题：无法处理非JavaScript资源（比如CSS，图片等）。
AMD 规范---应用于浏览器---老玩意
-
异步加载模块：即：可按需加载，可并行加载。
-
可以处理JavaScript以外的资源。
CMD 规范---应用于浏览器---老玩意
-
异步加载模块：即：可按需加载，可并行加载。
-
可以处理JavaScript以外的资源。
ES6模块-EMS-俺寻思俺是最新的
如果在 html 中引入模块，需要加上 type="module"
<script src="./index.js" type="module"></script>
模块导出/模块暴露
分别暴露
//常规导出
export const name = "123"
export function foo() {}
export class Person {}
// 使用怪异的方法导出，这里并不是一个方法，可以给导出的成员起别名
export {
name as fName,
foo as fFoo
}
//从另一个模块中导出
export { add } from './foo'
export * from './bar'
统一暴露/默认暴露
// 如果想要让 foo 作为默认导出
const foo = "foo value"
// 可以这样
export {
// 起别名就叫做 default
foo as default
}
// 也可以这样-推荐
export default foo
模块导入
//常规导入
import { name, age } from './foo'
// 导入-设置别名
import { fName as name, fAge as age } from './foo'
//直接拿到所有的导出内容，放入到一个标识符中
//如果模块都使用分别暴露的方式，然后又想统一接收，就使用这个方法吧---如：vue3~~~
import * as foo from './foo'
// 如果是默认暴露---就这样拿吧
import foo from './foo'
异步导入-import()
可使用import()实现模块和路由的按需加载
