Apakah ESM modular bahagian hadapan?

Apakah contoh kod bahagian hadapan diperlukan

Dalam pembangunan bahagian hadapan, ESM merujuk kepada Modul ECMAScript, iaitu kaedah pembangunan modular berdasarkan spesifikasi ECMAScript. ESM membawa banyak faedah, seperti organisasi kod yang lebih baik, pengasingan antara modul dan kebolehgunaan semula. Artikel ini akan memperkenalkan konsep asas dan penggunaan ESM dan menyediakan beberapa contoh kod khusus.

1. Konsep asas ESM
   Dalam ESM, kita boleh membahagikan kod kepada berbilang modul, dan setiap modul mendedahkan beberapa antara muka untuk digunakan oleh modul lain. Setiap modul boleh memperkenalkan kebergantungan yang diperlukan melalui pernyataan import tanpa perlu risau tentang konflik dengan pembolehubah global. Pada masa yang sama, modul juga boleh mendedahkan antara muka mereka kepada modul lain melalui pernyataan eksport.
2. Penggunaan ESM
   2.1 Sintaks asas
   Untuk menggunakan ESM, anda perlu menggunakan teg skrip dalam fail HTML untuk memuatkan modul dan menentukan jenis sebagai "modul". Contohnya:

<script type="module" src="main.js"></script>

Dalam fail modul, kami boleh menggunakan pernyataan import untuk memperkenalkan antara muka modul lain, dan menggunakan pernyataan eksport untuk mendedahkan antara muka kami sendiri kepada modul lain. Sebagai contoh, kami mempunyai dua fail modul:

// module1.js
export function sayHello() {
  console.log("Hello, module1!");
}

// module2.js
import { sayHello } from "./module1.js";

sayHello();

2.2 Antara Muka Eksport dan Import
Dalam ESM, anda boleh menggunakan pernyataan eksport untuk mengeksport pembolehubah, fungsi atau kelas dalam modul ke modul lain. Contohnya:

// module1.js
export const PI = 3.14;

export function square(x) {
  return x * x;
}

Modul lain boleh menggunakan pernyataan import untuk mengimport antara muka dalam module1.js dan menggunakannya. Contohnya:

// module2.js
import { PI, square } from "./module1.js";

console.log(PI); // 输出3.14
console.log(square(2)); // 输出4

2.3 Eksport lalai dan import lalai
Selain mengeksport antara muka yang dinamakan, ESM juga menyokong eksport lalai dan import lalai. Modul hanya boleh mempunyai satu eksport lalai dan eksport lalai tidak perlu dibalut dengan {}. Import lalai boleh menggunakan mana-mana nama pembolehubah untuk menerima. Contohnya:

// module1.js
export default function sayGoodbye() {
  console.log("Goodbye!");
}

// module2.js
import goodbye from "./module1.js";

goodbye(); // 输出Goodbye!

3. Perbezaan antara ESM dan CommonJS (module.exports/require)
   ESM dan CommonJS ialah dua kaedah pembangunan modular yang berbeza. ESM menggunakan import dan eksport statik, dan kebergantungan modul ditentukan pada masa penyusunan, manakala CommonJS menggunakan import dan eksport dinamik, dan kebergantungan modul hanya boleh ditentukan pada masa jalan.

Kelebihan ESM ialah kebergantungan modul lebih jelas dan tidak perlu menggunakan pembolehubah global untuk mengawal susunan pemuatan dan pelaksanaan modul. Kelebihan CommonJS ialah ia boleh mengira kebergantungan modul secara dinamik pada masa jalan, memberikannya fleksibiliti yang lebih besar.

Berikut ialah contoh mencampurkan ESM dan CommonJS:

// module1.js (ESM)
export const PI = 3.14;

// module2.js (CommonJS)
const { PI } = require("./module1.js");
console.log(PI); // 输出3.14

Ringkasan:
ESM ialah kaedah pembangunan modular yang biasa digunakan dalam pembangunan bahagian hadapan Ia menguruskan hubungan rujukan antara modul melalui import dan eksport statik. Dalam ESM, modul boleh merujuk satu sama lain dan menggunakan semula kod, dan tidak perlu risau tentang pencemaran pembolehubah global. Dalam pembangunan sebenar, kita boleh memisahkan kod kompleks mengikut idea modular untuk meningkatkan kebolehselenggaraan dan kebolehbacaan kod.

Di atas adalah pengenalan kepada konsep asas dan penggunaan ESM Saya berharap melalui pengenalan artikel ini, pembaca dapat memahami ESM dan dapat mengaplikasikan teknologi ESM dalam pembangunan sebenar.

Atas ialah kandungan terperinci Apakah ESM modular bahagian hadapan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!