Hari 9: Modul dan Kelas JavaScript

Tarikh: 16 Disember 2024

Selamat datang ke Hari ke-9! Hari ini, kami meneroka Modul dan Kelas dalam JavaScript, dua konsep yang meningkatkan organisasi kod, kebolehgunaan semula dan kebolehbacaan dengan ketara. Memahami topik ini akan meningkatkan kemahiran JavaScript anda, membolehkan anda menstruktur projek anda seperti pembangun profesional.

1. Modul JavaScript

Modul membolehkan anda membahagikan kod anda kepada kepingan yang lebih kecil dan boleh digunakan semula. Daripada mempunyai satu fail besar, anda boleh menyusun fungsi menjadi berbilang fail, menjadikan pangkalan kod anda lebih mudah untuk diurus dan diselenggara.

Mengapa Menggunakan Modul?

1. Pemisahan Kebimbangan: Setiap modul mengendalikan tanggungjawab tertentu.
2. Kebolehgunaan semula: Kod daripada satu modul boleh digunakan semula dalam modul yang lain.
3. Kebolehselenggaraan: Lebih mudah untuk nyahpepijat dan mengemas kini.

Mengeksport dan Mengimport dalam Modul

Mengeksport daripada Modul

Anda boleh mengeksport pembolehubah, fungsi atau kelas daripada modul menggunakan eksport.

Eksport Dinamakan

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

Eksport Lalai

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

Mengimport Modul

Gunakan kata kunci import untuk membawa masuk kefungsian daripada modul lain.

Contoh: Mengimport Eksport Bernama

// main.js
import { add, subtract } from './utils.js';

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

Contoh: Mengimport Eksport Lalai

// main.js
import greet from './greet.js';

console.log(greet("Alice")); // Output: Hello, Alice!

Import Dinamik

Import dinamik memuatkan modul pada masa jalan menggunakan import().

Contoh: Lazy Loading

const loadModule = async () => {
  const module = await import('./utils.js');
  console.log(module.add(5, 3)); // Output: 8
};

loadModule();

2. Kelas JavaScript

Kelas dalam JavaScript menyediakan pelan tindakan untuk mencipta objek dan merangkum data dan kaedah yang berkaitan. Ia adalah sebahagian daripada ES6 dan asas kepada pengaturcaraan berorientasikan objek dalam JavaScript.

Mentakrifkan Kelas

Kelas ditakrifkan menggunakan kata kunci kelas.

Contoh: Kelas Asas

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  }
}

const person1 = new Person("John", 30);
console.log(person1.greet()); // Output: Hello, my name is John and I am 30 years old.

Warisan Kelas

Warisan membenarkan kelas memperoleh sifat dan kaedah daripada kelas lain menggunakan kata kunci lanjutan.

Contoh: Warisan

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Buddy");
dog.speak(); // Output: Buddy barks.

Kaedah Statik

Kaedah statik tergolong dalam kelas itu sendiri, bukan contoh.

Contoh: Kaedah Statik

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

Bidang dan Kaedah Persendirian

Medan dan kaedah peribadi hanya boleh diakses dalam kelas dan dilambangkan dengan awalan #.

Contoh: Medan Persendirian

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

Kelas vs. Objek Literal

Walaupun literal objek adalah pantas dan mudah untuk struktur data ringkas, kelas menawarkan:

• Pelan tindakan yang jelas untuk mencipta berbilang objek yang serupa.
• Sokongan untuk pewarisan dan enkapsulasi.

3. Menggabungkan Modul dan Kelas

Modul dan kelas saling melengkapi dengan indah dalam aplikasi JavaScript moden. Anda boleh menentukan kelas dalam satu modul dan menggunakannya dalam modul lain.

Contoh: Menggabungkan Modul dan Kelas

// main.js
import { add, subtract } from './utils.js';

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

4. Contoh Dunia Sebenar: Troli Beli-belah

Berikut ialah contoh praktikal yang menggabungkan kedua-dua modul dan kelas.

Fail: cart.js

// main.js
import greet from './greet.js';

console.log(greet("Alice")); // Output: Hello, Alice!

Fail: main.js

const loadModule = async () => {
  const module = await import('./utils.js');
  console.log(module.add(5, 3)); // Output: 8
};

loadModule();

Ambil Utama

1. Modul: Bantu menyusun kod anda dan menggalakkan kebolehgunaan semula.
2. Kelas: Sediakan cara berstruktur untuk bekerja dengan objek, menawarkan ciri seperti warisan dan enkapsulasi.
3. Penggunaan Gabungan: Gunakan modul dan kelas bersama-sama untuk membina aplikasi berskala dan boleh diselenggara.

Amalan Tugas

1. Buat modul yang mengeksport fungsi untuk operasi asas aritmetik.
2. Tulis kelas untuk sistem Perpustakaan dengan kaedah untuk menambah dan menyenaraikan buku.
3. Gabungkan modul dan kelas untuk mensimulasikan troli beli-belah e-dagang asas.

Apa Seterusnya?

Esok, pada Hari 10, kita akan mendalami Gelung Acara dan Pengaturcaraan Asynchronous, di mana anda akan mempelajari cara JavaScript mengendalikan konkurensi, panggilan balik, janji dan gelung acara . Nantikan!

Atas ialah kandungan terperinci Modul dan Kelas JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!