日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當前位置:首頁 > 科技  > 軟件

前端技術探秘-Node.js的CommonJS規范實現原理

來源: 責編: 時間:2023-12-08 09:15:58 269觀看
導讀了解Node.jsNode.js是一個基于ChromeV8引擎的JavaScript運行環境,使用了一個事件驅動、非阻塞式I/O模型,讓JavaScript 運行在服務端的開發平臺,它讓JavaScript成為與PHP、Python、Perl、Ruby等服務端語言平起平坐的腳本

了解Node.js

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

模塊的問題

為什么要有模塊

復雜的前端項目需要做分層處理,按照功能、業務、組件拆分成模塊, 模塊化的項目至少有以下優點:urV28資訊網——每日最新資訊28at.com

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

幾種模塊化規范

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

Node中的模塊

Node中采用了 CommonJS 規范urV28資訊網——每日最新資訊28at.com

實現原理:urV28資訊網——每日最新資訊28at.com

Node中會讀取文件,拿到內容實現模塊化, Require方法 同步引用urV28資訊網——每日最新資訊28at.com

tips:Node中任何js文件都是一個模塊,每一個文件都是模塊urV28資訊網——每日最新資訊28at.com

Node中模塊類型

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

Node中內置模塊

fs filesystem

操作文件都需要用到這個模塊urV28資訊網——每日最新資訊28at.com

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 執行呢?urV28資訊網——每日最新資訊28at.com

1.evalurV28資訊網——每日最新資訊28at.com

eval中的代碼執行時的作用域為當前作用域。它可以訪問到函數中的局部變量。urV28資訊網——每日最新資訊28at.com

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 FunctionurV28資訊網——每日最新資訊28at.com

new Function()創建函數時,不是引用當前的詞法環境,而是引用全局環境,Function中的表達式使用的變量要么是傳入的參數要么是全局的值urV28資訊網——每日最新資訊28at.com

Function可以獲取全局變量,所以它還是可能會有變量污染的情況出現urV28資訊網——每日最新資訊28at.com

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.vmurV28資訊網——每日最新資訊28at.com

前面兩種方式,我們一直強調一個概念,那就是變量的污染urV28資訊網——每日最新資訊28at.com

VM的特點就是不受環境的影響,也可以說他就是一個沙箱環境urV28資訊網——每日最新資訊28at.com

在Node中全局變量是在多個模塊下共享的,所以盡量不要在global中定義屬性urV28資訊網——每日最新資訊28at.com

所以,vm.runInThisContext可以訪問到global上的全局變量,但是訪問不到自定義的變量。而vm.runInNewContext訪問不到global,也訪問不到自定義變量,他存在于一個全新的執行上下文urV28資訊網——每日最新資訊28at.com

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

Node模塊化的實現

node中是自帶模塊化機制的,每個文件就是一個單獨的模塊,并且它遵循的是CommonJS規范,也就是使用require的方式導入模塊,通過module.export的方式導出模塊。urV28資訊網——每日最新資訊28at.com

node模塊的運行機制也很簡單,其實就是在每一個模塊外層包裹了一層函數,有了函數的包裹就可以實現代碼間的作用域隔離。urV28資訊網——每日最新資訊28at.com

我們先在一個js文件中直接打印arguments,得到的結果如下圖所示,我們先記住這些參數。urV28資訊網——每日最新資訊28at.com

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

urV28資訊網——每日最新資訊28at.com

Node中通過modules.export 導出,require 引入。其中require依賴node中的fs模塊來加載模塊文件,通過fs.readFile讀取到的是一個字符串。urV28資訊網——每日最新資訊28at.com

在javascrpt中可以通過eval或者new Function的方式來將一個字符串轉換成js代碼來運行。但是前面提到過,他們都有一個致命的問題,就是變量的污染。urV28資訊網——每日最新資訊28at.com

實現require模塊加載器

首先導入依賴的模塊path,fs,vm, 并且創建一個Require函數,這個函數接收一個modulePath參數,表示要導入的文件路徑urV28資訊網——每日最新資訊28at.com

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。urV28資訊網——每日最新資訊28at.com

// 定義導入類,參數為模塊路徑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就是模塊的絕對路徑。urV28資訊網——每日最新資訊28at.com

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

node模塊是運行在一個函數中,這里給Module掛載靜態屬性wrapper,里面定義一下這個函數的字符串,wrapper是一個數組,數組的第一個元素就是函數的參數部分,其中有exports,module,Require,__dirname,__filename, 都是模塊中常用的全局變量.urV28資訊網——每日最新資訊28at.com

第二個參數就是函數的結束部分。兩部分都是字符串,使用的時候將他們包裹在模塊的字符串外部就可以了。urV28資訊網——每日最新資訊28at.com

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

_extensions用于針對不同的模塊擴展名使用不同的加載方式,比如JSON和javascript加載方式肯定是不同的。JSON使用JSON.parse來運行。urV28資訊網——每日最新資訊28at.com

javascript使用vm.runInThisContext來運行,可以看到fs.readFileSync傳入的是module.id也就是Module定義時候id存儲的是模塊的絕對路徑,讀取到的content是一個字符串,使用Module.wrapper來包裹一下就相當于在這個模塊外部又包裹了一個函數,也就實現了私有作用域。urV28資訊網——每日最新資訊28at.com

使用call來執行fn函數,第一個參數改變運行的this傳入module.exports,后面的參數就是函數外面包裹參數exports, module, Require, __dirname, __filename。/urV28資訊網——每日最新資訊28at.com

// 定義擴展名,不同的擴展名,加載方式不同,實現js和jsonModule._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來加載模塊。urV28資訊網——每日最新資訊28at.com

// 定義模塊加載方法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對象。urV28資訊網——每日最新資訊28at.com

使用tryModuleLoad方法去加載模塊,tryModuleLoad中使用path.extname獲取到文件的擴展名,然后根據擴展名來執行對應的模塊加載機制。urV28資訊網——每日最新資訊28at.com

最終將加載到的模塊掛載module.exports中。tryModuleLoad執行完畢之后module.exports已經存在了,直接返回就可以了。urV28資訊網——每日最新資訊28at.com

接下來,我們給模塊添加緩存。就是文件加載的時候將文件放入緩存中,再去加載模塊時先看緩存中是否存在,如果存在直接使用,如果不存在再去重新加載,加載之后再放入緩存。urV28資訊網——每日最新資訊28at.com

// 定義導入類,參數為模塊路徑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;}

增加功能:省略模塊后綴名。urV28資訊網——每日最新資訊28at.com

自動給模塊添加后綴名,實現省略后綴名加載模塊,其實也就是如果文件沒有后綴名的時候遍歷一下所有的后綴名看一下文件是否存在。urV28資訊網——每日最新資訊28at.com

// 定義導入類,參數為模塊路徑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.jsurV28資訊網——每日最新資訊28at.com

步驟

創建文件a.jsurV28資訊網——每日最新資訊28at.com

module.exports = 'abc'

1.文件test.jsurV28資訊網——每日最新資訊28at.com

let r = require('./a')console.log(r)

1.配置debug,本質是配置.vscode/launch.json文件,而這個文件的本質是能提供多個啟動命令入口選擇。urV28資訊網——每日最新資訊28at.com

一些常見參數如下:urV28資訊網——每日最新資訊28at.com

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

修改launch.json,skipFiles指定單步調試跳過的代碼urV28資訊網——每日最新資訊28at.com

urV28資訊網——每日最新資訊28at.com

  1. 將test.js 文件中的require方法所在行前面打斷點
  2. 執行調試,進入源碼相關入口方法

梳理代碼步驟

1.首先進入到進入到require方法:Module.prototype.requireurV28資訊網——每日最新資訊28at.com

urV28資訊網——每日最新資訊28at.com

urV28資訊網——每日最新資訊28at.com

2.調試到Module._load 方法中,該方法返回module.exports,Module._resolveFilename方法返回處理之后的文件地址,將文件改為絕對地址,同時如果文件沒有后綴就加上文件后綴。urV28資訊網——每日最新資訊28at.com

urV28資訊網——每日最新資訊28at.com

3.這里定義了Module類。id為文件名。此類中定義了exports屬性urV28資訊網——每日最新資訊28at.com

urV28資訊網——每日最新資訊28at.com

4.接著調試到module.load 方法,該方法中使用了策略模式,Module._extensions[extension](this, filename)根據傳入的文件后綴名不同調用不同的方法urV28資訊網——每日最新資訊28at.com

urV28資訊網——每日最新資訊28at.com

5.進入到該方法中,看到了核心代碼,讀取傳入的文件地址參數,拿到該文件中的字符串內容,執行module._compileurV28資訊網——每日最新資訊28at.com

urV28資訊網——每日最新資訊28at.com

6.此方法中執行wrapSafe方法。將字符串前后添加函數前后綴,并用Node中的vm模塊中的runInthisContext方法執行字符串,便直接執行到了傳入文件中的console.log代碼行內容。urV28資訊網——每日最新資訊28at.com

urV28資訊網——每日最新資訊28at.com

urV28資訊網——每日最新資訊28at.com

至此,整個Node中實現require方法的整個流程代碼已經調試完畢,通過對源代碼的調試,可以幫助我們學習其實現思路,代碼風格及規范,有助于幫助我們實現工具庫,提升我們的代碼思路,同時我們知道相關原理,也對我們解決日常開發工作中遇到的問題提供幫助。urV28資訊網——每日最新資訊28at.com

作者:京東物流 喬盼盼urV28資訊網——每日最新資訊28at.com

來源:京東云開發者社區 自猿其說Tech 轉載請注明來源urV28資訊網——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-39539-0.html前端技術探秘-Node.js的CommonJS規范實現原理

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 這些Java并發容器,你都了解嗎?

下一篇: Nacos神秘面紗揭曉:微服務時代的配置之王

標簽:
  • 熱門焦點
Top 主站蜘蛛池模板: 和平县| 宁波市| 长乐市| 隆尧县| 卓尼县| 星座| 孙吴县| 新兴县| 治县。| 林州市| 长海县| 泸水县| 瑞金市| 汾阳市| 剑阁县| 奉贤区| 衡东县| 凤城市| 陵川县| 钟祥市| 龙陵县| 中宁县| 文登市| 虞城县| 宁南县| 班戈县| 马尔康县| 黔西县| 洛浦县| 元谋县| 伊吾县| 明溪县| 淮北市| 女性| 平凉市| 上思县| 桃江县| 瑞丽市| 扎鲁特旗| 绵竹市| 淮南市|