隨著 JavaScript 開發(fā)變得越來越廣泛，命名空間和依賴關(guān)系變得越來越難以處理。人們已經(jīng)開發(fā)出不同的解決方案以模塊系統(tǒng)的形式來解決這個問題。
CommonJS(CJS)
CommonJS 是一種同步加載模塊的規(guī)范，主要用于服務(wù)器端的 Node.js 環(huán)境。
// 模塊導(dǎo)出module.exports= {// 模塊內(nèi)容};// 模塊導(dǎo)入constmodule=require('module');
top：CommonJS?加載的是一個對象（即module.exports屬性），該對象只有在腳本運行完才會生成。
AMD（Asynchronous Module Definition）
AMD?是一種_異步_加載模塊的規(guī)范，主要用于瀏覽器端的 JavaScript 開發(fā)。它允許模塊在加載完成后立即執(zhí)行，而不會阻塞頁面加載。
// 模塊定義define(['dependency1','dependency2'],function(dependency1, dependency2) {// 模塊內(nèi)容return{// 模塊導(dǎo)出內(nèi)容};});// 模塊加載require(['module'],function(module) {// 模塊加載完成后執(zhí)行的邏輯});
UMD（Universal Module Definition）
UMD?是一種通用的模塊定義格式，旨在兼容?CommonJS、AMD?以及全局變量導(dǎo)出的方式。
實現(xiàn)原理為：先判斷是否支持node.js的模塊，存在就使用node.js；再判斷是否支持AMD（define是否存在），存在則使用*
*AMD的方式加載。這就是所謂的UMD**。
(function(root, factory) {if(typeofdefine ==='function'&& define.amd) {// AMDdefine(['exports','module'], factory);? }elseif(typeofexports==='object'&&typeofmodule==='object') {// CommonJSfactory(exports,module);? }else{// 瀏覽器環(huán)境下暴露到全局變量factory((root.myModule= {}), root.myModule);? }})(this,function(exports,module) {// 模塊內(nèi)容});
UMD?實質(zhì)上創(chuàng)建了一種使用兩者之一的方法，同時還支持全局變量定義。因此，UMD?模塊能夠在客戶端和服務(wù)器上工作。
ESM（ES Module）
ESM?是?ECMAScript?官方提供的模塊標準，支持異步加載，具有靜態(tài)導(dǎo)入和導(dǎo)出，使得代碼更具可靠性和可預(yù)測性。
// 模塊導(dǎo)出exportconstmodule= {// 模塊內(nèi)容};// 模塊導(dǎo)入import{module}from'module';
概括
不同的模塊規(guī)范各有優(yōu)劣，選擇合適的規(guī)范取決于項目的需求和目標平臺。
CJS 為同步加載，主要用于服務(wù)器端編程，因為在服務(wù)器端加載速度不太重要，而且同步加載更容易理解和管理。
AMD 為異步加載，適用于瀏覽器環(huán)境中的異步模塊加載，尤其是在 Web 應(yīng)用中采用模塊化開發(fā)時使用。
UMD 為通用形，通常用作 ESM 不起作用時的后備方案，適用于同時在瀏覽器和 Node.js 環(huán)境中使用的代碼，使得代碼具有更大的通用性。
ESM 適用于現(xiàn)代瀏覽器以及支持 ES6 模塊的 Node.js 版本，使得代碼更具可維護性和可移植性。
散熱風(fēng)扇https://www.uv-semi.com/
深圳網(wǎng)站建設(shè)www.sz886.com
