45.CommonJS详解

什么是模块化？

到底什么是模块化、模块化开发呢？

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

上面说提到的结构，就是模块；按照这种结构划分开发程序的过程，就是模块化开发的过程；
无论你多么喜欢JavaScript，以及它现在发展的有多好，它都有很多的缺陷：

比如var定义的变量作用域问题；
比如JavaScript的面向对象并不能像常规面向对象语言一样使用class；
比如JavaScript没有模块化的问题；

Brendan Eich本人也多次承认过JavaScript设计之初的缺陷，但是随着JavaScript的发展以及标准化，存在的缺陷问题基
本都得到了完善。
无论是web、移动端、小程序端、服务器端、桌面应用都被广泛的使用；

模块化的历史

在网页开发的早期，Brendan Eich开发JavaScript仅仅作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的：

这个时候我们只需要讲JavaScript代码写到<script>标签中即可；
并没有必要放到多个文件中来编写；甚至流行：通常来说 JavaScript 程序的长度只有一行。

但是随着前端和JavaScript的快速发展，JavaScript代码变得越来越复杂了：

ajax的出现，前后端开发分离，意味着后端返回数据后，我们需要通过JavaScript进行前端页面的渲染；
SPA的出现，前端页面变得更加复杂：包括前端路由、状态管理等等一系列复杂的需求需要通过JavaScript来实现；
包括Node的实现，JavaScript编写复杂的后端程序，没有模块化是致命的硬伤；

所以，模块化已经是JavaScript一个非常迫切的需求：

但是JavaScript本身，直到ES6（2015）才推出了自己的模块化方案；
在此之前，为了让JavaScript支持模块化，涌现出了很多不同的模块化规范：AMD、CMD、CommonJS等；

没有模块化带来的问题

早期没有模块化带来了很多的问题：比如命名冲突的问题
当然，我们有办法可以解决上面的问题：立即函数调用表达式（IIFE）

IIFE (Immediately Invoked Function Expression)

image.png

./why/index.js

var moduleA = (function () {
  var name = "why";
  var isFlag = true;
  return {
    name,
    isFlag,
  };
})();

./coby/index.js

var moduleB = (function () {
  var name = "coby";
  var age = 40;
  var isFlag = false;
  return {
    name,
    age,
    isFlag,
  };
})();

./index.js

if (moduleA.isFlag) {
  console.log("name is", moduleA.name);
}

if (moduleB.isFlag) {
  console.log("name is", moduleB.name);
}

./index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./why/index.js"></script>
    <script src="./coby/index.js"></script>
    <script src="./index.js"></script>
  </body>
</html>

但是，我们其实带来了新的问题：

第一，我必须记得每一个模块中返回对象的命名，才能在其他模块使用过程中正确的使用；
第二，代码写起来混乱不堪，每个文件中的代码都需要包裹在一个匿名函数中来编写；
第三，在没有合适的规范情况下，每个人、每个公司都可能会任意命名、甚至出现模块名称相同的情况；

所以，我们会发现，虽然实现了模块化，但是我们的实现过于简单，并且是没有规范的。

我们需要制定一定的规范来约束每个人都按照这个规范去编写模块化的代码；
这个规范中应该包括核心功能：模块本身可以导出暴露的属性，模块又可以导入自己需要的属性；
JavaScript社区为了解决上面的问题，涌现出一系列好用的规范，接下来我们就学习具有代表性的一些规范。

CommonJS规范和Node关系

我们需要知道CommonJS是一个规范，最初提出来是在浏览器以外的地方使用，并且当时被命名为ServerJS，后来为了体现它的广泛性，修改为CommonJS，平时我们也会简称为CJS。

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

所以，Node中对CommonJS进行了支持和实现，让我们在开发node的过程中可以方便的进行模块化开发：

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

前面我们提到过模块化的核心是导出和导入，Node中对其进行了实现：

exports和module.exports可以负责对模块中的内容进行导出；
require函数可以帮助我们导入其他模块（自定义模块、系统模块、第三方库模块）中的内容

CommonJS的基本使用

./foo.js

const name = "why";
const age = 18;
const height = 1.88;

//导出方式一：
module.exports = {
  name,
  age,
  height,
};

//导出方式二：
// exports.name = name;
// exports.age = age;
// exports.height = height;

./index.js

const { name, age, height } = require("./foo.js");
console.log(name, age, height); //why 18 1.88

exports导出

注意：exports是一个对象，我们可以在这个对象中添加很多个属性，添加的属性会导出；

exports.name = "why";
exports.age = 18;
exports.height = 1.88;

另外一个文件main.js中可以导入：

const bar = require("./bar");

上面这行完成了什么操作呢？理解下面这句话，Node中的模块化一目了然

意味着main中的bar变量等于exports对象；
也就是require通过各种查找方式，最终找到了exports这个对象；
并且将这个exports对象赋值给了bar变量；
bar变量就是exports对象了；

module.exports

但是Node中我们经常导出东西的时候，又是通过module.exports导出的：

module.exports和exports有什么关系或者区别呢？
我们追根溯源，通过维基百科中对CommonJS规范的解析：
CommonJS中是没有module.exports的概念的；
但是为了实现模块的导出，Node中使用的是Module的类，每一个模块都是Module的一个实例，也就是
module；
所以在Node中真正用于导出的其实根本不是exports，而是module.exports；
因为module才是导出的真正实现者；

但是，为什么exports也可以导出呢？

这是因为module对象的exports属性是exports对象的一个引用；
也就是说 module.exports = exports；

原理：

node中的每一个文件都是一个模块，每个模块都有私有的module.export和exports变量和require函数
在源码中进行了如下操作：

module.exports = {}
exports = modules.exports

也就是说，默认modules.exports和exports指向同一个引用地址，
但是实际上require(x)方法导出的时候，是找到匹配x的文件，导出当前文件中的modules.exports对象
源码大致如下:

function require(id) {
  return modules.exports;
}

require查找规则

我们现在已经知道，require是一个函数，可以帮助我们引入一个文件（模块）中导出的对象。
那么，require的查找规则是怎么样的呢？

https://nodejs.org/dist/latest-v14.x/docs/api/modules.html#modules_all_together
这里我总结比较常见的查找规则：导入格式如下：require(X)

情况一：X是一个Node核心模块，比如path、http

直接返回核心模块，并且停止查找

情况二：X是以 ./ 或 ../ 或 /（根目录）开头的
第一步：将X当做一个文件在对应的目录下查找；

1.如果有后缀名，按照后缀名的格式查找对应的文件
2.如果没有后缀名，会按照如下顺序：
- 1> 直接查找文件X
- 2> 查找X.js文件
- 3> 查找X.json文件
- 4> 查找X.node文件

第二步：没有找到对应的文件，将X作为一个目录

查找目录下面的index文件
- 1> 查找X/index.js文件
- 2> 查找X/index.json文件
- 3> 查找X/index.node文件

如果没有找到，那么报错：not found

情况三：直接是一个X（没有路径），并且X不是一个核心模块
/Users/coderwhy/Desktop/Node/TestCode/04_learn_node/05_javascript-module/02_commonjs/main.js中编写 require('why’)

image.png

会先在当前文件坐在目录下的node_modules目录下寻找，如果没有找到
在去上级目录下的node_modules目录下寻找，如果依然没找到
继续去上上级目录下的node_modules目录下寻找...
直至找到根目录，依然没有找到，则报错

如果上面的路径中都没有找到，那么报错：not found

模块的加载过程

结论一：模块在被第一次引入时，模块中的js代码会被运行一次
结论二：模块被多次引入时，会缓存，最终只加载（运行）一次

为什么只会加载运行一次呢？
这是因为每个模块对象module都有一个属性：loaded。
为false表示还没有加载，为true表示已经加载；

./index.js
在index.js文件中多次引用bar.js

const bar = require("./bar");
require("./bar");
require("./bar");
require("./bar");
require("./bar");
require("./bar");
console.log(bar.name, bar.age);

./bar.js

console.log(module.loaded)
exports.name = "why";
exports.age = 18;

image.png

结论三：如果有循环引入，那么加载顺序是什么？
如果出现右图模块的引用关系，那么加载顺序是什么呢？

image.png

这个其实是一种数据结构：图结构；
图结构在遍历的过程中，有深度优先搜索（DFS, depth first search）和广度优先搜索（BFS, breadth first search）；
Node采用的是深度优先算法：main -> aaa -> ccc -> ddd -> eee ->bbb

CommonJS规范缺点

CommonJS加载模块是同步的：

同步的意味着只有等到对应的模块加载完毕，当前模块中的内容才能被运行；
这个在服务器不会有什么问题，因为服务器加载的js文件都是本地文件，加载速度非常快；

如果将它应用于浏览器呢？

浏览器加载js文件需要先从服务器将文件下载下来，之后再加载运行；
那么采用同步的就意味着后续的js代码都无法正常运行，即使是一些简单的DOM操作；

所以在浏览器中，我们通常不使用CommonJS规范：

当然在webpack中使用CommonJS是另外一回事；
因为它会将我们的代码转成浏览器可以直接执行的代码；

在早期为了可以在浏览器中使用模块化，通常会采用AMD或CMD：

但是目前一方面现代的浏览器已经支持ES Modules，另一方面借助于webpack等工具可以实现对CommonJS或者ES Module代码的转换；
AMD和CMD已经使用非常少了，所以这里我们进行简单的演练；

AMD规范

AMD主要是应用于浏览器的一种模块化规范：

AMD是Asynchronous Module Definition（异步模块定义）的缩写；
它采用的是异步加载模块；
事实上AMD的规范还要早于CommonJS，但是CommonJS目前依然在被使用，而AMD使用的较少了；

我们提到过，规范只是定义代码的应该如何去编写，只有有了具体的实现才能被应用：

AMD实现的比较常用的库是require.js和curl.js；

require.js的使用

第一步：下载require.js

下载地址：https://github.com/requirejs/requirejs
找到其中的require.js文件；

第二步：定义HTML的script标签引入require.js和定义入口文件：*

data-main属性的作用是在加载完src的文件后会加载执行该文件

require.js的使用

<script src="./lib/require.js" data-main="./index.js"></script>

image.png

./index..html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- data-main属性的作用是在加载完src的文件后会加载执行该文件 -->
    <script src="./lib/require.js" data-main="./src/index.js"></script>
  </body>
</html>

./src/index.js

//配置模块及其路径
require.config({
  baseUrl: "./src", //默认为当前文件所在目录
  paths: {
    foo: "./modules/foo",
    bar: "./modules/bar",
  },
});

//使用模块
require(["foo", "bar"], function (foo) {
  console.log(foo.name, foo.age);
});

./src/modules/foo.js

//定义模块
define(function () {
  const name = "why";
  const age = 18;

  //导出模块中的变量
  return {
    name,
    age,
  };
});

./src/modules/bar.js

//定义模块,并且在当前模块中导入foo模块，并使用foo模块中导出的变量
define(["foo"], function (foo) {
  console.log("bar.js", foo.name, foo.age);
});

//写法二:
// define(function (foo) {
//   require(["foo"], function (foo) {
//     console.log("bar.js", foo.name, foo.age);
//   });
// });

CMD规范

CMD规范也是应用于浏览器的一种模块化规范：

CMD 是Common Module Definition（通用模块定义）的缩写；
它也采用了异步加载模块，但是它将CommonJS的优点吸收了过来；
但是目前CMD使用也非常少了；
CMD也有自己比较优秀的实现方案：
SeaJS

第一步：下载SeaJS

下载地址：https://github.com/seajs/seajs
找到dist文件夹下的sea.js

第二步：引入sea.js和使用主入口文件

seajs是指定主入口文件的

image.png

./index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./lib/sea.js" ></script>
    <script>
      seajs.use('./src/index.js')
    </script>
  </body>
</html>

./src/index.js

//定义模块
define(function(require, exports, module) {
  //导入foo模块
  const foo = require('./modules/foo')
})

./src/modules/foo.js

//定义模块
define(function (require, exports, module) {
  //导入bar模块
  const bar = require("./bar");
  console.log(bar.name, bar.age);
});

./src/modules/bar.js

//定义模块
define(function (require, exports, module) {
  const name = "why";
  const age = 18;

  //导出变量
  module.exports = {
    name,
    age,
  };
});

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,524评论 5赞 460
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,869评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,813评论 0赞 320
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,210评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,085评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,117评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,533评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,219评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,487评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,582评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,362评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,218评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,589评论 3赞 299
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,899评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,176评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,503评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,707评论 2赞 335

45.CommonJS详解

什么是模块化？

模块化的历史

没有模块化带来的问题

CommonJS规范和Node关系

CommonJS的基本使用

exports导出

module.exports

原理：

require查找规则

模块的加载过程

CommonJS规范缺点

AMD规范

require.js的使用

CMD规范

推荐阅读更多精彩内容