commonjs

早期 JavaScript 开发很容易存在全局污染和依赖管理混乱问题。Commonjs 的提出，弥补 Javascript 对于模块化，没有统一标准的缺陷。nodejs 借鉴了 Commonjs 的 Module ，实现了良好的模块化管理。

1  commonjs 使用与原理

在使用  规范下，有几个显著的特点。

• 在 commonjs 中每一个 js 文件都是一个单独的模块，我们可以称之为 module；

• 该模块中，包含 CommonJS 规范的核心变量: exports、module.exports、require；

• exports 和 module.exports 可以负责对模块中的内容进行导出；

• require 函数可以帮助我们导入其他模块（自定义模块、系统模块、第三方库模块）中的内容；

commonjs 使用初体验

导出：我们先尝试这导出一个模块：

hello.js中

let name = 'commonjs 使用初体验'
module.exports = function sayName  (){
    return name
}

导入：接下来简单的导入：

main.js

const sayName = require('./hello.js')
module.exports = function say(){
    return {
        name:sayName(),
        author:'fishman'
    }
}

如上就是 Commonjs 最简单的实现，那么暴露出两个问题：

• 如何解决变量污染的问题。

• module.exports，exports，require 三者是如何工作的？又有什么关系？

commonjs 实现原理

首先从上述得知每个模块文件上存在 module，exports，require三个变量，然而这三个变量是没有被定义的，但是我们可以在 Commonjs 规范下每一个 js 模块上直接使用它们。在 nodejs 中还存在 __filename 和 __dirname 变量。

如上每一个变量代表什么意思呢：

• module 记录当前模块信息。

• require 引入模块的方法。

• exports 当前模块导出的属性

在编译的过程中，实际 Commonjs 对 js 的代码块进行了首尾包装， 我们以上述的 main.js 为例子，它被包装之后的样子如下：

(function(exports,require,module,__filename,__dirname){
   const sayName = require('./hello.js')
    module.exports = function say(){
        return {
            name:sayName(),
            author:'fishman'
        }
    }
})

• 在 Commonjs 规范下模块中，会形成一个包装函数，我们写的代码将作为包装函数的执行上下文，使用的 require ，exports ，module 本质上是通过形参的方式传递到包装函数中的。

那么包装函数本质上是什么样子的呢？

function wrapper (script) {
    return '(function (exports, require, module, __filename, __dirname) {' + 
        script +
     '\n})'
}

包装函数执行。

const modulefunction = wrapper(`
  const sayName = require('./hello.js')
    module.exports = function say(){
        return {
            name:sayName(),
            author:'fishman'
        }
    }
`)

• 如上模拟了一个包装函数功能， script 为我们在 js 模块中写的内容，最后返回的就是如上包装之后的函数。当然这个函数暂且是一个字符串。

 runInThisContext(modulefunction)(module.exports, require, module, __filename, __dirname)

在模块加载的时候，会通过 runInThisContext (可以理解成 eval ) 执行 modulefunction ，传入require ，exports ，module 等参数。最终我们写的 nodejs 文件就这么执行了。

2 require 文件加载流程

require 如何进行文件的加载的。

我们还是以 nodejs 为参考，比如如下代码片段中：

const fs =      require('fs')      // ①核心模块
const sayName = require('./hello.js')  //② 文件模块
const crypto =  require('crypto-js')   // ③第三方自定义模块

如上代码片段中：

• ① 为 nodejs 底层的核心模块。

• ② 为我们编写的文件模块，比如上述 sayName

• ③ 为我们通过 npm 下载的第三方自定义模块，比如 crypto-js。

当 require 方法执行的时候，接收的唯一参数作为一个标识符 ，Commonjs 下对不同的标识符，处理流程不同，但是目的相同，都是找到对应的模块。

require 加载标识符原则

首先我们看一下 nodejs 中对标识符的处理原则。

• 首先像 fs ，http ，path 等标识符，会被作为 nodejs 的核心模块。

• ./ 和 ../ 作为相对路径的文件模块， / 作为绝对路径的文件模块。

• 非路径形式也非核心模块的模块，将作为自定义模块。

核心模块的处理：

核心模块的优先级仅次于缓存加载，在 Node 源码编译中，已被编译成二进制代码，所以加载核心模块，加载过程中速度最快。

路径形式的文件模块处理：

已 ./ ，../ 和 / 开始的标识符，会被当作文件模块处理。require() 方法会将路径转换成真实路径，并以真实路径作为索引，将编译后的结果缓存起来，第二次加载的时候会更快。至于怎么缓存的？我们稍后会讲到。

自定义模块处理：自定义模块，一般指的是非核心的模块，它可能是一个文件或者一个包，它的查找会遵循以下原则：

• 在当前目录下的 node_modules 目录查找。

• 如果没有，在父级目录的 node_modules 查找，如果没有在父级目录的父级目录的 node_modules 中查找。

• 沿着路径向上递归，直到根目录下的 node_modules 目录。

• 在查找过程中，会找 package.json 下 main 属性指向的文件，如果没有  package.json ，在 node 环境下会以此查找 index.js ，index.json ，index.node。

3 require 模块引入与处理

CommonJS 模块同步加载并执行模块文件，CommonJS 模块在执行阶段分析模块依赖，采用深度优先遍历（depth-first traversal），执行顺序是父 -> 子 -> 父；

例子：

a.js文件

const getMes = require('./b')
console.log('我是 a 文件')
exports.say = function(){
    const message = getMes()
    console.log(message)
}

b.js文件

const say = require('./a')
const  object = {
   name:'commonjs 使用初体验',
   author:'fishman'
}
console.log('我是 b 文件')
module.exports = function(){
    return object
}

main.js

const a = require('./a')
const b = require('./b')

console.log('main.js')

执行node main.js

 

从上面的运行结果可以得出以下结论：

• main.js 和 a.js 模块都引用了 b.js 模块，但是 b.js 模块只执行了一次。

• a.js 模块 和 b.js 模块互相引用，但是没有造成循环引用的情况。

• 执行顺序是父 -> 子 -> 父；

require 加载原理

module 和 Module。

module ：在 Node 中每一个 js 文件都是一个 module ，module 上保存了 exports 等信息之外，还有一个 loaded 表示该模块是否被加载。

• 为 false 表示还没有加载；

• 为 true 表示已经加载

Module ：以 nodejs 为例，整个系统运行之后，会用 Module 缓存每一个模块加载的信息。

require 的源码大致长如下的样子：

// id 为路径标识符
function require(id) {
   /* 查找  Module 上有没有已经加载的 js  对象*/
   const  cachedModule = Module._cache[id]
   
   /* 如果已经加载了那么直接取走缓存的 exports 对象  */
  if(cachedModule){
    return cachedModule.exports
  }
 
  /* 创建当前模块的 module  */
  const module = { exports: {} ,loaded: false , ...}

  /* 将 module 缓存到  Module 的缓存属性中，路径标识符作为 id */  
  Module._cache[id] = module
  /* 加载文件 */
  runInThisContext(wrapper('module.exports = "123"'))(module.exports, require, module, __filename, __dirname)
  /* 加载完成 *//
  module.loaded = true 
  /* 返回值 */
  return module.exports
}

从上面我们总结出一次 require 大致流程是这样的；

• require 会接收一个参数——文件标识符，然后分析定位文件，分析过程我们上述已经讲到了，加下来会从 Module 上查找有没有缓存，如果有缓存，那么直接返回缓存的内容。

• 如果没有缓存，会创建一个 module 对象，缓存到 Module 上，然后执行文件，加载完文件，将 loaded 属性设置为 true ，然后返回 module.exports 对象。借此完成模块加载流程。

• 模块导出就是 return 这个变量的其实跟 a = b 赋值一样， 基本类型导出的是值， 引用类型导出的是引用地址。

• exports 和 module.exports 持有相同引用，因为最后导出的是 module.exports， 所以对 exports 进行赋值会导致 exports 操作的不再是 module.exports 的引用。

require 避免重复加载

从上面我们可以直接得出，require 如何避免重复加载的，首先加载之后的文件的 module 会被缓存到 Module 上，比如一个模块已经 require 引入了 a 模块，如果另外一个模块再次引用 a ，那么会直接读取缓存值 module ，所以无需再次执行模块。

对应 demo 片段中，首先 main.js 引用了 a.js ，a.js 中 require 了 b.js 此时 b.js 的 module 放入缓存 Module 中，接下来 main.js 再次引用  b.js ，那么直接走的缓存逻辑。所以 b.js 只会执行一次，也就是在 a.js 引入的时候。

require 避免循环引用

整个流程。

• ① 首先执行 node main.js ，那么开始执行第一行 require(a.js)；

• ② 那么首先判断 a.js 有没有缓存，因为没有缓存，先加入缓存，然后执行文件 a.js （需要注意 是先加入缓存， 后执行模块内容）;

• ③ a.js 中执行第一行，引用 b.js。

• ④ 那么判断 b.js 有没有缓存，因为没有缓存，所以加入缓存，然后执行 b.js 文件。

• ⑤ b.js 执行第一行，再一次循环引用 require(a.js) 此时的 a.js 已经加入缓存，直接读取值。接下来打印 console.log('我是 b 文件')，导出方法。

• ⑥ b.js 执行完毕，回到 a.js 文件，打印 console.log('我是 a 文件')，导出方法。

• ⑦ 最后回到 main.js，打印 console.log('main.js') 完成这个流程。

不过这里我们要注意问题：

• 如上第 ⑤ 的时候，当执行 b.js 模块的时候，因为 a.js 还没有导出 say 方法，所以 b.js 同步上下文中，获取不到 say。

4 exports 和 module.exports

exports 使用

第一种方式：exports  a1.js

exports.name = `commonjs 使用初体验`
exports.author = `fishman`
exports.say = function (){
    console.log(666)
}

引用  main1.js

const a = require('./a1')
console.log(a)

打印

 

• exports 就是传入到当前模块内的一个对象，本质上就是 module.exports。

问题：为什么 exports={} 直接赋值一个对象就不可以呢？ 比如我们将如上 a1.js 修改一下，改为a2.js：

exports={
    name:'commonjs 使用初体验',
    author:'finshman',
    say(){
        console.log(666)
    }
}

运行

 

理想情况下是通过 exports = {} 直接赋值，不需要在  exports.a = xxx  每一个属性，但是如上我们看到了这种方式是无效的。为什么会这样？实际这个是 js 本身的特性决定的。

通过上述讲解都知道 exports ， module 和 require 作为形参的方式传入到 js 模块中。我们直接 exports = {}  修改 exports ，等于重新赋值了形参，那么会重新赋值一份，但是不会在引用原来的形参。

module.exports 使用

module.exports 本质上就是 exports ，我们用 module.exports 来实现如上的导出。

module.exports={
    name:'commonjs 使用初体验',
    author:'finshman',
    say(){
        console.log(666)
    }
}

module.exports 也可以单独导出一个函数或者一个类。比如如下：

module.exports = function (){
    // ...
}

从上述 require 原理实现中，我们知道了 exports 和 module.exports 持有相同引用，因为最后导出的是 module.exports 。那么这就说明在一个文件中，我们最好选择 exports 和 module.exports 两者之一，如果两者同时存在，很可能会造成覆盖的情况发生。