https://blog.csdn.net/crystal6918/article/details/74906757/
CommonJS
?CommonJS就是為JS的表現(xiàn)來(lái)制定規(guī)范勋磕,因?yàn)閖s沒(méi)有模塊的功能所以CommonJS應(yīng)運(yùn)而生,它希望js可以在任何地方運(yùn)行敢靡,不只是瀏覽器中挂滓。
CommonJS是nodejs也就是服務(wù)器端廣泛使用的模塊化機(jī)制。?
該規(guī)范的主要內(nèi)容是啸胧,模塊必須通過(guò)module.exports 導(dǎo)出對(duì)外的變量或接口赶站,通過(guò) require() 來(lái)導(dǎo)入其他模塊的輸出到當(dāng)前模塊作用域中。
根據(jù)這個(gè)規(guī)范纺念,每個(gè)文件就是一個(gè)模塊贝椿,有自己的作用域,文件中的變量陷谱、函數(shù)烙博、類(lèi)等都是對(duì)其他文件不可見(jiàn)的。
如果想在多個(gè)文件分享變量,必須定義為global對(duì)象的屬性渣窜。(不推薦)
定義模塊
在每個(gè)模塊內(nèi)部铺根,module變量代表當(dāng)前模塊。它的exports屬性是對(duì)外的接口乔宿,將模塊的接口暴露出去夷都。其他文件加載該模塊,實(shí)際上就是讀取module.exports變量予颤。
var x =5;
varaddX =function(value) {returnvalue + x;};
module.exports.x = x;
module.exports.addX = addX;? ? ? ? ? ? ?
定義模塊
require方法用于加載模塊囤官,后綴名默認(rèn)為.js
varapp =require('./app.js');
根據(jù)參數(shù)的不同格式,require命令去不同路徑尋找模塊文件蛤虐。
如果參數(shù)字符串以“/”開(kāi)頭党饮,則表示加載的是一個(gè)位于絕對(duì)路徑的模塊文件。
如果參數(shù)字符串以“./”開(kāi)頭驳庭,則表示加載的是一個(gè)位于相對(duì)路徑的模塊文件
如果參數(shù)字符串不以“./“或”/“開(kāi)頭刑顺,則表示加載的是一個(gè)默認(rèn)提供的核心模塊(node核心模塊,或者通過(guò)全局安裝或局部安裝在node_modules目錄中的模塊)
AMD
AMD(異步模塊定義)是為瀏覽器環(huán)境設(shè)計(jì)的饲常,因?yàn)?CommonJS 模塊系統(tǒng)是同步加載的蹲堂,當(dāng)前瀏覽器環(huán)境還沒(méi)有準(zhǔn)備好同步加載模塊的條件。
requirejs即為遵循AMD規(guī)范的模塊化工具贝淤。?
RequireJS的基本思想是柒竞,通過(guò)define方法,將代碼定義為模塊播聪;通過(guò)require方法朽基,實(shí)現(xiàn)代碼的模塊加載。
ES6 Modules
ES6正式提出了內(nèi)置的模塊化語(yǔ)法离陶,我們?cè)跒g覽器端無(wú)需額外引入requirejs來(lái)進(jìn)行模塊化稼虎。
ES6中的模塊有以下特點(diǎn):
模塊自動(dòng)運(yùn)行在嚴(yán)格模式下
在模塊的頂級(jí)作用域創(chuàng)建的變量,不會(huì)被自動(dòng)添加到共享的全局作用域招刨,它們只會(huì)在模塊頂級(jí)作用域的內(nèi)部存在霎俩;
模塊頂級(jí)作用域的 this 值為 undefined
對(duì)于需要讓模塊外部代碼訪問(wèn)的內(nèi)容,模塊必須導(dǎo)出它們
定義模塊
使用export關(guān)鍵字將任意變量沉眶、函數(shù)或者類(lèi)公開(kāi)給其他模塊打却。
重命名模塊
導(dǎo)出默認(rèn)值
模塊的默認(rèn)值是使用?default 關(guān)鍵字所指定的單個(gè)變量学密、函數(shù)或類(lèi),而你在每個(gè)模塊中只能設(shè)置一個(gè)默認(rèn)導(dǎo)出传藏。