Kata pengantar
Routing front-end didukung dalam banyak kerangka kerja Perpustakaan JS Open Source, seperti AngularJS, Backbone, ReactJs, dll. Prinsip routing front-end sama dengan routing back-end. Ini memungkinkan semua interaksi dan menampilkannya di satu halaman untuk dijalankan untuk mengurangi permintaan server dan meningkatkan pengalaman pelanggan. Semakin banyak situs web, terutama aplikasi web, menggunakan perutean front-end.
Html
Ada menu navigasi UL di halaman, dan hasil Div#digunakan untuk menampilkan hasilnya. Saat mengklik menu navigasi, konten hasil yang berbeda akan ditampilkan di #Result.
<ul> <li> <a href = "#/"> home </a> </li> <li> <a href = "#/produk"> Produk </a> </li> <li> <a href = "#/server"> Layanan </a> <li> </ul> <Div ID = ""> </div>
Javascript
Mari kita bicara tentang prinsip singkat implementasi perutean front-end. Mengambil bentuk hash (juga dapat ditangani menggunakan API riwayat) sebagai contoh, ketika hash dari URL berubah, hashchange terdaftar panggilan balik dipicu, dan operasi yang berbeda dilakukan dalam panggilan balik dan konten yang berbeda ditampilkan.
fungsi router () {this.Routes = {}; this.cururl = ''; this.route = function (path, callback) {this.routes [path] = callback || fungsi(){}; }; this.refresh = function () {this.cururl = location.hash.slice (1) || '/'; this.Routes [this.cururl] (); }; this.init = function () {window.addeventListener ('load', this.refresh.bind (ini), false); window.addeventListener ('hashchange', this.refresh.bind (ini), false); }}Dalam kode di atas, implementasi objek router sistem perutean terutama menyediakan tiga metode:
Init mendengarkan acara pembaruan hash browser URL.
Route menyimpan panggilan balik selama pembaruan rute ke rute array callback, dan fungsi callback akan bertanggung jawab untuk memperbarui halaman.
Refresh menjalankan fungsi callback yang sesuai dengan URL saat ini dan memperbarui halaman.
Metode panggilan router adalah sebagai berikut:
Klik untuk memicu perubahan hash URL dan perbarui konten yang sesuai. Setelah berjalan, Anda akan menemukan bahwa setiap kali Anda mengklik menu, warna latar belakang dan konten akan diubah di #Result.
var r = router baru (); r.init (); var res = document.geteLementById ('hasil'); R.route ('/', function () {res.style.background = 'biru'; res.innerHtml = 'Ini adalah beranda';}); R.route ('/produk', function () {res.style.background = 'oranye'; res.innerHtml = 'Ini adalah halaman produk';}); R.route ('/server', function () {res.style.background = 'hitam'; res.innerHtml = 'Ini adalah halaman layanan';});Meringkaskan
Di atas adalah implementasi sederhana dari routing front-end. Dalam aplikasi yang sebenarnya, hash harus diproses secara teratur untuk memenuhi aplikasi sejumlah besar URL, dan pada saat yang sama, fungsi konten halaman Ajax Asynchronous ditambahkan. Meskipun contoh ini sangat sederhana, pada kenyataannya, fondasi dari banyak sistem perutean didasarkan pada ini, dan sistem perutean lainnya terutama memberikan pendukung dan mengoptimalkan mekanisme kerangka kerja yang mereka gunakan. Oke, konten artikel ini sudah ada di sini. Saya berharap ini akan membantu Anda belajar atau bekerja. Jika Anda memiliki pertanyaan, Anda dapat meninggalkan pesan untuk berkomunikasi.