【前端模块化】-关于CommonJS规范

CommonJS规范

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函数可以帮助我们导入其他模块（自定义模块、系统模块、第三方库模块）中的内容；

export导出

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

const name='123'
const age=123
function sayhello(){
	console.log('hello')
}
export.name=name
export.age=age
export.syahello=sayhello

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

const bar =require('./文件名.js')
//const {name,age,sayhello} =require('./文件名.js')

导出导入的本质就是引用赋值

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

module.exports导出

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

const name='123'
const age=123
function sayHello(){
	console.log('hello')
}
modlue.exports={
    name,age,sayHello
}

CommonJS中是没有module.exports的概念的；但是为了实现模块的导出，Node中使用的是Module的类，每一个模块都是Module的一个实例，也就是module；所以在Node中真正用于导出的其实根本不是exports，而是module.exports；因为module才是导出的真正实现者；

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

这是因为module对象的exports属性是exports对象的一个引用；

也就是说module.exports = exports = main中的bar；

require细节

我们现在已经知道，require是一个函数，可以帮助我们引入一个文件（模块）中导出的对象。

那么，require的查找规则是怎么样的呢？

1. 根据路径导入自己编写的模块

   const utils=require('./utils')
   

   第一步：将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文件

2. 导入Node提供的内置模块——直接返回内置模块，并且停止查找

   const path=require('path')
   const http=require('http')
   

3. 直接是一个X（没有路径），并且X不是一个核心模块

   const why=require('why')
   

   

   1. node会去该文件所在的这一层文件夹中找node_modules文件夹里面的why文件夹
   2. 如果该文件所在的这一层文件夹中没有node_modules文件夹，则会返回上一级中寻找node_modules文件夹…直至找到根目录下面的node_modules
   3. 如果上面的路径中都没有找到，那么报错：not found

模块的加载过程

1. 模块在被第一次引入时，模块中的js代码会被运行一次

2. 模块被多次引入时，会缓存，最终只加载（运行）一次

   为什么只会加载运行一次呢？

   这是因为每个模块对象module都有一个属性：loaded：为false表示还没有加载，为true表示已经加载；

3. 若存在“循环引用”：
   

上述引用关系其实形成了一种数据结构——图，图结构在遍历的过程中，有深度优先搜索和广度优先搜索

在Node中采用的是深度优先算法：main -> aaa-> ccc -> ddd-> eee->bbb

CommonJS规范缺点

1. CommonJS加载模块是同步的：

   同步的意味着只有等到对应的模块加载完毕，当前模块中的内容才能被运行；

   在服务器不会有什么问题，因为服务器加载的js文件都是本地文件，加载速度非常快；

   若将CommonJS规范应用于浏览器：

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

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

   当涉及到webpack时使用CommonJS是另外一回事，因为webpack会将我们的代码转化为浏览器可以直接执行的代码

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