來來來，探究一下CommonJs的實現原理

程式碼寫著寫著就懂了發表於2018-08-27

其實剛看到這個題目的時候，我的內心是拒絕的，但是本著對科學的敬畏精神，我開始了 CommonJs 的探索之路。

來來來奉上我這幾天的心血，拿走不客氣。如有錯誤歡迎指正，共同進步。

提到CommonJs 繞不開的就是模組化。

模組化

模組化是指將一個複雜的系統分解為多個模組以方便編碼。

很久以前，開發網頁要通過名稱空間的方式來組織程式碼，例如 jQuery 庫將它的 API 都放在了 window.$ 下，在載入完 jQuery 後，其他模組再通過 window.$ 去使用 jQuery。這樣做有很多問題，其中包括：

名稱空間衝突，兩個庫可能會使用同一個名稱，例如 Zepto(zepto.com) 也是放在 window.$ 下；
無法合理地管理專案的依賴和版本；
無法方便地控制依賴的載入順序；

當專案變大，這種方式將變得難以維護，需要用模組化的思想來組織程式碼。

一、模組化優點：

提升開發效率：程式碼方便重用，別人開發的模組直接拿過來就可以使用，不需要重複開發法類似的功能。
方便後期維護：程式碼方便重用，別人開發的模組直接拿過來就可以使用，不需要重複開發法類似的功能。

所以總結來說，在生產角度，模組化開發是一種生產方式，這種方式生產效率高，維護成本低。從軟體開發角度來說，模組化開發是一種開發模式，寫程式碼的一種方式，開發效率高，方便後期維護。

二、模組化規範

伺服器端規範主要是CommonJS，node.js用的就是CommonJS規範。

客戶端規範主要有：AMD（非同步模組定義，推崇依賴前置）、CMD（通用模組定義，推崇依賴就近）。AMD規範的實現主要有RequireJS，CMD規範的主要實現有SeaJS。但是SeaJS已經停止維護了，因為在ES6中已經有了模組化的實現，隨著ES6的普及，第三方的模組化實現將會慢慢的淘汰。

本文主要介紹的也是`CommonJS`,所以其他的規範請允許我無恥的忽略了，下面進入正題：

三、CommonJS

CommonJS 作為 Node.js 的規範，一直沿用至今。由於 npm 上 CommonJS 的類庫眾多，以及 CommonJS 和 ES6 之間的差異，Node.js 無法直接相容 ES6。所以現階段 require/exports 仍然是必要且是必須的。出自 ES6 的 import/export 相對就晚了許多。被大家所熟知和使用也是 2015 年之後的事了。這其實要感謝 babel（原來專案名叫做 6to5，後更名為 babel）這個神一般的專案。由於有了 babel 將還未被宿主環境（各瀏覽器、Node.js）直接支援的 ES6 Module 編譯為 ES5 的 CommonJS —— 也就是 require/exports 這種寫法 —— Webpack 插上 babel-loader 這個翅膀才開始高飛，大家也才可以稱 " 我在使用 ES6！

CommonJS的核心思想是通過rquire方法來同步載入依賴的其他模組，通過module.exports到處需要暴露的介面。

採用CommonJS匯入及匯出的程式碼如下：

moduleA.js
//匯出
 module.exports = moduleA.someFunc;
複製程式碼

//匯入
const moduleA = require('./moduleA')

複製程式碼

1. CommonJS的簡單實現解析

分析原始碼之前，先介紹require語句的內部邏輯。

1.1 require的內部邏輯

摘自<Node使用手冊>

  當node遇到 require(X),按照下面的順序處理。
  
  （1）如果 X 是內建模組（比如 require('http')）
  
       a. 返回該模組
       b. 不再繼續執行
       
   （2）如果 X 以'./' 或者 '../ '開頭
       
       a. 根據 X 所在的父模組，確定X的絕對路徑。
       b. 將 X 當成檔案，依次查詢下面檔案，只要其中有一個存在，就返回該檔案，不再繼續執行。(也就是把 X 跟下面的幾種檔案格式進行匹配，匹配到了就會依照相應的檔案格式進行載入)
     
       +----------------------+
       |  .x                  |
       |  .x.js               |
       |  .x.json             |
       |  .x.node             |
       +--------------------  + 
    c.將 X 當成目錄，一次查詢下面檔案，只要其中有一個存在，就返回該檔案，不再繼續執行。
    
       +----------------------------+
       |  .X/package.json(main欄位) |
       |  .X/index.js               |
       |  .X/index.json             |
       |  .X/index.node             |
       +--------------------------- +
       
   （3）如果 X 不帶路徑
      a.根據 X 所在的父模組，確定 X 可能的安裝目錄。
      b. 依次在每個目錄中， 將 X 當成檔名或目錄名載入
    
   （4）丟擲 "not found"
複製程式碼

require命令用於載入檔案，字尾名預設為.js。

比如：

var  a = require('a');
// 等同於
var a = require('a.js');
複製程式碼

根據引數的不同格式，require 命令去不同路徑尋找模組檔案。

總結一下載入規則如下：

（1）如果引數字串以"/"開頭,則表示載入的是一個位於絕對路徑的模組檔案。比如，require('/home/user/a.js'),將載入 /home/user/a.js

(2) 如果引數字串以“./”開頭，則表示載入的是一個位於相對路徑（跟）

在當前指令碼檔案 "/Users/danlan/node-stu/user.js" 執行了 require('bar'), 這屬於上面的第三種情況。Node 內部執行過程如下：

首先去確定 X 的絕對路徑可能是下面這些位置，依次搜尋每一個目錄。
- /Users/danlan/node-stu/node_modules/bar
- /Users/danlan/node_modules/bar
- /Users/node_modules/bar
- /node_modules/bar

搜尋時， Node 先將 bar 當成檔名，依次嘗試載入下面這些檔案，只要有一個成功就返回。

+----------------------------+
|  bar                        |
|  bar.js                     |
|  bar.json                   |
|  bar.node                   |
+--------------------------- +
複製程式碼

如果都不成功說明 bar 可能是目錄名，於是嘗試載入下面這些檔案。

 +----------------------------+
 |  bar/package.json(main 欄位)|
 |  bar/index.js               |
 |  bar/index.json             |
 |  bar/index.node             |
 +-----------------------------+
複製程式碼

如果所有的目錄中，都無法找到 bar 對應的檔案或目錄，就丟擲一個錯誤。

1.2 Module 物件

瞭解了內部邏輯以後，下面是簡易版原始碼分析：

Node內部提供了一個 Mudule構建函式。所有模組都是Module的例項。 require 的原始碼在 Node 的 lib/module.js 檔案。

function Module(id, parent){
    this.id = id;
    this.exports = {};
    this.parent = parent;
    this.filename = null;
    this.loaded = false;
    this.children = []
}
module.exports = Module;
var module = new Module(filename, parent)
複製程式碼

上面的程式碼中，Node 定義了一個建構函式 Module,所有的模組都是 Module 的例項。可以看到，當前模組 (module.js)也是Moudle的一個例項。

module.id 模組的識別符，通常是帶有絕對路徑的模組檔名。
module.filename 模組的檔名，帶有絕對路徑。
module.loaded 返回一個布林值，表示模組是否已經完成載入。
module.parent 返回一個物件，表示呼叫該模組的模組。
module.children 返回一個陣列，表示該模組要用到的其他模組。
module.exports 表示模組對外輸出的值

每個例項都有自己的屬性。下面通過一個例子，看看這些屬性的值是什麼。新建一個指令碼檔案 a.js。

//a.js
console.log('module.id: ', module.id);
console.log('module.exports: ', module.exports);
console.log('module.parent: ', module.parent);
console.log('module.filename: ', module.filename);
console.log('module.loaded: ', module.loaded);
console.log('module.children: ', module.children);
console.log('module.paths: ', module.paths);
複製程式碼

執行一下：


$ node a.js

module.id:  .
module.exports:  {}
module.parent:  null
module.filename:  /home/ruanyf/tmp/a.js
module.loaded:  false
module.children:  []
module.paths:  [ '/Users/danlan/workspace/node-stu/ree/node_modules',
  '/Users/danlan/workspace/node-stu/node_modules',
  '/Users/danlan/workspace/node_modules',
  '/Users/danlan/node_modules',
  '/Users/node_modules',
  '/node_modules' ]

複製程式碼

可以看到，如果沒有父模組，直接呼叫當前模組， parent 屬性就是null ,id 屬性就是一個點。filename屬性是模組的絕對路徑，path 屬性是一個陣列，包含了模組可能的位置。另外，輸出這些內容時，模組還沒有全部載入，所以 loaded 屬性為 false。

新建一個b.js

var a = require('./a.js')

複製程式碼

執行一下：

module.id:  /Users/danlan/workspace/node-stu/ree/a.js
module.exports:  {}
module.parent:  Module {
  id: '.',
  exports: {},
  parent: null,
  filename: '/Users/danlan/workspace/node-stu/ree/b.js',
  loaded: false,
  children:
   [ Module {
       id: '/Users/danlan/workspace/node-stu/ree/a.js',
       exports: {},
       parent: [Circular],
       filename: '/Users/danlan/workspace/node-stu/ree/a.js',
       loaded: false,
       children: [],
       paths: [Array] } ],
  paths:
   [ '/Users/danlan/workspace/node-stu/ree/node_modules',
     '/Users/danlan/workspace/node-stu/node_modules',
     '/Users/danlan/workspace/node_modules',
     '/Users/danlan/node_modules',
     '/Users/node_modules',
     '/node_modules' ] }
module.filename:  /Users/danlan/workspace/node-stu/ree/a.js
module.loaded:  false
module.children:  []
module.paths:  [ '/Users/danlan/workspace/node-stu/ree/node_modules',
  '/Users/danlan/workspace/node-stu/node_modules',
  '/Users/danlan/workspace/node_modules',
  '/Users/danlan/node_modules',
  '/Users/node_modules',
  '/node_modules' ]

複製程式碼

這個輸出稍稍有一點多，沒關係慢慢縷一下哈，由於 a.js 被 b.js 呼叫，所以 parent 屬性指向 b.js 模組，id屬性和filename 屬性一致，都是模組的絕對路徑。

1.3 模組例項的 require 方法

每個模組例項都有一個 require 方法。

Module.prototype.require = function(path){
  return Module._load(path, this)  
}
複製程式碼

由此可知，require 並不是全域性命令，而是每個模組提供的一個內部方法，也就是說，只有在模組內部才能使用require命令，（唯一的例外是REPL 環境）。另外，require 其實內部呼叫 Module._load 方法。

下面來看 Module._load 的原始碼。


Module._load = function(request, parent, isMain) {

  //  計算絕對路徑
  var filename = Module._resolveFilename(request, parent);

  //  第一步：如果有快取，取出快取
  var cachedModule = Module._cache[filename];
  if (cachedModule) {
    return cachedModule.exports;
  }
  
  // 第二步：是否為內建模組
  if (NativeModule.exists(filename)) {
    return NativeModule.require(filename);
  }

  // 第三步：生成模組例項，存入快取
  var module = new Module(filename, parent);
  Module._cache[filename] = module;

  // 第四步：載入模組
  try {
    module.load(filename);
    hadException = false;
  } finally {
    if (hadException) {
      delete Module._cache[filename];
    }
  }

  // 第五步：輸出模組的exports屬性
  return module.exports;
};

複製程式碼

上面的程式碼中，首先解析出模組的絕對路徑（filename），以它作為模組的識別符。

它的內部處理流程是:

檢查 Module._cache，是否在快取中有指定的模組，如果模組已經在快取中，就從快取取出。
如果沒有判斷是否為內建模組，如果是內建模組就返回內建模組。
如果快取之中沒有就會建立一個新的Moudle例項，將它儲存到快取中。
載入模組
如果載入/解析過程報錯，就從快取刪除該模組
返回該模組的 module.exports

因此，Module._load 的關鍵步驟是兩個。

Module._resolveFilename() : 確定模組的絕對路徑
module.load():載入模組

下面來說一下Module._resolveFilename():

1.4 模組的絕對路徑

下面是 Module._resolveFilename() 方法的原始碼。

Module._resolveFilename = function(request, parent) {

 // 第一步：如果是內建模組，不含路徑返回
 if (NativeModule.exists(request)) {
   return request;
 }

 // 第二步：確定所有可能的路徑
 var resolvedModule = Module._resolveLookupPaths(request, parent);
 var id = resolvedModule[0];
 var paths = resolvedModule[1];

 // 第三步：確定哪一個路徑為真
 var filename = Module._findPath(request, paths);
 if (!filename) {
   var err = new Error("Cannot find module '" + request + "'");
   err.code = 'MODULE_NOT_FOUND';
   throw err;
 }
 return filename;
};


複製程式碼

上面程式碼中，在 Module.resolveFilrename 方法內部，又呼叫了兩個方法 Module.reqolveLookPaths()和 Module._findPath(),前者用來列出可能的路徑，後者用來確認哪一個路徑為真。

有了可能的路徑以後，下面就是 Module._findPath()的原始碼，用來確定到底哪一個是正確路徑。

Module._findPath = function(request, paths) {

 // 列出所有可能的字尾名：.js，.json, .node
 var exts = Object.keys(Module._extensions);

 // 如果是絕對路徑，就不再搜尋
 if (request.charAt(0) === '/') {
   paths = [''];
 }

 // 是否有字尾的目錄斜槓
 var trailingSlash = (request.slice(-1) === '/');

 // 第一步：如果當前路徑已在快取中，就直接返回快取
 var cacheKey = JSON.stringify({request: request, paths: paths});
 if (Module._pathCache[cacheKey]) {
   return Module._pathCache[cacheKey];
 }

 // 第二步：依次遍歷所有路徑
 for (var i = 0, PL = paths.length; i < PL; i++) {
   var basePath = path.resolve(paths[i], request);
   var filename;

   if (!trailingSlash) {
     // 第三步：是否存在該模組檔案
     filename = tryFile(basePath);

     if (!filename && !trailingSlash) {
       // 第四步：該模組檔案加上字尾名，是否存在
       filename = tryExtensions(basePath, exts);
     }
   }

   // 第五步：目錄中是否存在 package.json 
   if (!filename) {
     filename = tryPackage(basePath, exts);
   }

   if (!filename) {
     // 第六步：是否存在目錄名 + index + 字尾名 
     filename = tryExtensions(path.resolve(basePath, 'index'), exts);
   }

   // 第七步：將找到的檔案路徑存入返回快取，然後返回
   if (filename) {
     Module._pathCache[cacheKey] = filename;
     return filename;
   }
 }

 // 第八步：沒有找到檔案，返回false 
 return false;
};

複製程式碼

經過上面程式碼，就可以找到模組的絕對路徑了。

有時在專案程式碼中，需要呼叫模組的絕對路徑，那麼除了 module.filename ，Node 還提供一個 require.resolve 方法，供外部呼叫，用於從模組名取到絕對路徑。


require.resolve = function(request) {
  return Module._resolveFilename(request, self);
};

// 用法
require.resolve('a.js')
// 返回  /Users/danlan/workspace/node-stu/ree/a.js

複製程式碼

1.5 載入模組

他有了模組的絕對路徑，就可以載入該模組了。下面就是 module.load 方法的原始碼。

Module.prototype.load = function (filename) {
    var extension = path.extname(filename)  || 'js'
    if(!Module._extensions[extensions]) extension = '.js'
    Module._extensions[extension](this, filename)
    this.loaded = true
}
複製程式碼

上面程式碼中，首先確定模組的字尾名，不同的字尾名對應不同的載入方法。下面是.js和.json字尾名對應的處理方法。


Module._extensions['.js'] = function(module, filename) {
  var content = fs.readFileSync(filename, 'utf8');
  module._compile(stripBOM(content), filename);
};

Module._extensions['.json'] = function(module, filename) {
  var content = fs.readFileSync(filename, 'utf8');
  try {
    module.exports = JSON.parse(stripBOM(content));
  } catch (err) {
    err.message = filename + ': ' + err.message;
    throw err;
  }
};

複製程式碼

這裡只討論 js 檔案的載入。首先，將模組檔案讀取成字串，然後剝離 utf8 編碼特有的BOM檔案頭，最後編譯該模組。

module._compile 方法用於模組的編譯。

Module.prototype._compile = function(content, filename) {
  var self = this;
  var args = [self.exports, require, self, filename, dirname];
  return compiledWrapper.apply(self.exports, args);
};
複製程式碼

上面的程式碼基本等同於下面的形式。

(function (exports, require, module, __filename, __dirname) {
  // 模組原始碼
});

複製程式碼

也就是說，模組的載入實質上就是，注入exports、require、module三個全域性變數，然後執行模組的原始碼，然後將模組的 exports 變數的值輸出。

引入一張檔案查詢的邏輯圖：

參考：

javascript.ruanyifeng.com/nodejs/modu…

segmentfault.com/a/119000000…

www.cnblogs.com/TomXu/archi…

zhuanlan.zhihu.com/p/22890374

來我們探究一下net/http 的程式碼流程
2021-06-03
HTTP
用程式注入來實現一個殼（原理）
2004-06-02
Spring多資料來源管理實現原理
2017-10-24
Spring
【Flutter脫髮錄】也來實現一下滅霸效果
2020-03-29
Flutter
HTTP2和HTTPS來不來了解一下？
2019-03-04
HTTP
Promise原理探究及實現
2019-07-18
Promise
【ZJOF】用來個棧來實現一個佇列
2018-08-14
佇列
PCA用SVD來實現
2017-09-08
PCA
Spring MVC的工作原理，我們來看看其原始碼實現
2019-06-06
SpringMVC原始碼
從原始碼的角度來談一談HashMap的內部實現原理
2018-08-19
原始碼HashMap
ReentrantLock實現原理深入探究
2015-11-24
ReentrantLock
探究Android View 繪製流程，Canvas 的由來
2019-03-01
AndroidViewCanvas
使用Runtime來實現自己的KVO
2018-04-25
使用單例模式來實現動態資料來源管理
2020-11-29
單例模式
快來圍觀一下JavaScript的Proxy
2018-05-26
JavaScript
來了解一下Redis的分散式鎖
2018-02-19
Redis分散式
TongWeb資料來源原理
2020-11-30
Web
7個自媒體網站，快來了解一下，收藏起來
2022-06-02
網站
你真的明白RPC 嗎？一起來探究 RPC 的實質
2018-06-23
RPC
低程式碼行業深度如何？此文來探究！
2022-01-04
行業
原來你是這樣的 jsonp(原理與具體實現細節)
2017-06-11
JSON
Java8 HashMap實現原理探究
2016-03-04
JavaHashMap
來了來了，CSS 版的冰墩墩來了……
2022-02-12
CSS
實現 MongoDB 外來鍵關聯
2019-09-21
MongoDB
利用static來實現單例模式
2022-01-08
單例模式
postgresql使用pgagent來實現job功能
2020-11-13
SQL
用匯編來實現OOP (轉)
2007-12-14
OOP
從零實現DNN 探究梯度下降的原理
2019-06-06
DNN梯度
MG--探究KVO的底層實現原理
2021-09-09
UITableView的原理——探究及重新實現程式碼
2024-08-06
UIView
通過實現仿照FeignClient框架原理的示例來看清FeignClient的本質
2021-11-14
client框架
來入門一下kotlin吧
2018-08-22
Kotlin
do 一下來了一個 redux
2018-12-29
Redux
來實現一個簡易版的 Promise
2018-12-02
Promise
有研究JSF的朋友進來一下
2005-12-16
JS
說一下HashSet的實現原理?
2020-12-03
移動遊戲產業的未來：流量變現的未來（五）
2019-08-07
遊戲產業
瀏覽器載入 CommonJS 模組的原理與實現
2015-05-23
瀏覽器JS