Node.js是一個基於ChromeV8引擎的JavaScript運行環境，使用了一個事件驅動、非阻塞式I/O模型，讓JavaScript 運行在服務端的開發平臺，它讓JavaScript成為與PHP、Python、Perl、Ruby等服務端語言平起平坐的腳本語言。Node中增添了很多內置的模塊，提... ...

瞭解Node.js

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

模塊的問題

為什麼要有模塊

複雜的前端項目需要做分層處理，按照功能、業務、組件拆分成模塊，模塊化的項目至少有以下優點：

便於單元測試
便於同事間協作
抽離公共方法, 開發快捷
按需載入, 性能優秀
高內聚低耦合
防止變數衝突
方便代碼項目維護

幾種模塊化規範

CMD(SeaJS 實現了 CMD)
AMD(RequireJS 實現了 AMD)
UMD(同時支持 AMD 和 CMD)
IIFE （自執行函數）
CommonJS （Node 採用了 CommonJS）
ES Module 規範 (JS 官方的模塊化方案)

Node中的模塊

Node中採用了 CommonJS 規範

實現原理：

Node中會讀取文件，拿到內容實現模塊化， Require方法同步引用

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

Node中模塊類型

內置模塊，屬於核心模塊，無需安裝，在項目中不需要相對路徑引用， Node自身提供。
文件模塊，程式員自己書寫的js文件模塊。
第三方模塊，需要安裝，安裝之後不用加路徑。

Node中內置模塊

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', '..', '/'))

// 根據已經有的路徑來解析絕對路徑， 可以用他來解析配置文件
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 執行呢？

1.eval

eval中的代碼執行時的作用域為當前作用域。它可以訪問到函數中的局部變數。

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()創建函數時，不是引用當前的詞法環境，而是引用全局環境,Function中的表達式使用的變數要麼是傳入的參數要麼是全局的值

Function可以獲取全局變數，所以它還是可能會有變數污染的情況出現

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

前面兩種方式，我們一直強調一個概念，那就是變數的污染

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

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

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

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

Node模塊化的實現

node中是自帶模塊化機制的，每個文件就是一個單獨的模塊，並且它遵循的是CommonJS規範，也就是使用require的方式導入模塊，通過module.export的方式導出模塊。

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

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

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

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

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

實現require模塊載入器

首先導入依賴的模塊path，fs,vm, 並且創建一個Require函數，這個函數接收一個modulePath參數，表示要導入的文件路徑

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

在Require中獲取到模塊的絕對路徑，使用fs載入模塊，這裡讀取模塊內容使用new Module來抽象，使用tryModuleLoad來載入模塊內容，Module和tryModuleLoad稍後實現，Require的返回值應該是模塊的內容，也就是module.exports。

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

Module的實現就是給模塊創建一個exports對象，tryModuleLoad執行的時候將內容加入到exports中，id就是模塊的絕對路徑。

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

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

第二個參數就是函數的結束部分。兩部分都是字元串，使用的時候將他們包裹在模塊的字元串外部就可以了。

// 定義包裹模塊內容的函數
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來包裹一下就相當於在這個模塊外部又包裹了一個函數，也就實現了私有作用域。

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

// 定義擴展名，不同的擴展名，載入方式不同，實現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); // 把文件的結果放在exports屬性上
    }
}

tryModuleLoad函數接收的是模塊對象，通過path.extname來獲取模塊的尾碼名，然後使用Module._extensions來載入模塊。

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

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

使用tryModuleLoad方法去載入模塊，tryModuleLoad中使用path.extname獲取到文件的擴展名，然後根據擴展名來執行對應的模塊載入機制。

最終將載入到的模塊掛載module.exports中。tryModuleLoad執行完畢之後module.exports已經存在了，直接返回就可以了。

接下來，我們給模塊添加緩存。就是文件載入的時候將文件放入緩存中，再去載入模塊時先看緩存中是否存在，如果存在直接使用，如果不存在再去重新載入，載入之後再放入緩存。

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

增加功能：省略模塊尾碼名。

自動給模塊添加尾碼名，實現省略尾碼名載入模塊，其實也就是如果文件沒有尾碼名的時候遍歷一下所有的尾碼名看一下文件是否存在。

// 定義導入類，參數為模塊路徑
function Require(modulePath) {
  // 獲取當前要載入的絕對路徑
  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);
  // 從緩存中讀取，如果存在，直接返回結果
  if (Module._cache[absPathname]) {
      return Module._cache[absPathname].exports;
  }
  // 創建模塊，新建Module實例
  const module = new Module(absPathname);
  // 添加緩存
  Module._cache[absPathname] = module;
  // 載入當前模塊
  tryModuleLoad(module);
  // 返回exports對象
  return module.exports;
}