1. 程式人生 > >面試官說:說一說CommonJs的實現原理

面試官說:說一說CommonJs的實現原理

目錄 依次 java 包括 adf readfile app 階段 bar

技術分享圖片

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

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

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

模塊化

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

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

  • 命名空間沖突,兩個庫可能會使用同一個名稱,例如 Zepto(http://zepto.com) 也是放在 window.$ 下;
  • 無法合理地管理項目的依賴和版本;
  • 無法方便地控制依賴的加載順序;

當項目變大,這種方式將變得難以維護,需要用模塊化的思想來組織代碼。

一 、模塊化優點:

  1. 提升開發效率:代碼方便重用,別人開發的模塊直接拿過來就可以使用,不需要重復開發法類似的功能。

  2. 方便後期維護:代碼方便重用,別人開發的模塊直接拿過來就可以使用,不需要重復開發法類似的功能。

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

二、模塊化規範

服務器端規範主要是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遇到 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),以它作為模塊的識別符。

它的內部處理流程是:

  1. 檢查 Module._cache,是否在緩存中有指定的模塊,如果模塊已經在緩存中,就從緩存取出。
  2. 如果沒有判斷是否為內置模塊,如果是內置模塊就返回內置模塊。
  3. 如果緩存之中沒有就會創建一個新的Moudle實例,將它保存到緩存中。
  4. 加載模塊
  5. 如果加載/解析過程報錯,就從緩存刪除該模塊
  6. 返回該模塊的 module.exports

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

  1. Module._resolveFilename() : 確定模塊的絕對路徑
  2. 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._extensionsextension
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 變量的值輸出。

引入一張文件查找的邏輯圖:
技術分享圖片
參考:

http://javascript.ruanyifeng.com/nodejs/module.html

https://segmentfault.com/a/1190000000733959#articleHeader5

https://www.cnblogs.com/TomXu/archive/2011/12/30/2288372.html

https://zhuanlan.zhihu.com/p/22890374

面試官說:說一說CommonJs的實現原理