Memahami Modul JavaScript dan Sistem Import/Eksport

Modul dan Import/Eksport dalam JavaScript

Dalam JavaScript, modul membolehkan anda memecahkan kod anda kepada kepingan yang lebih kecil, boleh diguna semula, menambah baik organisasi, kebolehselenggaraan dan kebolehbacaan. Modul adalah penting untuk mencipta aplikasi berskala, terutamanya apabila pangkalan kod semakin besar. Dengan pengenalan ES6 (ECMAScript 2015), JavaScript memperoleh sistem modul asli yang membolehkan anda mengimport dan mengeksport kod antara fail yang berbeza.

Memahami Modul dalam JavaScript

Satu modul pada asasnya ialah sekeping kod yang disimpan dalam failnya sendiri. Kod ini boleh mentakrifkan pembolehubah, fungsi, kelas atau sebarang binaan lain yang anda mahu sediakan untuk digunakan di bahagian lain aplikasi.

Mengeksport daripada Modul

Untuk menjadikan pembolehubah, fungsi atau kelas daripada satu fail tersedia dalam fail lain, anda menggunakan kata kunci eksport. Terdapat dua cara untuk mengeksport daripada modul dalam JavaScript: eksport bernama dan eksport lalai.

1. Eksport Dinamakan

Eksport bernama membolehkan anda mengeksport berbilang item (pembolehubah, fungsi, dll.) daripada modul. Anda mengeksport mereka dengan menyatakan nama mereka.

// math.js (Module File)
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

2. Eksport Lalai

Satu eksport lalai membolehkan anda mengeksport satu nilai, yang boleh menjadi fungsi, kelas atau objek. Eksport lalai biasanya digunakan apabila anda ingin mengeksport satu ciri utama modul.

// math.js (Module File)
export default function multiply(a, b) {
  return a * b;
}

Mengimport Modul

Untuk mengakses nilai yang dieksport daripada modul dalam fail lain, anda menggunakan kata kunci import. Terdapat dua jenis import: import bernama dan import lalai.

1. Import Dinamakan

Apabila mengimport eksport bernama, anda mesti menggunakan nama tepat yang digunakan dalam penyata eksport.

// app.js (Main File)
import { add, subtract } from './math.js';

console.log(add(2, 3));  // Output: 5
console.log(subtract(5, 3));  // Output: 2

2. Import Lalai

Apabila mengimport eksport lalai, anda boleh memilih mana-mana nama untuk nilai yang diimport.

// app.js (Main File)
import multiply from './math.js';

console.log(multiply(2, 3));  // Output: 6

3. Menggabungkan Import Dinamakan dan Lalai

Anda juga boleh menggabungkan import bernama dengan import lalai daripada modul yang sama.

// math.js
export const add = (a, b) => a + b;
export default function multiply(a, b) {
  return a * b;
}

// app.js
import multiply, { add } from './math.js';

console.log(multiply(2, 3));  // Output: 6
console.log(add(2, 3));  // Output: 5

Mengeksport dan Mengimport Kelas

Anda boleh mengeksport dan mengimport kelas dengan cara yang sama seperti fungsi dan pembolehubah.

Contoh: Mengeksport dan Mengimport Kelas

// math.js (Module File)
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

Import Dinamik

JavaScript juga menyokong import dinamik, yang membolehkan anda memuatkan modul secara bersyarat pada masa jalan. Ini boleh berguna untuk pemisahan kod, di mana anda memuatkan modul hanya apabila diperlukan, mengurangkan masa pemuatan awal.

// math.js (Module File)
export default function multiply(a, b) {
  return a * b;
}

Modul dalam Pelayar

Dalam pelayar moden, anda boleh menggunakan modul ES6 secara asli. Anda hanya perlu menambah atribut type="module" pada teg dalam HTML.

// app.js (Main File)
import { add, subtract } from './math.js';

console.log(add(2, 3));  // Output: 5
console.log(subtract(5, 3));  // Output: 2

Kesimpulan

Sistem import/eksport ialah alat yang berkuasa dalam JavaScript yang membolehkan anda memodulasi kod anda dan mengasingkan kebimbangan. Dengan memecahkan kod anda kepada kepingan yang lebih kecil dan boleh digunakan semula, anda boleh meningkatkan kebolehselenggaraan dan kebolehskalaan aplikasi anda. Memahami cara mengeksport dan mengimport modul dengan berkesan adalah bahagian penting dalam menguasai JavaScript.

---

Hai, saya Abhay Singh Kathayat!
Saya seorang pembangun tindanan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.
Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.

Atas ialah kandungan terperinci Memahami Modul JavaScript dan Sistem Import/Eksport. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!