JavaScript 模組在組織程式碼、增強可重複使用性和提高應用程式的可維護性方面發揮著至關重要的作用。廣泛使用的兩個主要模組系統是 CommonJS (CJS) 和 ECMAScript Modules (ESM)。了解它們的差異和能力是專案中有效利用它們的關鍵。
CommonJS 是最初為 Node.js 環境設計的模組系統。它強調模組的簡單性和同步載入。
CommonJS 中的模組使用 module.exports 匯出值、物件或函數。
1。預設匯出/匯入
// logger.js
function log(message) {
console.log(message);
}
module.exports = log; // Default export
// index.js
const log = require('./logger');
log('This is a log message.'); // Output: This is a log message.
2。指定匯出/匯入
// math.js
function add(a, b) {
return a + b;
}
function subtract(a, b) {
return a - b;
}
module.exports = { add, subtract }; // Named exports
// index.js
const { add, subtract } = require('./math');
console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2
ESM，在 ES6 (ES2015) 中引入，是 JavaScript 的標準化模組系統。它支援同步和非同步模組加載，並且在現代瀏覽器和具有某些配置的 Node.js 中原生支援。
ESM 使用匯出語句匯出值、物件或函數。
1。預設匯出/匯入
// utils.mjs (Note the .mjs extension for ESM)
function formatName(name) {
return `Mr./Ms. ${name}`;
}
export default formatName;
// index.mjs
import formatName from './utils.mjs';
console.log(formatName('John')); // Output: Mr./Ms. John
2。命名導出
// operations.mjs
export function multiply(a, b) {
return a * b;
}
export function divide(a, b) {
return a / b;
}
// index.mjs
import { multiply, divide } from './operations.mjs';
console.log(multiply(4, 2)); // Output: 8
console.log(divide(10, 2)); // Output: 5
3。 ECMAScript 模組中的混合匯出樣式
// mixedExports.mjs
function greet(name) {
return `Hello, ${name}!`;
}
export default greet;
export function goodbye(name) {
return `Goodbye, ${name}!`;
}
// index.mjs
import sayHello, { goodbye } from './mixedExports.mjs';
console.log(sayHello('Alice')); // Output: Hello, Alice!
console.log(goodbye('Bob')); // Output: Goodbye, Bob!
在 CommonJS 和 ECMAScript 模組之間進行選擇取決於您的專案環境和要求。雖然 CommonJS 對於 Node.js 後端開發來說非常強大，但 ESM 提供了跨瀏覽器和現代 Node.js 應用程式的互通性。了解這些模組系統使開發人員能夠有效地利用 JavaScript 的模組化功能。
透過利用 CommonJS 或 ESM，開發人員可以增強程式碼組織、提高專案可擴充性並促進 JavaScript 專案中的協作。
以上是JavaScript 中的 CommonJS (CJS) 與 ECMAScript 模組 (ESM)的詳細內容。更多資訊請關注PHP中文網其他相關文章！
