一、认识模块化
1、下图中的代码写法，有独立的作用空间吗？
image.png
- 没有独立作用空间，容易出现命名冲突
2、什么是模块化？【细细品读每句话】
- 事实上模块化开发最终的目的是将程序划分成
一个个小的结构； - 这个结构中编写属于自己的逻辑代码，有
自己的作用域，不会影响到其他的结构； - 这个结构可以将自己希望暴露的
变量、函数、对象等导出给其他结构使用； - 也可以通过某种方式，导入另外结构中的
遍历、函数、对象等；
image.png
3、早期JavaScript支持模块开发吗？
- 【不支持】在es6（2015年）之前，都没有JS都没有官方的模块化开发方式。
- 在此之前，为了让JavaScript支持模块化，涌现出了很多不同的模块化规范:AMD、CMD、CommonJS等;
4、JavaScript模块化发展历史【了解一下，对于理解很多知识有帮助】？
image.png
5、通过立即执行函数也可以实现简单的模块化，代码如下，这种方式会有哪些问题？
var whyModel = (function () {
//...一堆逻辑代码
var whyName = "whyName";
var age = 18;
return {
whyName,
age,
};
})();
- ①whyModel还是会冲突的
- ②whyModel这个名字可不好记
- ③没有规范，会知道命名千差万别
二、认识 CommonJS
1、CommonJS规范 和 Node 是什么关系？
- 【CommonJS】是一种规范，不是具体实现。就像 Promise a+ 规范一样
- 【Node】实现了CommonJS这种规范
2、CommonJS的三个核心关键字是什么？
- 【module.exports】、【exports】、【require】
3、CommonJS的基本用法？
// index.js
const why = require("./why/why");
console.log(why);
// why.js
var name = "whyName";
var age = 18;
module.exports = {
name,
age,
};
// 输出结果
$ node index.js
{ name: 'whyName', age: 18 }
- 需要在node环境中运行，浏览器环境默认不支持CommonJS
4、理解CommonJS的内部原理图解【重要，其实也是内存布局图】
image.png
- info、module.exports、why 指向内存中的同一个对象
- 理解这个，可以帮忙理解很多东西
5、测试代码，看why开头的日志，会输出几次？
// why.js
console.log("why1111");
var name = "whyName";
var age = 18;
console.log("why2222");
module.exports = {
name,
age,
};
console.log("why3333");
// index.js
console.log("index1111");
const why = require("./why/why");
const why2 = require("./why/why");
console.log("index2222");
console.log(why);
console.log(why2);
console.log("index3333");
- 只会输出一次
6、module.exports 和 exports 有什么关系？
- module.exports 是真正决定导出对象的【重要角色】
- exports 仅仅是 module.exports 的【一个引用】
image.png
7、CommonJS的源码阅读方向【后续再说吧】
image.png
三、认识 require
1、require的本质是什么？有什么作用？
- 【本质】require本质是一个函数
- 【作用】可以帮助我们引入一个文件（模块）中导出的对象
2、require 的查找过程【了解，需要深入研究再回来看】？
image.png
image.png
image.png
3、CommonJS的模块被多次引入，模块代码会执行多次吗？模块的加载顺序是BFS还是DFS？
- 【加载次数】每个模块只会加载运行一次；因为每个模块对象module内部都有一个loaded属性，用来保证仅仅加载一次。
- 【加载顺序】按照深度优先搜索（DFS，depth first search）加载顺序
image.png
4、CommonJS规范的缺点（对比ES Module）？
- ① 属于非官方的方案
- ② 比较适用于node，因为CommonJS加载模块是同步的
image.png
