瞭解Node.js
Node.js是一個基於ChromeV8引擎的JavaScript執行環境,使用了一個事件驅動、非阻塞式I/O模型,讓JavaScript 執行在服務端的開發平臺,它讓JavaScript成為與PHP、Python、Perl、Ruby等服務端語言平起平坐的指令碼語言。Node中增添了很多內建的模組,提供各種各樣的功能,同時也提供許多第三方模組。
模組的問題
為什麼要有模組
複雜的前端專案需要做分層處理,按照功能、業務、元件拆分成模組, 模組化的專案至少有以下優點:
幾種模組化規範
Node中的模組
Node中採用了 CommonJS 規範
實現原理:
Node中會讀取檔案,拿到內容實現模組化, Require方法 同步引用
tips:Node中任何js檔案都是一個模組,每一個檔案都是模組
Node中模組型別
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 執行呢?
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()
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
前面兩種方式,我們一直強調一個概念,那就是變數的汙染
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;
}
原始碼除錯
我們可以透過VSCode 除錯Node.js
步驟
建立檔案a.js
module.exports = 'abc'
let r = require('./a')
console.log(r)
.vscode/launch.json
檔案,而這個檔案的本質是能提供多個啟動命令入口選擇。一些常見引數如下:
program
控制啟動檔案的路徑(即入口檔案)name
下拉選單中顯示的名稱(該命令對應的入口名稱)request
分為 launch(啟動)和 attach(附加)(程序已經啟動)skipFiles
指定單步除錯跳過的程式碼runtimeExecutable
設定執行時可執行檔案,預設是 node,可以設定成 nodemon,ts-node,npm 等
修改launch.json,skipFiles
指定單步除錯跳過的程式碼
梳理程式碼步驟
Module.prototype.require
module.exports
,Module._resolveFilename
方法返回處理之後的檔案地址,將檔案改為絕對地址,同時如果檔案沒有字尾就加上檔案字尾。
Module
類。id
為檔名。此類中定義了exports
屬性
Module._extensions[extension](this, filename)
根據傳入的檔案字尾名不同呼叫不同的方法
module._compile
wrapSafe
方法。將字串前後新增函式前字尾,並用Node
中的vm
模組中的runInthisContext
方法執行字串,便直接執行到了傳入檔案中的console.log
程式碼行內容。
至此,整個Node中實現require方法的整個流程程式碼已經除錯完畢,透過對原始碼的除錯,可以幫助我們學習其實現思路,程式碼風格及規範,有助於幫助我們實現工具庫,提升我們的程式碼思路,同時我們知道相關原理,也對我們解決日常開發工作中遇到的問題提供幫助。