了解Node.js

Node.js是一個基于ChromeV8引擎的JavaScript運行環(huán)境，使用了一個事件驅(qū)動、非阻塞式I/O模型，讓JavaScript 運行在服務(wù)端的開發(fā)平臺，它讓JavaScript成為與PHP、Python、Perl、Ruby等服務(wù)端語言平起平坐的腳本語言。Node中增添了很多內(nèi)置的模塊，提供各種各樣的功能，同時也提供許多第三方模塊。

模塊的問題

為什么要有模塊

復(fù)雜的前端項目需要做分層處理，按照功能、業(yè)務(wù)、組件拆分成模塊， 模塊化的項目至少有以下優(yōu)點：

1. 便于單元測試
2. 便于同事間協(xié)作
3. 抽離公共方法, 開發(fā)快捷
4. 按需加載, 性能優(yōu)秀
5. 高內(nèi)聚低耦合
6. 防止變量沖突
7. 方便代碼項目維護

幾種模塊化規(guī)范

• CMD(SeaJS 實現(xiàn)了 CMD)
• AMD(RequireJS 實現(xiàn)了 AMD)
• UMD(同時支持 AMD 和 CMD)
• IIFE （自執(zhí)行函數(shù)）
• CommonJS （Node 采用了 CommonJS）
• ES Module 規(guī)范 (JS 官方的模塊化方案)

Node中的模塊

Node中采用了 CommonJS 規(guī)范

實現(xiàn)原理：

Node中會讀取文件，拿到內(nèi)容實現(xiàn)模塊化， Require方法 同步引用

tips：Node中任何js文件都是一個模塊，每一個文件都是模塊

Node中模塊類型

1. 內(nèi)置模塊，屬于核心模塊，無需安裝，在項目中不需要相對路徑引用， Node自身提供。
2. 文件模塊，程序員自己書寫的js文件模塊。
3. 第三方模塊， 需要安裝， 安裝之后不用加路徑。

Node中內(nèi)置模塊

fs filesystem

操作文件都需要用到這個模塊

const path = require('path'); // 處理路徑
const fs = require('fs'); // file system
// // 同步讀取
let content = fs.readFileSync(path.resolve(__dirname, 'test.js'), 'utf8');
console.log(content);

let exists = fs.existsSync(path.resolve(__dirname, 'test1.js'));
console.log(exists);

path 路徑處理

const path = require('path'); // 處理路徑


// join / resolve 用的時候可以混用

console.log(path.join('a', 'b', 'c', '..', '/'))

// 根據(jù)已經(jīng)有的路徑來解析絕對路徑， 可以用他來解析配置文件
console.log(path.resolve('a', 'b', '/')); // resolve 不支持/ 會解析成根路徑

console.log(path.join(__dirname, 'a'))
console.log(path.extname('1.js'))
console.log(path.dirname(__dirname)); // 解析父目錄

vm 運行代碼

字符串如何能變成 JS 執(zhí)行呢？

1.eval

eval中的代碼執(zhí)行時的作用域為當(dāng)前作用域。它可以訪問到函數(shù)中的局部變量。

let test = 'global scope'
global.test1 = '123'
function b(){
  test = 'fn scope'
  eval('console.log(test)'); //local scope
  new Function('console.log(test1)')() // 123
  new Function('console.log(test)')() //global scope
}
b()

2.new Function

new Function()創(chuàng)建函數(shù)時，不是引用當(dāng)前的詞法環(huán)境，而是引用全局環(huán)境,Function中的表達式使用的變量要么是傳入的參數(shù)要么是全局的值

Function可以獲取全局變量，所以它還是可能會有變量污染的情況出現(xiàn)

function getFn() {
  let value = "test"
  let fn = new Function('console.log(value)')
  return fn
}

getFn()()

global.a = 100 // 掛在到全局對象global上
new Function("console.log(a)")() // 100

3.vm

前面兩種方式，我們一直強調(diào)一個概念，那就是變量的污染

VM的特點就是不受環(huán)境的影響，也可以說他就是一個沙箱環(huán)境

在Node中全局變量是在多個模塊下共享的，所以盡量不要在global中定義屬性

所以，vm.runInThisContext可以訪問到global上的全局變量，但是訪問不到自定義的變量。而vm.runInNewContext訪問不到global，也訪問不到自定義變量，他存在于一個全新的執(zhí)行上下文

const vm = require('vm')
global.a = 1
// vm.runInThisContext("console.log(a)")
vm.runInThisContext("a = 100") // 沙箱，獨立的環(huán)境
console.log(a) // 1
vm.runInNewContext('console.log(a)')
console.log(a) // a is not defined

Node模塊化的實現(xiàn)

node中是自帶模塊化機制的，每個文件就是一個單獨的模塊，并且它遵循的是CommonJS規(guī)范，也就是使用require的方式導(dǎo)入模塊，通過module.export的方式導(dǎo)出模塊。

node模塊的運行機制也很簡單，其實就是在每一個模塊外層包裹了一層函數(shù)，有了函數(shù)的包裹就可以實現(xiàn)代碼間的作用域隔離。

我們先在一個js文件中直接打印arguments，得到的結(jié)果如下圖所示，我們先記住這些參數(shù)。

console.log(arguments) // exports, require, module, __filename, __dirname

Node中通過modules.export 導(dǎo)出，require 引入。其中require依賴node中的fs模塊來加載模塊文件，通過fs.readFile讀取到的是一個字符串。

在javascrpt中可以通過eval或者new Function的方式來將一個字符串轉(zhuǎn)換成js代碼來運行。但是前面提到過，他們都有一個致命的問題，就是變量的污染。

實現(xiàn)require模塊加載器

首先導(dǎo)入依賴的模塊path，fs,vm, 并且創(chuàng)建一個Require函數(shù)，這個函數(shù)接收一個modulePath參數(shù)，表示要導(dǎo)入的文件路徑

const path = require('path');
const fs = require('fs');
const vm = require('vm');
// 定義導(dǎo)入類，參數(shù)為模塊路徑
function Require(modulePath) {
   ...
}

在Require中獲取到模塊的絕對路徑，使用fs加載模塊，這里讀取模塊內(nèi)容使用new Module來抽象，使用tryModuleLoad來加載模塊內(nèi)容，Module和tryModuleLoad稍后實現(xiàn)，Require的返回值應(yīng)該是模塊的內(nèi)容，也就是module.exports。

// 定義導(dǎo)入類，參數(shù)為模塊路徑
function Require(modulePath) {
    // 獲取當(dāng)前要加載的絕對路徑
    let absPathname = path.resolve(__dirname, modulePath);
    // 創(chuàng)建模塊，新建Module實例
    const module = new Module(absPathname);
    // 加載當(dāng)前模塊
    tryModuleLoad(module);
    // 返回exports對象
    return module.exports;
}

Module的實現(xiàn)就是給模塊創(chuàng)建一個exports對象，tryModuleLoad執(zhí)行的時候?qū)?nèi)容加入到exports中，id就是模塊的絕對路徑。

// 定義模塊, 添加文件id標(biāo)識和exports屬性
function Module(id) {
    this.id = id;
    // 讀取到的文件內(nèi)容會放在exports中
    this.exports = {};
}

node模塊是運行在一個函數(shù)中，這里給Module掛載靜態(tài)屬性wrapper，里面定義一下這個函數(shù)的字符串，wrapper是一個數(shù)組，數(shù)組的第一個元素就是函數(shù)的參數(shù)部分，其中有exports，module，Require，__dirname，__filename, 都是模塊中常用的全局變量.

第二個參數(shù)就是函數(shù)的結(jié)束部分。兩部分都是字符串，使用的時候?qū)⑺麄儼谀K的字符串外部就可以了。

// 定義包裹模塊內(nèi)容的函數(shù)
Module.wrapper = [
    "(function(exports, module, Require, __dirname, __filename) {",
    "})"
]

_extensions用于針對不同的模塊擴展名使用不同的加載方式，比如JSON和javascript加載方式肯定是不同的。JSON使用JSON.parse來運行。

javascript使用vm.runInThisContext來運行，可以看到fs.readFileSync傳入的是module.id也就是Module定義時候id存儲的是模塊的絕對路徑，讀取到的content是一個字符串，使用Module.wrapper來包裹一下就相當(dāng)于在這個模塊外部又包裹了一個函數(shù)，也就實現(xiàn)了私有作用域。

使用call來執(zhí)行fn函數(shù)，第一個參數(shù)改變運行的this傳入module.exports，后面的參數(shù)就是函數(shù)外面包裹參數(shù)exports, module, Require, __dirname, __filename。/

// 定義擴展名，不同的擴展名，加載方式不同，實現(xiàn)js和json
Module._extensions = {
    '.js'(module) {
        const content = fs.readFileSync(module.id, 'utf8');
        const fnStr = Module.wrapper[0] + content + Module.wrapper[1];
        const fn = vm.runInThisContext(fnStr);
        fn.call(module.exports, module.exports, module, Require,__filename,__dirname);
    },
    '.json'(module) {
        const json = fs.readFileSync(module.id, 'utf8');
        module.exports = JSON.parse(json); // 把文件的結(jié)果放在exports屬性上
    }
}

tryModuleLoad函數(shù)接收的是模塊對象，通過path.extname來獲取模塊的后綴名，然后使用Module._extensions來加載模塊。

// 定義模塊加載方法
function tryModuleLoad(module) {
    // 獲取擴展名
    const extension = path.extname(module.id);
    // 通過后綴加載當(dāng)前模塊
    Module._extensions[extension](module); // 策略模式？？？
}

到此Require加載機制基本就寫完了。Require加載模塊的時候傳入模塊名稱，在Require方法中使用path.resolve(__dirname, modulePath)獲取到文件的絕對路徑。然后通過new Module實例化的方式創(chuàng)建module對象，將模塊的絕對路徑存儲在module的id屬性中，在module中創(chuàng)建exports屬性為一個json對象。

使用tryModuleLoad方法去加載模塊，tryModuleLoad中使用path.extname獲取到文件的擴展名，然后根據(jù)擴展名來執(zhí)行對應(yīng)的模塊加載機制。

最終將加載到的模塊掛載module.exports中。tryModuleLoad執(zhí)行完畢之后module.exports已經(jīng)存在了，直接返回就可以了。

接下來，我們給模塊添加緩存。就是文件加載的時候?qū)⑽募湃刖彺嬷?，再去加載模塊時先看緩存中是否存在，如果存在直接使用，如果不存在再去重新加載，加載之后再放入緩存。

// 定義導(dǎo)入類，參數(shù)為模塊路徑
function Require(modulePath) {
  // 獲取當(dāng)前要加載的絕對路徑
  let absPathname = path.resolve(__dirname, modulePath);
  // 從緩存中讀取，如果存在，直接返回結(jié)果
  if (Module._cache[absPathname]) {
      return Module._cache[absPathname].exports;
  }
  // 創(chuàng)建模塊，新建Module實例
  const module = new Module(absPathname);
  // 添加緩存
  Module._cache[absPathname] = module;
  // 加載當(dāng)前模塊
  tryModuleLoad(module);
  // 返回exports對象
  return module.exports;
}

增加功能：省略模塊后綴名。

自動給模塊添加后綴名，實現(xiàn)省略后綴名加載模塊，其實也就是如果文件沒有后綴名的時候遍歷一下所有的后綴名看一下文件是否存在。

// 定義導(dǎo)入類，參數(shù)為模塊路徑
function Require(modulePath) {
  // 獲取當(dāng)前要加載的絕對路徑
  let absPathname = path.resolve(__dirname, modulePath);
  // 獲取所有后綴名
  const extNames = Object.keys(Module._extensions);
  let index = 0;

  // 存儲原始文件路徑
  const oldPath = absPathname;
  function findExt(absPathname) {
      if (index === extNames.length) {
         return throw new Error('文件不存在');
      }
      try {
          fs.accessSync(absPathname);
          return absPathname;
      } catch(e) {
          const ext = extNames[index++];
          findExt(oldPath + ext);
      }
  }
  
  // 遞歸追加后綴名，判斷文件是否存在
  absPathname = findExt(absPathname);
  // 從緩存中讀取，如果存在，直接返回結(jié)果
  if (Module._cache[absPathname]) {
      return Module._cache[absPathname].exports;
  }
  // 創(chuàng)建模塊，新建Module實例
  const module = new Module(absPathname);
  // 添加緩存
  Module._cache[absPathname] = module;
  // 加載當(dāng)前模塊
  tryModuleLoad(module);
  // 返回exports對象
  return module.exports;
}

源代碼調(diào)試

我們可以通過VSCode 調(diào)試Node.js

步驟

創(chuàng)建文件a.js

module.exports = 'abc'

1.文件test.js

let r = require('./a')

console.log(r)

1.配置debug，本質(zhì)是配置.vscode/launch.json文件，而這個文件的本質(zhì)是能提供多個啟動命令入口選擇。

一些常見參數(shù)如下：

• program控制啟動文件的路徑（即入口文件）
• name下拉菜單中顯示的名稱（該命令對應(yīng)的入口名稱）
• request分為 launch（啟動）和 attach（附加）（進程已經(jīng)啟動）
• skipFiles指定單步調(diào)試跳過的代碼
• runtimeExecutable設(shè)置運行時可執(zhí)行文件，默認是 node，可以設(shè)置成 nodemon，ts-node，npm 等

修改launch.json，skipFiles指定單步調(diào)試跳過的代碼

1. 將test.js 文件中的require方法所在行前面打斷點
2. 執(zhí)行調(diào)試，進入源碼相關(guān)入口方法

梳理代碼步驟

1.首先進入到進入到require方法：Module.prototype.require

2.調(diào)試到Module._load 方法中，該方法返回module.exports，Module._resolveFilename方法返回處理之后的文件地址，將文件改為絕對地址，同時如果文件沒有后綴就加上文件后綴。

3.這里定義了Module類。id為文件名。此類中定義了exports屬性

4.接著調(diào)試到module.load 方法，該方法中使用了策略模式，Module._extensions[extension](this, filename)根據(jù)傳入的文件后綴名不同調(diào)用不同的方法

5.進入到該方法中，看到了核心代碼，讀取傳入的文件地址參數(shù)，拿到該文件中的字符串內(nèi)容，執(zhí)行module._compile

6.此方法中執(zhí)行wrapSafe方法。將字符串前后添加函數(shù)前后綴，并用Node中的vm模塊中的runInthisContext方法執(zhí)行字符串，便直接執(zhí)行到了傳入文件中的console.log代碼行內(nèi)容。

至此，整個Node中實現(xiàn)require方法的整個流程代碼已經(jīng)調(diào)試完畢，通過對源代碼的調(diào)試，可以幫助我們學(xué)習(xí)其實現(xiàn)思路，代碼風(fēng)格及規(guī)范，有助于幫助我們實現(xiàn)工具庫，提升我們的代碼思路，同時我們知道相關(guān)原理，也對我們解決日常開發(fā)工作中遇到的問題提供幫助。

作者：京東物流 喬盼盼

來源：京東云開發(fā)者社區(qū) 自猿其說Tech 轉(zhuǎn)載請注明來源