Properti hash adalah string yang dapat dibaca dan dapat ditulis yang merupakan bagian jangkar dari URL (bagian dimulai dengan nomor #).
tata bahasa
location.hash
Dalam proyek kami, ada sejumlah besar halaman dengan Formulir Kueri Ajax + Daftar Hasil. Karena hasil kueri dikembalikan oleh Ajax, ketika pengguna mengklik item dalam daftar dan memasukkan halaman Detail, ia mengklik tombol browser kembali untuk kembali ke halaman kueri AJAX. Pada saat ini, semua orang tahu bahwa formulir dan hasil halaman kueri telah kembali ke status default.
Jika Anda harus memasukkan kembali kriteria kueri setiap kali Anda kembali ke halaman, atau jika Anda harus pergi ke halaman daftar, maka pengguna akan benar-benar gila dengan pengalaman ini.
Dalam proyek kami, kami menulis kelas dasar JavaScript yang sangat sederhana untuk memproses lokasi. Hancurkan dan simpan status halaman. Hari ini saya akan membaginya dengan Anda.
(Isi artikel ini mungkin agak sulit bagi pemula dalam JavaScript, karena melibatkan pengetahuan yang berorientasi pada objek JS, seperti mendefinisikan kelas, warisan, metode virtual, refleksi, dll.)
Mari kita lihat kebutuhan kita terlebih dahulu
Proyek kami adalah sistem manajemen tugas H5 berbasis WeChat. Prototipe halaman yang akan diselesaikan ditunjukkan pada gambar di bawah ini:
Persyaratannya harus sangat jelas, yaitu, klik pada formulir kueri, gunakan AJAX untuk mengembalikan hasil kueri, dan kemudian klik pada tugas dalam daftar untuk memasukkan halaman Detail Tugas. Karena administrator (manajer proyek) biasanya menangani banyak tugas sekaligus, mereka akan terus beralih antara halaman Detail Tugas dan halaman daftar kueri. Jika menekan tombol pengembalian saat ini tidak dapat menyimpan status halaman kueri, maka Anda harus memasukkan kembali kondisi kueri setiap kali Anda kembali ke halaman kueri. Pengalaman ini jelas tak tertahankan.
Oleh karena itu, kita perlu menemukan cara untuk menyimpan status halaman sehingga ketika pengguna menekan tombol fallback, kondisi dan hasil kueri masih ada.
Larutan
Ada banyak ide untuk menghemat status halaman, tetapi kami pikir menggunakan lokasi. Kerusakan harus menjadi cara terbaik.
Idenya adalah sebagai berikut:
1. Setelah pengguna memasuki kondisi kueri dan mengklik OK, kami membuat serial kondisi kueri ke dalam string, dan menambahkan kondisi kueri ke URL melalui "#" untuk mendapatkan URL baru, dan kemudian memanggil lokasi.
2. Ketika pengguna menekan tombol fallback untuk kembali ke halaman kueri, juga dapat dikatakan bahwa ketika halaman dimuat, deserialize lokasi. Hancurkan ke kondisi kueri, dan kemudian perbarui kondisi kueri ke formulir kueri dan jalankan kueri.
Idenya sangat sederhana. Titik kunci adalah metode Lokasi. Metode ini tidak hanya untuk memodifikasi URL bilah alamat di browser, tetapi yang lebih penting, itu akan menggantikan catatan halaman saat ini di Window.History. Jika metode. Replace Metode tidak digunakan, setiap fallback akan kembali ke kondisi kueri sebelumnya. Tentu saja, persyaratan tersebut juga dapat berguna untuk proyek -proyek tertentu.
Solusi akhir
Jika artikel ini hanya berbagi ide solusi di atas, itu akan bernilai kecil. Nilai artikel ini harus menjadi kelas JavaScript yang sederhana namun sangat kuat yang kami tulis.
Jika Anda memahami solusi di atas, maka lihatlah kelas JavaScript sederhana ini:
(function () {if (window.hashQuery) {return;} window.hashQuery = function () {}; hashQuery.prototype = {parseFromlocation: function () {if (location.hash === '' || location.hash.length ===) {if return;}; (((((); (var p dalam ini) {if (! this.hasownproperty (p) || typeof ini [p]! = 'string') {lanjutan;} if (index <properties.length) {this [p] = properti [index]; if (p] === '-') {ini [p] = '';} {p] = === '-') {ini [p] = '';} {p] {p] {p] {p] {p] {p] {p] {p] {p]; []; untuk (var p dalam ini) {if (! this.hasownproperty (p) || typeof ini [p]! = 'string') {lanjutan;} var value = this [p]; properties.push (value === '? properties.join ('|'); location.replace (url);}};}) ();Hanya ada 2 metode di kelas ini. Metode hashquery.parsefromlocation () deserialisasi dari lokasi. Hancurkan ke instance subclass hashquery. Metode hashquery.updatelocation () serial dan memperbarui instance subclass hashquery saat ini ke window.location.
Anda dapat melihat bahwa kelas hashquery tidak memiliki sifat, karena kami hanya mendefinisikan kelas dasar, dan sifat -sifat kelas didefinisikan dalam subkelas. Ini juga realistis, karena kondisi kueri hanya dapat diketahui di halaman tertentu.
Juga, perhatikan serialisasi dan deserialisasi di sini. Serialisasi di sini hanya untuk menggunakan mekanisme refleksi JavaScript untuk memisahkan nilai semua atribut string (dalam urutan) dari instance dengan "|"; Sementara serialisasi adalah untuk memisahkan string dengan "|", dan kemudian memperbarui sifat -sifat instance dengan refleksi (secara berurutan).
Cara menggunakan kelas hashquery
Sangat mudah digunakan.
Langkah pertama adalah mendefinisikan subkelas dan menambahkan semua kondisi kueri yang perlu digunakan untuk atribut string, seperti kode kami:
(function () {window.tasksearchHashQuery = function () {hashquery.constructor.call (this); this.iterationid = ''; this.assigneduserid = ''; this.status = ''; this.keyword = '';}; TasksearchHashQuery.constructor. HashQuery ();}) ();Pada langkah kedua, hubungi metode hashquery.parsefromlocation () dan hashquery.updatelocation () pada halaman kueri. Kode berikut adalah halaman kueri lengkap kami:
(function() {var urls = {list: "/app/task/list"};var hashQuery = null;var pager = null;$(document).ready(function() {hashQuery = new TaskSearchHashQuery();hashQuery.parseFromLocation();//Called here, deserialize ObjectupDateFormByHashQuery (); $ ("#btnsearch"). Klik (function () {updateHashQueryByForm (); hashQuery.updatelocation (); // Dipanggil di sini, serialisasi kondisi kueri dan perbarui untuknya location.hash $ ("#lblCount"). html ("memuat ..."); pager.reload (); page.hidesearch ();}); pager = new listpager ("#listtasks", url.list); pager.getPostData = function (index) {return "pageIndex =" + " +" + " +" + " +" + " +" + " +" + " +" page = " +" "& iterationId =" + hashQuery.IterationId + "& ditugasiD =" + hashQuery.assignedUserId + "& status =" + hashQuery.status + "& Keyword =" + hashQuery.keyword;}; pager. $ ("#hfpagerTotalCount"). Val () + "Tugas"); $ ("#hfpagerTotalCount"). Remove ();}; pager.init ();}); function updateHashQueryByform () {hashQuery.iterationid = $ ("#ddliteration") {hashQuery.Iterationid = $ ("#ddliter"). $ ("#ddlusers"). val (); hashquery.status = $ ("#ddlstatuses"). val (); hashQuery.keyword = $ ("#txtKeyword"). Val ();}; function updateFormByHashQuery () {$("#ddlIterations").val(hashQuery.iterationId);$("#ddlUsers").val(hashQuery.assignedUserId);$("#ddlStatuses").val(hashQuery.status);$("#txtKeyword").val(hashQuery.keyword);};})();Meringkaskan
Ini semua yang kami ketahui tentang penggunaan lokasi. Hancurkan dalam proyek kami untuk menyimpan status halaman. Saya bertanya -tanya bagaimana Anda menangani kebutuhan seperti itu di proyek web Anda?
Konten di atas adalah tips untuk menyimpan status halaman lokasi. Hancurkan yang diperkenalkan oleh editor kepada Anda. Saya harap ini akan membantu semua orang!