ページのステータスを保存するための Location.hash テクニック_JavaScript テクニック

ハッシュ属性は、URL のアンカー部分 (# 記号から始まる部分) である読み取りおよび書き込み可能な文字列です。

文法

location.hash

私たちのプロジェクトには、ajax クエリ フォーム + 結果リスト ページが多数あります。クエリ結果は ajax によって返されるため、ユーザーがリスト内の項目をクリックして詳細ページに入り、ブラウザーのバックをクリックすると、ボタンをクリックして ajax クエリ ページに戻ると、この時点でクエリ ページのフォームと結果がデフォルトの状態に戻っていることがわかります。

ページに戻るたびにクエリ条件を再入力する必要がある場合、またはリスト内の特定のページに移動する必要がある場合、ユーザーはこのエクスペリエンスに本当に夢中になるでしょう。

私たちのプロジェクトでは、ページの状態を保存するために location.hash を処理する非常に単純な JavaScript 基本クラスを作成しました。今日はそれを共有します。

(この記事の内容は、クラスの定義、継承、仮想メソッド、リフレクションなど、JS オブジェクト指向の知識が含まれるため、JavaScript 初心者にとっては少し難しいかもしれません)

まずニーズを見てみましょう

私たちのプロジェクトは WeChat をベースにした H5 タスク管理システムです。完成するページのプロトタイプは次のとおりです。

要件は非常に明確である必要があります。つまり、クエリ フォームをクリックし、ajax を使用してクエリ結果を返し、リスト内のタスクをクリックしてタスクの詳細ページに移動します。管理者（プロジェクトマネージャー）は通常、一度に複数のタスクを処理するため、タスク詳細ページとクエリ一覧ページを常に切り替えます。このとき、クエリページの状態がリターンキーを押しても保存できない場合は、クエリページの状態が保存されません。毎回クエリ ページに戻る必要があり、クエリ条件を再入力するという経験は絶対に耐えられません。

したがって、ユーザーが戻るボタンを押したときにクエリ条件と結果がまだそこにあるように、ページのステータスを保存する方法を見つける必要があります。

ソリューションのアイデア

ページのステータスを保存するには多くのアイデアがありますが、location.hash を使用するのが最良の方法であると考えられます。

アイデアは次のとおりです:

1. ユーザーがクエリ条件を入力して [OK] をクリックした後、クエリ条件を文字列にシリアル化し、「#」を介して URL の末尾にクエリ条件を追加して新しい URL を取得し、location を呼び出します。 replace(new url) を使用して、ブラウザのアドレス バーのアドレスを変更します。

2. ユーザーが戻るボタンを押してクエリ ページに戻るとき (ページが読み込まれたときとも言えます)、location.hash をクエリ条件に逆シリアル化し、クエリ条件をクエリ フォームに更新します。クエリを実行します。

アイデアは非常にシンプルです。重要な点は location.replace メソッドです。このメソッドはブラウザのアドレス バーの URL を変更するだけでなく、さらに重要なことに、window.history 内の現在のページのレコードを置き換えます。 location.replace メソッドが使用されていない場合、各ロールバックは前のクエリ条件に戻ります。もちろん、このような要件はプロジェクトによっては役立つ場合があります。

最終解決策

この記事が上記の解決策のアイデアを共有するだけであれば、あまり価値はありません。この記事の価値は、私たちが作成したシンプルだが強力な JavaScript クラスです。

上記の解決策を理解したら、次の簡単な JavaScript クラスを見てください:

(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);
}
};
})(); 

このクラスには 2 つのメソッドしかありません。HashQuery.parseFromLocation() メソッドは location.hash から HashQuery サブクラスのインスタンスを逆シリアル化し、HashQuery.updateLocation() メソッドは現在の HashQuery サブクラスのインスタンスをシリアル化してウィンドウに更新します。 。 位置。

HashQuery クラスには属性がないことがわかります。これは、基本クラスのみを定義し、クラスの属性はすべてサブクラスで定義されているためです。クエリ条件は特定のページにどのような属性があるかのみを認識するため、これも現実的です。

また、ここではシリアル化とデシリアル化にも注意してください。ここでのシリアル化では、インスタンスのすべての文字列属性の値を (順番に) 区切るために JavaScript リフレクション メカニズムのみが使用されますが、シリアル化では文字列が "|" で区切られてからリフレクションが使用されます。それをインスタンスに (順番に) 追加します。

HashQuery クラスの使用方法

使い方はとても簡単です。

最初のステップは、サブクラスを定義し、次のコードのように必要なクエリ条件を文字列属性に追加することです。

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

2 番目のステップは、クエリ ページで HashQuery.parseFromLocation() メソッドと HashQuery.updateLocation() メソッドを呼び出すことです。以下のコードは完全なクエリ ページです:

(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);
};
})(); 

概要

これは、プロジェクトでページの状態を保存するために location.hash を使用することに関するすべての知識です。貴社の WEB プロジェクトでそのようなニーズにどのように対処すればよいかわかりません。

上記の内容は、編集者が紹介したlocation.hashでページのステータスを保存するテクニックですので、皆様のお役に立てれば幸いです。