Baru -baru ini, saya belajar tulang punggung. Saat belajar memahami tulang punggung, Anda harus terlebih dahulu memahami Spa. Saat memahami SPA, Anda harus terlebih dahulu memahami bagaimana aplikasi satu halaman dapat mengubah URL tanpa menyegarkan halaman.
Dibandingkan dengan lompatan ke halaman yang berbeda, Ajax dapat dikatakan telah sangat meningkatkan pengalaman penelusuran pengguna. Sangat menyenangkan untuk tidak melihat layar putih di antara switching halaman. Namun, banyak aplikasi AJAX sebelumnya tidak mendukung gerakan maju dan mundur browser, yang menyebabkan pengguna segera kembali ke posisi semula di mana pun mereka menelusuri situs web, dan pengguna tidak dapat mengganti riwayat penelusuran melalui tombol pergerakan ke depan dan ke belakang.
Untuk masalah pertama, cukup mudah untuk dipecahkan. Cukup gunakan cookie atau LocalStorage untuk merekam status aplikasi. Baca status ini saat menyegarkan halaman, lalu kirim permintaan AJAX yang sesuai untuk mengubah halaman. Tetapi masalah kedua sangat merepotkan, mari kita bicara tentang solusi browser modern terlebih dahulu.
Solusi HTML5
Untuk memahami bagaimana HTML5 dapat maju dan mundur, Anda harus terlebih dahulu memahami objek sejarah dan objek lokasi.
objek sejarah
Properti Objek Sejarah
1.length: Mengembalikan jumlah URL dalam daftar sejarah browser. Untuk setiap halaman yang dikunjungi pengguna pada tag saat ini, nomor ini ditambahkan oleh 1. Karena alasan privasi, konten URL spesifik tidak terlihat.
2.State: Objek yang terkait dengan URL saat ini hanya dapat ditambahkan atau dimodifikasi melalui pushstate dan diganti. Kami dapat menggunakannya untuk menyimpan informasi yang terkait dengan URL.
Metode Objek Sejarah
1.History.back ()
Metode ini tidak memiliki parameter. Setelah dipicu, itu akan kembali ke halaman sebelumnya yang ditelusuri, yang setara dengan mengklik tombol kembali browser.
2.History.forward ()
Metode ini tidak memiliki parameter. Setelah dipicu, itu akan kembali ke halaman yang Anda telusuri sebelum Anda menelusuri, yang setara dengan mengklik tombol maju browser.
3.History.go (nomor)
Metode ini menerima parameter variabel pembentukan, history.go (-1) setara dengan mendukung halaman, history.go (1) setara dengan memajukan halaman, history.go (0) akan menyegarkan halaman saat ini.
4. History.Pushstate (State, Title, URL)
Kunci untuk mengubah URL dan tidak menyegarkan halaman itu. Metode ini akan mengubah lokasi. Setelah eksekusi, History.length akan ditingkatkan dengan 1. Metode ini menerima tiga parameter.
1. Negara: Objek yang terkait dengan URL saat ini.
2.Title: Judul halaman, tetapi semua browser mengabaikannya. Untuk mengubah judul, Anda masih perlu menggunakan Document.Title.
3.URL: URL dengan domain yang sama dengan halaman saat ini, Location.href akan menjadi nilai ini.
5. History.Replacestate (Negara, Judul, URL)
Metode ini sama seperti di atas, tetapi tidak akan mengubah sejarah.
Perhatikan bahwa PushState parameter ketiga dan penggantian tidak dapat melakukan domain silang dan tidak akan memicu peristiwa popstate browser dan acara OnHashChange (diuji di bawah Chrome33).
objek lokasi
Selain mengklik tombol maju/kembali dan acara riwayat, Anda juga dapat mengubah URL melalui metode lokasi dan memodifikasi properti lokasi:
Properti Objek Lokasi (Baca dan Tulis):
1.host: name domain + nomor port
2.Hostname: Nama domain
3.port: Nomor port
4. Protokol: Protokol
5. Href: Jalur penuh
6.origin: Protokol + Nama Domain + Port
7.Hash: URL (hash) dimulai dengan tanda pound (#)
8.Pathname: Jalur dokumen + nama dokumen
9.Sarch :(?) Konten berikut
Anda dapat mencapai tujuan bebas refresh dengan mengubah lokasi.href atau lokasi. Hancurkan.
Metode objek lokasi:
1. ASSIGN: Ubah nilai URL dan tambahkan URL saat ini ke sejarah. Panjang akan meningkat sebesar 1. Lokasi.assig ('#' + x) akan mengubah URL tetapi tidak akan menyegarkan halaman.
2.Reload: Segarkan halaman.
3. Urlah: Ubah nilai URL, tetapi sejarah. Panjangnya tetap tidak berubah. Metode penggunaan yang sama.
Acara Popstate
Ketika URL berubah, misalnya, jika pengguna mengklik tombol maju/kembali, history.go (n) (n tidak sama 0), location.hash = x (x tidak sama dengan lokasi saat ini.hash) akan memicu acara ini. Anda dapat menggunakannya untuk memantau URL untuk mengimplementasikan berbagai fungsi.
Salinan kode adalah sebagai berikut:
window.onpopState = function () {
// lakukan sth
}
Acara OnHashChange
Mengubah nilai hash akan memicu acara popstate, dan memicu acara popstate tidak akan selalu memicu acara OnHashChange. Setelah pengujian:
1. Perubahan hash tetapi lokasi. Nama tetap tidak berubah akan memicu peristiwa OnHashChange, seperti History.pushState (",", '#abc');
2. Jika hash dan lokasi. Perubahan nama bersama, itu tidak akan memicu, seperti history.pushstate (",", 'a#abc');
Cara Menulis Browser Lama
Browser lama tidak mendukung pushstate dan mengganti, sehingga cara untuk memantau perubahan URL melalui popstate (pada kenyataannya, itu tidak mendukung metode ini). Maka Anda hanya dapat mengubah konten di balik URL# untuk tidak mencapai penyegaran, tetapi mereka tidak mendukung OnHashChange, jadi Anda acuh tak acuh terhadap perubahan URL (kecuali bahwa halaman akan menggulir ke posisi ID yang sesuai dari halaman). Kemudian Anda hanya dapat menggunakan langkah utama: jajak pendapat, dan setInterval untuk mendengarkan nilai URL. Seperti ini:
Salinan kode adalah sebagai berikut:
var prevhash = window.location.hash;
var callback = function () {...}
window.setInterval (function () {
if (window.location.hash! = prevhash) {
prevhash = window.location.hash;
callback (prevhash);
}
}, 100);
Tentu saja, tulisan ini sangat membuat frustrasi. Jika Anda tidak mempertimbangkan untuk mengklik tag A dengan ID pada halaman untuk mengubah hash, Anda dapat menggunakan pola desain untuk secara elegan mengimplementasikan URL pemantauan. Sebagai contoh, pola pengamat klasik menggunakan kelas untuk mengimplementasikan fungsi mengubah hash, dan kemudian semua kelas (pengamat) yang ingin mendengarkan perubahan dalam URL untuk berlangganan kelas (pengamat) ini.
Salinan kode adalah sebagai berikut:
// Ubah kelas URL
fungsi urlchanger () {
var _pis = ini;
this.observer = [];
// Tambahkan pengamat
this.addoBserver = function (obj) {...}
// Hapus pengamat
this.deleteObserver = function (obj) {...}
// Beri tahu pengamat
this._notifyoBserver = function () {
var length = _this.observer.length;
Console.log (panjang)
untuk (var i = 0; i <panjang; i ++) {
_This.observer [i] .update ();
}
}
// Ubah URL
this.changeUrl = function (hash) {
window.location.hash = hash;
_this._notifyoBserver ();
}
}
// Kelas Mendengarkan
function oneOfoBserver () {
var _pis = ini;
this.update = function () {...}
}
//menyelesaikan
var o1 = UrlChanger baru ();
var o2 = OneOfObserver baru ();
o1.addobserver (O2);
o1.changeUrl ('fun/arg1/arg2/');
// o2 memiliki sth ...