Perjalanan Reaksi Saya: Hari 11

Apa yang Saya Pelajari Hari Ini
Modul adalah pengubah permainan dalam JavaScript. Ia membenarkan kami memecahkan kod kepada ketulan yang lebih kecil dan boleh digunakan semula, menjadikannya lebih mudah untuk mengurus, nyahpepijat dan mengoptimumkan projek kami. Berikut ialah pecahan:

Apakah Modul?

• Modul membenarkan kebolehgunaan semula dan penyusunan kod merentas fail.
• Sebelum Modul: Kod JavaScript ditulis pada satu halaman, membawa kepada fail berat dan bersepah yang sukar untuk nyahpepijat atau diselenggara.
• Dengan Modul: Kami boleh membahagikan kod kepada fail yang lebih kecil dan boleh diurus.

Konsep Utama

1. Eksport dan Import

• Eksport: Menghantar modul supaya ia boleh digunakan di tempat lain.
• Import: Membawa masuk modul daripada fail lain untuk digunakan.

Sintaks:

• Dinamakan Eksport/Import: Eksport berbilang item mengikut nama. Anda mesti mengimport menggunakan nama yang sama.

// Export
export const greet = () => console.log("Hello!");
export const add = (a, b) => a + b;

// Import
import { greet, add } from "./module.js";
greet(); // Output: Hello!
console.log(add(2, 3)); // Output: 5

• Eksport/Import Lalai:

Eksport satu item lalai. Anda boleh menamakan semula semasa import.

// Export
export default function greet() {
    console.log("Hello, default export!");
}

// Import
import hello from "./module.js";
hello(); // Output: Hello, default export!

Perbezaan Utama:

• Eksport Dinamakan: Nama import mesti sepadan.
• Eksport Lalai: Nama import boleh berbeza.

2.Modul Alias

• Mengapa Menggunakannya? Apabila mengimport daripada berbilang fail dengan nama eksport yang sama, aliasing membantu mengelakkan konflik.
• Sintaks:

import { sum as add } from "./math.js";
console.log(add(2, 3)); // Output: 5

3. Import Ruang Nama (*)

• Gunakan * untuk mengimport semua daripada modul sebagai objek tunggal.
• Sintaks:

import * as math from "./math.js";
console.log(math.sum(2, 3)); // Output: 5
console.log(math.sub(5, 2)); // Output: 3

4.Gabungkan Eksport

• Gabungkan eksport daripada berbilang modul menjadi satu.

Langkah:

• Eksport modul secara individu.
• Buat fail baharu untuk menggabungkannya menggunakan eksport *.
• Import fail gabungan ke dalam projek anda. Contoh:

// Module 1: calc.js
export const add = (a, b) => a + b;
export const sub = (a, b) => a - b;

// Module 2: identity.js
export const name = "JavaScript";

// Combine Modules
export * as calc from "./calc.js";
export * as identity from "./identity.js";

// Import Combined
import * as modules from "./combine.js";
console.log(modules.calc.add(5, 3)); // Output: 8
console.log(modules.identity.name); // Output: JavaScript

Faedah Menggunakan Modul

1. Kod Pembersih: Kod disusun menjadi bahagian yang lebih kecil dan boleh diurus.
2. Kebolehgunaan semula: Modul boleh digunakan semula merentas berbilang projek atau fail.
3. Penyahpepijatan Dipertingkat: Ralat lebih mudah dikesan dalam fail yang lebih kecil.

Refleksi
Saya seronok mempelajari cara modul memudahkan dan meningkatkan pembangunan JavaScript. Gabungan eksport, import, alias dan ruang nama menjadikan pengurusan projek lebih cekap.

Kami terus bergerak—belajar lebih gigih! ?

Atas ialah kandungan terperinci Perjalanan Reaksi Saya: Hari 11. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!