Get best of the week

Routing Komponen Web

Terkadang komponen web tampaknya tidak mencapai kerangka kerja, terutama jika dibandingkan dengan perwakilan paling populer. Tetapi banyak hal yang paling mendesak yang tidak dikaburkan oleh penerapan standar yang termasuk dalam konsep komponen web cukup mudah untuk diikat menggunakan perpustakaan atau sejumlah kecil kode elegannya. Salah satu fitur ini adalah perutean front-end. Fitur ini tidak selalu diperlukan, bahkan mungkin kontroversial, tetapi dalam sebagian besar kerangka kerja fitur itu ada dan digunakan oleh banyak orang. Bagaimana dengan komponen web? Dan kami akan mencoba menerapkan perutean menggunakan perpustakaan navigo.

Untuk membuat perintah konsol berfungsi lebih baik di Windows, Anda dapat menginstal utilitas Unix dari distribusi git untuk sistem ini, atau, tampaknya, menggunakan fitur baru WSL dan terminal.

Pertama, buat proyek:

mkdir testnavigo
cd testnavigo
npm init

dan berkali-kali kita menekan enter sampai rilis

lalu kita meletakkan perpustakaan

npm i navigo --save

buat index.html

dan hubungkan perpustakaan di dalamnya dan tentukan kelas utama aplikasi, di sini akan merangkum logika perutean dan kontrol semua komponen anak.

Komponen web memberi kami kesempatan untuk secara otomatis memanggil pengait ketika sebuah elemen muncul di pohon tempat kelas kami ditugaskan di pohon objek browser. Di dalamnya, kita menginisialisasi pustaka perutean dengan kode langsung dari contoh dari pustaka github (dalam kehidupan nyata, ini harus dilakukan lebih indah dengan pemuatan modular).

<script src="/node_modules/navigo/lib/navigo.min.js"></script>

<my-app></my-app>

<script type="module">

   class MyApp extends HTMLElement {

       connectedCallback() {
           let root = null;
           let useHash = true; // Defaults to: false
           let hash = '#!'; // Defaults to: '#'
           this.router = new Navigo(root, useHash, hash);
       }
    }
   customElements.define('my-app', MyApp);
</script>


Tambahkan pemrosesan rute:

connectedCallback() {
   let root = null;
   let useHash = true; // Defaults to: false
   let hash = '#!'; // Defaults to: '#'
   this.router = new Navigo(root, useHash, hash);
   router
       .on('page-a', () => {
           this.innerHTML = '';
           this.insertAdjacentHTML('beforeend', '<page-a></page-a>');
       })
       .on('page-b', () => {
           this.innerHTML = '';
           this.insertAdjacentHTML('beforeend', '<page-b></page-b>');
       })
       .on('*', () => {
           this.innerHTML = '';
           this.insertAdjacentHTML('beforeend', '<div>Please click links above</div>');
       })
       .resolve();
}


Setiap kali rute diubah, komponen kami memperbarui konten internal dengan menambahkan tag baru ke dalamnya. Tetap mendaftarkan tag ini untuk komponen halaman baru.

class PageA extends HTMLElement {
   connectedCallback() {
       this.insertAdjacentHTML('beforeend', '<div>This is a page A</div>');
   }
}
class PageB extends HTMLElement {
   connectedCallback() {
       this.insertAdjacentHTML('beforeend', '<div>This is a page B</div>');
   }
}
customElements.define('page-a', PageA);
customElements.define('page-b', PageB);


Di bagian paling atas halaman, tambahkan tautan untuk memeriksa navigasi:

<a href="page-a" data-navigo>Page A</a>
<a href="page-b" data-navigo>Page B</a>


atribut data-navigo memungkinkan mengkliknya untuk diproses oleh router, daripada membuat permintaan untuk backend. Saatnya untuk memulai, misalnya, seperti ini:

npx http-server


buka 127.0.0.1 : 8080 di browser atau apa pun yang ditulisnya untuk Anda di sana dan pastikan semuanya bekerja.



Sekarang kita dapat mendistribusikan semuanya sebagaimana mestinya dalam file yang terpisah, melampirkan template dan memuat halaman secara dinamis, membuat rute ke dalam konfigurasi. Komponen web akan mengambil alih pekerjaan utama dengan Siklus Hidup objek aplikasi, hanya peristiwa yang harus Anda ingat untuk memutuskan sambunganCallback () yang terputus .

Karena saya ingin menunjukkan seberapa cepat ini dilakukan, saya mungkin tidak akan meregangkan artikel lebih lanjut;)

Tentang beberapa hal ini saya sudah menulis di artikel:

Mulai cepat dengan WebComponents

dan

WebComponents sebagai kerangka kerja, interaksi komponen

Tunggu wahyu baru ^ Artikel W, bagikan dan sukai!

Kode sumber yang dihasilkan dapat dilihat di sini di repositori di bitpack:

https://bitbucket.org/techminded/testnavigo/

More articles:


All Articles