前端模塊化：CommonJS，AMD，CMD，ES6 Module

模塊化開發(fā)能提高代碼復用率，方便代碼管理。

CommonJS

主要用于服務(wù)器端，比如Node
用module.exports定義當前模塊對外輸出的接口，用require加載模塊。
require參數(shù)：
引用核心模塊時，不需要寫路徑，直接寫需引用的模塊名即可
引用自定義的模塊時，參數(shù)需寫路徑，可省略.js

AMD

主要用于瀏覽器環(huán)境

CMD

主要用于瀏覽器環(huán)境

ES6 Module

模塊功能主要由兩個命令構(gòu)成：export和import。export命令用于規(guī)定模塊的對外接口，import命令用于輸入其他模塊提供的功能。

模塊化使用對比

CommonJS 和 ES6 Module

  1. CommonJS 模塊輸出的是值的拷貝，ES6 模塊輸出的是值的引用
    • CommonJS 模塊輸出的是值的拷貝，也就是說，一旦輸出一個值，模塊內(nèi)部的變化就影響不到這個值。
    • ES6 模塊輸出的是值的引用，模塊里面的內(nèi)容如果發(fā)生變化，輸出的內(nèi)容也會隨之改變。
  2. CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口
    • 運行時加載：CommonJS 模塊就是對象；即在輸入時是先加載整個模塊，生成一個對象，然后再從這個對象上面讀取方法，這種加載稱為“運行時加載”。
    • 編譯時加載：ES6 模塊不是對象，而是通過 export 命令顯式指定輸出的代碼，import時采用靜態(tài)命令的形式。即在import時可以指定加載某個輸出值，而不是加載整個模塊，這種加載稱為“編譯時加載”。

AMD 和 CMD

AMD：在最開始聲明依賴模塊，加載模塊后馬上運行模塊化內(nèi)代碼，不管回調(diào)函數(shù)是否要用到相關(guān)模塊
CMD：在需要時聲明依賴模塊、加載模塊
參考：
https://juejin.im/post/5aaa37c8f265da23945f365c#comment

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容