Saya telah melakukan pengembangan back-end, terutama ketika saya telah menggunakan Django atau Express, saya harus terbiasa dengan fungsi perutean di sisi server. WordPress, sistem blog populer di negara -negara asing, juga merupakan kasus implementasi perutean yang sangat klasik. Jadi, apa sebenarnya rute itu? Mari kita bicarakan secara singkat melalui WordPress.
Mereka yang memahami aturan penulisan ulang WordPress semuanya sadar bahwa pada kenyataannya, akses URL apa pun didasarkan pada index.php di direktori instalasi WordPress (kecuali untuk akses ke file yang sudah ada di server). Ini akan jelas ketika tautan tetap WordPress ada dalam pengaturan mode. Misalnya, URL artikelnya adalah index.php? P = id, dan URL halaman klasifikasi adalah index.php? Cat = id.
Di sini, index.php bertindak sebagai fungsi router, silakan lihat gambar berikut:
Dengan kata lain, apa pun alamat yang Anda kunjungi, semua permintaan pada akhirnya akan diarahkan ke index.php. Program ini akan menentukan jenis halaman mana yang Anda butuhkan berdasarkan karakteristik URL akses, dan kemudian membuat kueri ke database, dan akhirnya mengembalikan konten HTML ke browser.
Apa yang kami sebutkan di atas adalah routing backend web, jadi apa routing front-end? Faktanya, teknologi perutean front-end banyak digunakan sekarang, dan banyak routing front-end pustaka JS Source Open Source, seperti AngularJS, Ember.js, Director.js, 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.
Director.js adalah pendaftaran/parser rute paling murni. Ini menggunakan simbol "#" untuk mengatur jalur URL yang berbeda tanpa menyegarkan halaman dan mencocokkan metode panggilan balik yang berbeda sesuai dengan jalur URL yang berbeda. Director.js tidak hanya dapat diterapkan pada klien, tetapi juga di latar belakang menggunakan Node.js, tetapi juga dapat mengimplementasikan fungsi routing backend yang disebutkan di atas. Mari kita lihat contoh-contoh berikut tentang implementasi perutean front-end
Anda perlu merancang aplikasi desktop web yang mirip dengan Web QQ. Ada banyak ikon kecil di desktop, dan setiap ikon kecil adalah aplikasi fungsional, mirip dengan desktop komputer. Ada tombol berita Baidu di desktop. Klik untuk memunculkan jendela di halaman saat ini. Anda dapat melihat berita Baidu dan ikon lain. Klik untuk melihat waktu saat ini. Berikut adalah contoh sederhana:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <script src = "https://rawgit.com/flatiron/director/master/build: 0; pad: 0; 0; {width: 100%; tinggi: 100%; latar belakang: #3d72b8} #baidunews {lebar: 40px; tinggi: 40px; latar belakang: url ("./ du.png") no-rePeat; display: block; margin: 50px;} #tweibo {wight: 40px; heightn) latar belakang (40px; latar belakang; no-repeat; display: blok; margin: 50px;} </style> </pead> <body> <a href = "#/baidunews" id = "baidunews"> </a> <a href = "#/waktu" id = "tweibo"> </a> <script> // define route var route = "tweibo"> "/Baidunews": [showframe, getBaidunews]} // inisialisasi rute var router = router (route) router.init (); // Tentukan fungsi callback yang menampilkan fungsi waktu saat ini sekarang () {var sekarang = tanggal baru (); var y = now.getlyear (); var m = now.getMonth ()+1; var d = now.getDate (); var h = now.getHours (); var mi = now.getMinutes (); var s = now.getSeconds (); peringatan ("waktu saat ini/n"+y+"tahun"+m+"bulan"+d+"hari"+h+"waktu"+mi+"menit"+s+"detik"); } // Tentukan fungsi yang menampilkan fungsi Browser Framework showframe () {var f = document.createElement ("div"); f.style.width = "985px"; f.style.height = "500px"; f.style.position = "absolute"; f.style.top = "50px"; f.style.left = "200px"; f.style.background = "putih"; f.style.border = "2px solid #ccc"; // tutup tombol var dekat = document.createElement ("span"); close.style.position = "absolute"; close.style.right = "5px"; close.style.cursor = "pointer"; close.style.marginright = "5px"; close.onClick = function () {document.body.removechild (f); } close.innerHtml = "x"; // Muat iframe di luar situs var win = document.createelement ("iframe"); win.id = "myiframe"; win.frameBorger = 0; win.style.width = "100%"; win.style.height = "100%"; F.AppendChild (Tutup); F.AppendChild (Win); Document.Body.AppendChild (f); } // Tentukan fungsi fungsi untuk memuat halaman web berita Baidu getBaidunew () {document.getElementById ("myiframe") .src = "http://news.baidu.com/"; } </script> </body> </html>Dari kode di atas, kita dapat melihat Director.js menggunakan "#" di halaman untuk perutean dan penerusan. Contoh di atas hanyalah contoh yang sangat sederhana. Director.js dapat menerapkan fungsi yang lebih kompleks dan besar. Ini dapat berinteraksi dengan data AJAX dan server, dan dapat hidup berdampingan dengan pustaka kelas JS lainnya. Ini adalah alat pengembangan aplikasi web yang kuat.
Apakah Director.js berdampak pada SEO?
Direktur Klien.js memiliki dampak pada SEO, karena semua data hanya pada satu halaman, dan beberapa data disimpan dengan cara yang tidak kondusif untuk laba -laba mesin pencari. Jika Anda perlu ramah SEO, itu berarti Anda perlu membangun "halaman web" alih -alih "aplikasi web". Director.js tidak dianjurkan.
Referensi: Director.js