Sistem penghalaan dalam JavaScript untuk Aplikasi Halaman Tunggal

? Membina Sistem Penghalaan Mudah dalam JavaScript Vanila untuk SPA

Dalam dunia Aplikasi Halaman Tunggal (SPA), mengurus laluan tanpa rangka kerja boleh kelihatan menakutkan. Tetapi dengan JavaScript Vanila, anda boleh mencipta sistem penghalaan yang mudah tetapi berkuasa! ?

Berikut ialah panduan ringkas untuk anda bermula:

1️⃣ Fahami Asas Penghalaan

Penghalaan dalam SPA melibatkan pemetaan URL ke paparan atau kandungan tertentu. Daripada memuatkan semula halaman, apl mengemas kini kandungan secara dinamik berdasarkan URL.

2️⃣ Konsep Teras

• Penghalaan berasaskan cincang: Menggunakan window.location.hash (cth., /#/home). Ia mudah dan tidak memerlukan konfigurasi pelayan.
• API Sejarah: Memanfaatkan pushState dan popstate untuk URL yang lebih bersih (cth., /home).

3️⃣ Langkah-Langkah Membina

Langkah 1: Sediakan Struktur HTML Anda

<div>



<h3>
  
  
  <strong>Step 2: Create the Router</strong>
</h3>



<pre class="brush:php;toolbar:false">class Router {
  constructor(routes) {
    this.routes = routes;
    this.init();
  }

  init() {
    window.addEventListener("hashchange", () => this.handleRouteChange());
    this.handleRouteChange();
  }

  handleRouteChange() {
    const currentPath = window.location.hash.slice(1);
    const route = this.routes[currentPath];
    if (route) {
      route();
    } else {
      this.routes["/404"]();
    }
  }
}

// Usage
const router = new Router({
  "/": () => (document.getElementById("root").innerHTML = "Home Page"),
  "/about": () => (document.getElementById("root").innerHTML = "About Page"),
  "/404": () => (document.getElementById("root").innerHTML = "404 Page"),
});

4️⃣ Penambahan

• Gunakan API Sejarah untuk URL yang lebih bersih.
• Malas memuatkan kandungan atau templat untuk prestasi yang lebih baik.
• Tambahkan 404 dan laluan sandaran untuk pengalaman pengguna yang lebih baik.

Mengapa Membina Ini Sendiri?

• Pemahaman Mendalam: Pelajari mekanik di sebalik penghalaan.
• Fleksibiliti: Sesuaikan mengikut keperluan anda tanpa kekangan perpustakaan.
• Prestasi: Elakkan overhed kebergantungan luaran.

? Petua Pro: Jika anda sedang membina apl yang lebih besar, pertimbangkan untuk memodulatkan kod anda dan mengendalikan kes kelebihan seperti parameter pertanyaan atau laluan bersarang.

Pernahkah anda membina sistem penghalaan anda sendiri? Kongsi pengalaman anda dalam komen! ?

Atas ialah kandungan terperinci Sistem penghalaan dalam JavaScript untuk Aplikasi Halaman Tunggal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!