Teknik Location.hash untuk menyimpan teknik javascript_status halaman

Atribut cincang ialah rentetan yang boleh dibaca dan boleh ditulis yang merupakan bahagian utama URL (bahagian bermula dari tanda #).

Tatabahasa

lokasi.hash

Dalam projek kami, terdapat sejumlah besar borang pertanyaan ajax + halaman senarai hasil Memandangkan hasil pertanyaan dikembalikan oleh ajax, apabila pengguna mengklik item dalam senarai untuk memasuki halaman butiran, kemudian mengklik pelayar kembali. butang untuk kembali ke halaman Pertanyaan ajax, pada masa ini semua orang tahu bahawa bentuk dan hasil halaman pertanyaan telah kembali ke keadaan lalai.

Jika anda perlu memasukkan semula syarat pertanyaan setiap kali anda kembali ke halaman, atau perlu pergi ke halaman tertentu dalam senarai, maka pengguna benar-benar akan menjadi gila dengan pengalaman ini.

Dalam projek kami, kami menulis kelas asas JavaScript yang sangat mudah untuk mengendalikan location.hash untuk menyimpan keadaan halaman saya akan berkongsi dengan anda hari ini.

(Kandungan artikel ini mungkin agak sukar untuk pemula JavaScript kerana ia melibatkan pengetahuan berorientasikan objek JS, seperti menentukan kelas, warisan, kaedah maya, refleksi, dll.)

Mari kita lihat keperluan kita dahulu

Projek kami ialah sistem pengurusan tugasan H5 berdasarkan WeChat Prototaip halaman yang akan disiapkan adalah seperti yang ditunjukkan di bawah:

Keperluan harus sangat jelas, iaitu, klik pada borang pertanyaan, gunakan ajax untuk mengembalikan hasil pertanyaan, dan kemudian klik pada tugas dalam senarai untuk memasuki halaman butiran tugas. Memandangkan pentadbir (pengurus projek) biasanya mengendalikan berbilang tugas pada satu masa, mereka akan sentiasa bertukar antara halaman butiran tugas dan halaman senarai pertanyaan Pada masa ini, jika status halaman pertanyaan tidak dapat disimpan dengan menekan kekunci kembali, ia akan menjadi perlu untuk kembali ke halaman pertanyaan setiap kali Pengalaman memasuki semula syarat pertanyaan pasti tidak boleh diterima.

Jadi, kita perlu mencari cara untuk menyimpan status halaman supaya apabila pengguna menekan butang kembali, syarat pertanyaan dan keputusan masih ada.

Idea penyelesaian

Terdapat banyak idea untuk menyimpan status halaman, tetapi kami berpendapat menggunakan location.hash sepatutnya menjadi kaedah terbaik.

Ideanya adalah seperti berikut:

1. Selepas pengguna memasukkan syarat pertanyaan dan mengklik OK, kami menyerikan syarat pertanyaan ke dalam rentetan, menambah syarat pertanyaan pada penghujung url melalui "#" untuk mendapatkan url baharu, dan kemudian memanggil lokasi. replace(url baharu) untuk mengubah suai alamat dalam bar alamat penyemak imbas.

2. Apabila pengguna menekan butang belakang untuk kembali ke halaman pertanyaan, yang juga boleh dikatakan apabila halaman dimuatkan, nyahsiri lokasi.cincang ke dalam keadaan pertanyaan, kemudian kemas kini syarat pertanyaan kepada borang pertanyaan dan laksanakan pertanyaan.

Ideanya sangat mudah Perkara utama ialah kaedah location.replace Kaedah ini bukan sahaja mengubah suai URL bar alamat dalam penyemak imbas, tetapi yang lebih penting, menggantikan rekod halaman semasa dalam window.history. Jika kaedah location.replace tidak digunakan, setiap rollback akan kembali kepada keadaan pertanyaan sebelumnya. Sudah tentu, keperluan sedemikian mungkin berguna untuk beberapa projek.

Penyelesaian Akhir

Jika artikel ini hanya berkongsi idea penyelesaian di atas, ia tidak akan bernilai. Nilai artikel ini mestilah kelas JavaScript yang ringkas tetapi berkuasa yang kami tulis.

Jika anda memahami penyelesaian di atas, sila lihat kelas JavaScript mudah ini:

(function() {
if (window.HashQuery) {
return;
}
window.HashQuery = function() {
};
HashQuery.prototype = {
parseFromLocation: function() {
if (location.hash === '' || location.hash.length === ) {
return;
}
var properties = location.hash.substr().split('|');
var index = ;
for (var p in this) {
if (!this.hasOwnProperty(p) || typeof this[p] != 'string') {
continue;
}
if (index < properties.length) {
this[p] = properties[index];
if (this[p] === '-') {
this[p] = '';
}
}
index++;
}
},
updateLocation: function() {
var properties = [];
for (var p in this) {
if (!this.hasOwnProperty(p) || typeof this[p] != 'string') {
continue;
}
var value = this[p];
properties.push(value === '' &#63; '-' : value);
}
var url = location.origin + location.pathname + location.search + "#" + properties.join('|');
location.replace(url);
}
};
})(); 

Kelas ini hanya mempunyai 2 kaedah. Kaedah HashQuery.parseFromLocation() menyahsiri tika subkelas HashQuery daripada location.hash dan kaedah HashQuery.updateLocation() menyeri dan mengemas kini tika subkelas HashQuery semasa ke tetingkap lokasi.

Anda boleh melihat bahawa kelas HashQuery tidak mempunyai sebarang atribut Itu kerana kami hanya menentukan kelas asas dan atribut kelas semuanya ditakrifkan dalam subkelas. Ini juga realistik, kerana syarat pertanyaan hanya mengetahui atribut yang ada pada halaman tertentu.

Selain itu, sila beri perhatian kepada pensirilan dan penyahserilan di sini. Pensirian di sini hanya menggunakan mekanisme refleksi JavaScript untuk memisahkan nilai semua atribut rentetan (mengikut urutan) contoh dengan "|" manakala bersiri adalah untuk memisahkan rentetan dengan "|" dan kemudian menggunakan refleksi untuk mengemas kini ia kepada contoh.

Cara menggunakan kelas HashQuery

Ia sangat mudah untuk digunakan.

Langkah pertama ialah mentakrifkan subkelas dan menambah syarat pertanyaan yang diperlukan pada atribut rentetan, seperti kod kami:

(function() {
window.TaskSearchHashQuery = function () {
HashQuery.constructor.call(this);
this.iterationId = '';
this.assignedUserId = '';
this.status = '';
this.keyword = '';
};
TaskSearchHashQuery.constructor = TaskSearchHashQuery;
TaskSearchHashQuery.prototype = new HashQuery();
})(); 

Langkah kedua ialah memanggil kaedah HashQuery.parseFromLocation() dan HashQuery.updateLocation() pada halaman pertanyaan. Kod di bawah ialah halaman pertanyaan lengkap kami:

(function() {
var urls = {
list: "/app/task/list"
};
var hashQuery = null;
var pager = null;
$(document).ready(function () {
hashQuery = new TaskSearchHashQuery();
hashQuery.parseFromLocation();//在这里调用的哦，从location反序列化object
updateFormByHashQuery();
$("#btnSearch").click(function() {
updateHashQueryByForm();
hashQuery.updateLocation();//在这里调用的哦，将查询条件序列化之后更新到location.hash
$("#lblCount").html("加载中...");
pager.reload();
page.hideSearch();
});
pager = new ListPager("#listTasks", urls.list);
pager.getPostData = function(index) {
return "pageIndex=" + index + "&pageSize=" + "&projectId=" + page.projectId
+ "&iterationId=" + hashQuery.iterationId
+ "&assignedUserId=" + hashQuery.assignedUserId
+ "&status=" + hashQuery.status
+ "&keyword=" + hashQuery.keyword;
};
pager.onLoaded = function() {
$("#lblCount").html("共 " + $("#hfPagerTotalCount").val() + " 个任务");
$("#hfPagerTotalCount").remove();
};
pager.init();
});
function updateHashQueryByForm() {
hashQuery.iterationId = $("#ddlIterations").val();
hashQuery.assignedUserId = $("#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);
};
})(); 

Ringkasan

Ini adalah semua pengetahuan tentang menggunakan location.hash untuk menyimpan keadaan halaman dalam projek kami. Saya tidak tahu bagaimana semua orang mengendalikan keperluan sedemikian dalam projek WEB mereka?

Kandungan di atas ialah teknik status halaman simpanan location.hash yang diperkenalkan oleh editor Saya harap ia akan membantu semua orang!