JavaScript 模块化

什么是模块化开发

• 模块化开发的最终目的即是将程序划分为一个个更小的结构。
• 结构中可以编写属于自己的逻辑代码，有自己的作用域，不会影响到其他结构。
• 结构亦可以将自己希望暴露的变量、函数、对象等导出给其他结构使用。
• 结构亦可以通过某种方式，导入另外结构中的变量、函数、对象等。

结构即模块，按照结构划分进行程序开发的过程，就是模块化开发的过程。

CommonJS 和 Node

CommonJS 是一种代码规范，最初应用于浏览器之外的场景，并且当时命名为ServerJS，后改名为CommonJS，也会简称其为CJS。

• Node 是 CommonJS 在服务器端的一个具有代表性的实现。
• Browserify 是 CommonJS 在浏览器中的一种实现。
• webpack 打包工具具备对 CommonJS 的支持和转换。

Node 中对 CommonJS 进行了支持和实现。

• 在 Node 中每一个 js 文件都是一个单独的模块。
• 模块中包括 CommonJS 规范的核心变量：exports、module.exports、require。
• 使用上述变量可以方便的进行模块化开发。

模块化的核心功能即是隔离、导出和导入，Node 对其进行了实现。

• exports 和 moudle.exports 负责对模块中的内容进行导出。
• require 负责导入其他模块（自定义模块、系统模块、第三方库模块）中的内容。

对象的引用赋值

观察 step01 - step04 代码变化

// step01
let obj = {
    name: "huaqi";
    age: 18;
};
console.log(obj.name); // huaqi
// step02
let info = obj;
console.log(info.name); // huaqi
// step03
obj.name = "花七";
console.log(obj.name); // 花七
console.log(info.name); // 花七
// step04
info.name = "florescence";
console.log(info.name); // florescence
console.log(obj.name); // florescence

以上结果原因图解：

CommonJS exports 与 require 过程

Node 中实现 CommonJS 的 exports 和 require 的本质即是引用赋值。

此时 bar 对象是 exports 对象的引用赋值。
引用赋值亦可称之为浅拷贝。

module.exports

• CommonJS 中并没有 module.exports 概念
• Node 使用 Module 类实现模块化，每个模块都是 Module 类的一个实例，即 module。
• 即 Node 真正实现导出功能的是 module.exports

而 exports 对象可以实现导出的原因是 Node 源码中含有以下操作：

// step01 声明 Module 类
function Module(id = '', parent) {
  this.id = id;
  this.path = path.dirname(id);
  this.exports = {};  // 可见，Module.exports 在实例化时就已经指向了一个空对象
  moduleParentCache.set(this, parent);
  updateChildren(parent, this, false);
  this.filename = null;
  this.loaded = false;
  this.children = [];
}

// step02 
// Create module entry at load time to snapshot exports correctly
const exports = this.exports; // 将 Module.exports 指向空对象的地址赋值给 exports


// 综上，Module 在被创建时，Module.exports 与 exports 指向同一空对象

即 module.exports 为 exports 对象的引用。而 require 实际上是 module.exports 的引用。
图例：

注：exports 对象存在的意义：CommonJS 规范中要求使用 exports 关键字进行导出。

module.exports 对 exports 对象的引用在模块所有代码之前执行

代码验证：

exports.name = "huaqi";
exports.age = 18;
exports = 3;
console.log(module);
console.log(exports);

过程图解：