模塊化在JavaScript中指的是將代碼拆分成獨立且可復用的部分，以解決命名沖突和依賴混亂問題，提高可維護性和協作效率。具體方式包括：1. 按功能劃分模塊，如auth.JS處理登錄、api.js調用接口、utils.js存放工具函數；2. 避免模塊過大，超過幾百行應考慮進一步拆分；3. 合理使用默認導出和具名導出，前者適合導出一個類或對象，后者適合多個方法或變量；4. 配合打包工具如webpack或rollup，在開發時寫模塊化代碼，上線時打包成單個或多個文件；5. 根據項目類型選擇模塊系統：前端項目優先選es6模塊化（使用import/export，需type=”module”），node.js項目使用commonjs（使用require/module.exports），老舊項目可考慮amd/cmd但不推薦新項目使用。
模塊化在JS中，其實就是把代碼拆分成獨立、可復用的部分。這種做法能提高代碼的可維護性和協作效率，尤其在大型項目中非常關鍵。
什么是模塊化？
簡單說，模塊化就是將一個大程序拆成多個小文件（或模塊），每個模塊負責一部分功能。它們之間可以相互引用，但又各自獨立，互不影響。
比如：你寫一個工具函數庫，像utils.js，里面放一些通用的方法，其他文件需要用到這些方法時，只需要“引入”這個模塊就行。
模塊化的出現，解決了傳統JS開發中命名沖突、依賴混亂等問題。
JS模塊化的實現方式有哪些？
現在常見的模塊化方案主要有以下幾種：
- ES6模塊化（ESM）
- CommonJS
- AMD / CMD（已逐漸淘汰）
目前主流是前兩種，我們重點看下ES6和CommonJS的區別與使用方式。
ES6模塊化（推薦）
這是原生支持的方式，語法簡潔清晰。
特點：
- 使用import導入
- 使用export導出
- 靜態加載，適合現代瀏覽器和打包工具（如Webpack、Vite）
示例：
// utils.js export function sayHello() { console.log('Hello'); } // main.js import { sayHello } from './utils.js'; sayHello();
需要注意的是，在html中引入ES6模塊時，需要加上type=”module”：
<script type="module" src="main.js"></script>
CommonJS
常見于Node.js環境中。
特點：
- 使用require()導入
- 使用module.exports導出
- 動態加載，適合服務器端
示例：
// utils.js exports.sayHello = function () { console.log('Hello'); }; // 或者 module.exports = { ... } // main.js const utils = require('./utils'); utils.sayHello();
如果你在Node.js環境下開發后端或者構建工具，基本都會用到CommonJS。
模塊化在實際開發中的應用建議
- 按功能劃分模塊
- 比如一個項目里有auth.js處理登錄、api.js統一調用接口、utils.js放工具函數等。
- 避免模塊過大
- 如果一個模塊超過幾百行，考慮是否可以進一步拆分。
- 合理使用默認導出和具名導出
- 默認導出適合只導出一個類或對象；具名導出適合導出多個方法或變量。
- 配合打包工具使用
- 開發時寫模塊化代碼，上線時通過Webpack、Rollup等工具打包成一個或幾個文件。
不同模塊系統如何選擇？
- 前端項目 + 現代瀏覽器 → 優先選ES6模塊化
- Node.js項目 → 用CommonJS
- 老舊項目/兼容性要求高 → 可能需要用AMD/CMD（但不推薦新項目使用）
另外，ES6模塊在Node.js中也支持了，不過要用.mjs擴展名或設置type: “module”。
基本上就這些。模塊化本身不復雜，但在項目結構設計上容易忽略細節，比如模塊職責不清、依賴混亂等。只要保持清晰的邏輯劃分，就能寫出更易維護的代碼。
