對標蘋果的靈動島 華為帶來實況窗功能
繼蘋果的靈動島之后，華為也在今天正式推出了“實況窗”功能。據今天鴻蒙OS 4.0的現場演示顯示，華為的實況窗可以更高效的展現出實時通知，比如鎖屏上就能看到外賣、打車、銀行
Node.js是一個基于ChromeV8引擎的JavaScript運行環境，使用了一個事件驅動、非阻塞式I/O模型，讓JavaScript 運行在服務端的開發平臺，它讓JavaScript成為與PHP、Python、Perl、Ruby等服務端語言平起平坐的腳本語言。Node中增添了很多內置的模塊，提供各種各樣的功能，同時也提供許多第三方模塊。
復雜的前端項目需要做分層處理，按照功能、業務、組件拆分成模塊， 模塊化的項目至少有以下優點：
Node中采用了 CommonJS 規范
實現原理：
Node中會讀取文件，拿到內容實現模塊化， Require方法 同步引用
tips：Node中任何js文件都是一個模塊，每一個文件都是模塊
操作文件都需要用到這個模塊
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);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)); // 解析父目錄字符串如何能變成 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)")() // 1003.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) // 1vm.runInNewContext('console.log(a)')console.log(a) // a is not definednode中是自帶模塊化機制的，每個文件就是一個單獨的模塊，并且它遵循的是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代碼來運行。但是前面提到過，他們都有一個致命的問題，就是變量的污染。
首先導入依賴的模塊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和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來加載模塊。
// 定義模塊加載方法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'1.文件test.js
let r = require('./a')console.log(r)1.配置debug，本質是配置.vscode/launch.json文件，而這個文件的本質是能提供多個啟動命令入口選擇。
一些常見參數如下：
修改launch.json，skipFiles指定單步調試跳過的代碼
1.首先進入到進入到require方法：Module.prototype.require
2.調試到Module._load 方法中，該方法返回module.exports，Module._resolveFilename方法返回處理之后的文件地址，將文件改為絕對地址，同時如果文件沒有后綴就加上文件后綴。
3.這里定義了Module類。id為文件名。此類中定義了exports屬性
4.接著調試到module.load 方法，該方法中使用了策略模式，Module._extensions[extension](this, filename)根據傳入的文件后綴名不同調用不同的方法
5.進入到該方法中，看到了核心代碼，讀取傳入的文件地址參數，拿到該文件中的字符串內容，執行module._compile
6.此方法中執行wrapSafe方法。將字符串前后添加函數前后綴，并用Node中的vm模塊中的runInthisContext方法執行字符串，便直接執行到了傳入文件中的console.log代碼行內容。
至此，整個Node中實現require方法的整個流程代碼已經調試完畢，通過對源代碼的調試，可以幫助我們學習其實現思路，代碼風格及規范，有助于幫助我們實現工具庫，提升我們的代碼思路，同時我們知道相關原理，也對我們解決日常開發工作中遇到的問題提供幫助。
作者：京東物流 喬盼盼
來源：京東云開發者社區 自猿其說Tech 轉載請注明來源
本文鏈接：http://www.www897cc.com/showinfo-26-39539-0.html前端技術探秘-Node.js的CommonJS規范實現原理
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 這些Java并發容器，你都了解嗎？
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號