深入JavaScript Day25 - 模块化、CommonJ

一、认识模块化

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