JavaScript 模块化

本文主要是介绍JavaScript 模块化，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

• • 什么是模块化开发
  • CommonJS 和 Node
  • 对象的引用赋值
  • CommonJS exports 与 require 过程
  • module.exports
  • module.exports 对 exports 对象的引用在模块所有代码之前执行

什么是模块化开发

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

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

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 源码中含有以下操作：

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);

过程图解：

这篇关于JavaScript 模块化的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！