CommonJS (CJS) lwn Modul ECMAScript (ESM) dalam JavaScript

Modul JavaScript memainkan peranan penting dalam menyusun kod, meningkatkan kebolehgunaan semula dan meningkatkan kebolehselenggaraan aplikasi. Dua sistem modul utama yang digunakan secara meluas ialah CommonJS (CJS) dan ECMAScript Modules (ESM). Memahami perbezaan dan keupayaan mereka adalah kunci untuk memanfaatkannya dengan berkesan dalam projek anda.

---

CommonJS (CJS)

CommonJS ialah sistem modul yang direka bentuk asalnya untuk persekitaran Node.js. Ia menekankan kesederhanaan dan pemuatan segerak modul.

Modul Pengeksport/Pengimportan CommonJS

Modul dalam CommonJS menggunakan module.exports untuk mengeksport nilai, objek atau fungsi.

1. Eksport/Import Lalai

// 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. Dinamakan Eksport/Import

// 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

---

Modul ECMAScript (ESM)

ESM, yang diperkenalkan dalam ES6 (ES2015), ialah sistem modul piawai untuk JavaScript. Ia menyokong pemuatan modul segerak dan tak segerak serta disokong secara asli dalam penyemak imbas moden dan dalam Node.js dengan konfigurasi tertentu.

Modul Pengeksport ECMAScript

ESM menggunakan pernyataan eksport untuk mengeksport nilai, objek atau fungsi.

1. Eksport/Import Lalai

// 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. Eksport Dinamakan

// 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. Gaya Eksport Campuran dalam Modul 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!

---

Perbezaan Utama antara CommonJS dan ESM

• Syntax: Penggunaan CommonJS require() dan module.exports, manakala ESM menggunakan pernyataan import dan eksport.
• Memuatkan: Modul CommonJS dimuatkan secara serentak, manakala ESM menyokong pemuatan segerak dan tak segerak.
• Persekitaran: CommonJS digunakan terutamanya dalam Node.js, manakala ESM disokong secara asli dalam penyemak imbas dan boleh digunakan dalam Node.js dengan konfigurasi khusus (--experimental-modules flag atau sambungan fail .mjs).

Keserasian dan Penggunaan

• Node.js: CommonJS kekal berleluasa kerana sokongan dan kesederhanaannya yang telah lama wujud dalam persekitaran Node.js.
• Pelayar: ESM semakin popular apabila pelayar semakin menyokongnya secara asli, menawarkan prestasi yang lebih baik dan pemuatan kod modular.

---

Kesimpulan

Memilih antara Modul CommonJS dan ECMAScript bergantung pada persekitaran dan keperluan projek anda. Walaupun CommonJS teguh untuk pembangunan backend Node.js, ESM menawarkan kesalingoperasian merentas pelayar dan aplikasi Node.js moden. Memahami sistem modul ini melengkapkan pembangun untuk memanfaatkan keupayaan modular JavaScript dengan berkesan.

Dengan memanfaatkan CommonJS atau ESM, pembangun boleh meningkatkan organisasi kod, meningkatkan kebolehskalaan projek dan memudahkan kerjasama dalam projek JavaScript.

Atas ialah kandungan terperinci CommonJS (CJS) lwn Modul ECMAScript (ESM) dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!