最近、私はバックボーンを学んでいます。バックボーンを理解することを学ぶときは、まずスパを理解する必要があります。 SPAを理解するときは、最初にページを更新せずにシングルページアプリケーションがURLを変更する方法を理解する必要があります。
さまざまなページへのジャンプと比較して、Ajaxはユーザーの閲覧体験を大幅に改善したと言えます。ページの切り替えの間に白い画面が見えないのはとても楽しいです。ただし、以前のAJAXアプリケーションの多くは、ブラウザのフォワードおよびバックワードの動きをサポートしていなかったため、ユーザーはウェブサイトの閲覧場所に関係なく元の位置にすぐに戻り、ユーザーはブラウザのフォワードとバックワードの動きを介してブラウジング履歴を切り替えることができませんでした。
最初の問題については、解決するのは非常に簡単です。 CookieまたはLocalStorageを使用して、アプリケーションステータスを記録してください。ページを更新するときにこのステータスを読んでから、対応するAJAXリクエストを送信してページを変更します。しかし、2番目の問題は非常に面倒です。最初に最新のブラウザの解決策について話しましょう。
HTML5ソリューション
HTML5がどのように前進して後方にできるかを理解するには、まず履歴オブジェクトとロケーションオブジェクトを理解する必要があります。
履歴オブジェクト
履歴オブジェクトのプロパティ
1.長さ：ブラウザ履歴リストのURLの数を返します。ユーザーが現在のタグでアクセスする各ページについて、この番号は1によって追加されます。プライバシー上の理由により、特定のURLコンテンツは表示されません。
2.STATE：現在のURLに関連するオブジェクトは、PushStateと置換を介してのみ追加または変更できます。 URLに関連する情報を保存するために使用できます。
履歴オブジェクトメソッド
1.history.back（）
この方法にはパラメーターがありません。トリガー後、ブラウザのバックボタンをクリックするのと同等の前のページに戻ります。
2.history.forward（）
この方法にはパラメーターがありません。トリガー後、閲覧する前に閲覧するページに戻ります。これは、ブラウザのフォワードボタンをクリックするのと同等です。
3.history.go（number）
このメソッドは、シェーピング変数パラメーターを受け入れます。history.go（-1）はページのバックと同等です。histoles.go（1）はページの前進と同等です。histhow.go（0）は現在のページを更新します。
4.history.pushstate（状態、タイトル、url）
URLを変更してページを更新しないための鍵はそれです。このメソッドは、現在のページの場所を変更し、現在のhistory.stateオブジェクトを変更します。実行後、history.lengthは1増加します。この方法は3つのパラメーターを受け入れます。
1.STATE：現在のURLに関連するオブジェクト。
2.タイトル：ページタイトルですが、すべてのブラウザはそれを無視します。タイトルを変更するには、document.titleを使用する必要があります。
3.url：現在のページと同じドメインを持つURL、location.hrefがこの値になります。
5.history.replacestate（状態、タイトル、url）
この方法は上記と同じですが、history.lengthを変更することはありませんが、history.stateとlocation.hrefのみを変更します。
3番目のパラメータープッシュステートと置換はドメインをクロスすることができず、ブラウザのポップステートイベントとOnhashchangeイベント（Chrome33でテスト）をトリガーしないことに注意してください。
ロケーションオブジェクト
フォワード/バックボタンと履歴イベントをクリックすることに加えて、ロケーションメソッドを介してURLを変更して、ロケーションプロパティを変更することもできます。
ロケーションオブジェクトのプロパティ（読み取りと書き込み）：
1.Host：Domain名 +ポート番号
2.HostName：ドメイン名
3.ポート：ポート番号
4.プロトコル：プロトコル
5.href：フルパス
6.Origin：プロトコル +ドメイン名 +ポート
7.ハッシュ：ポンドサインから始まるURL（ハッシュ）（＃）
8. Pathname：ドキュメントパス +ドキュメント名
9.Search :(？）次のコンテンツ
location.hrefまたはlocation.hashを変更することにより、更新の目的を達成できます。
位置オブジェクトの方法：
1. assign：URLの値を変更し、現在のURLを履歴に追加します。長さは1。colation.assig（ '＃' + x）はURLを変更しますが、ページを更新しません。
2.RELOAD：ページを更新します。
3. replace：URLの値を変更しますが、履歴。長さは変更されません。同じ使用方法の割り当て。
ポップステートイベント
たとえば、URLが変更されると、ユーザーがフォワード/バックボタンをクリックした場合、history.go（n）（nは0）をクリックすると、location.hash = x（xは現在の場所に等しくありません。ハッシュ）はこのイベントをトリガーします。これを使用してURLを監視して、さまざまな機能を実装できます。
コードコピーは次のとおりです。
window.onpopstate = function（）{
// sthを行います
}
Onhashchangeイベント
ハッシュ値を変更すると、ポップステートイベントがトリガーされ、ポップステートイベントのトリガーが必ずしもOnhashchangeイベントをトリガーするわけではありません。テスト後：
1。ハッシュの変更がありますが、場所。パスネームは変更されません。History.PushState（ "、"、 '#ABC'）などのOnHashChangeイベントをトリガーします。
2。ハッシュと場所を一緒に変更すると、history.pushState（ "、"、 'a＃abc'）などのトリガーはトリガーされません。
古いブラウザの書き方
古いブラウザはプッシュステートと置換をサポートしていないため、Popstateを介してURLの変更を監視する方法（実際、この方法はサポートしていません）。次に、URL＃の背後にあるコンテンツを変更して更新を達成できないように変更できますが、OnhashChangeはサポートしていないため、URLの変更には無関心です（ページがページの対応するID位置にスクロールすることを除きます）。次に、Ultimate Move：PollとSetIntervalのみを使用して、URLの価値を聞くことができます。このような：
コードコピーは次のとおりです。
var prevhash = window.location.hash;
var callback = function（）{...}
window.setInterval（function（）{
if（window.location.hash！= prevhash）{
prevhash = window.location.hash;
コールバック（prevhash）;
}
}、100）;
もちろん、この文章は非常にイライラします。ハッシュを変更するためにページ上にIDを使用してAタグをクリックすることを検討しない場合は、デザインパターンを使用して監視URLをエレガントに実装できます。たとえば、古典的なオブザーバーパターンは、クラスを使用してハッシュの変更の機能を実装し、次にURLの変更を聞き、この（オブザーバー）クラスを購読するすべてのクラス（オブザーバー）を実装します。
コードコピーは次のとおりです。
// URLクラスを変更します
function urlchanger（）{
var _this = this;
this.observers = [];
//オブザーバーを追加します
this.addobserver = function（obj）{...}
//オブザーバーを削除します
this.deleteobserver = function（obj）{...}
//オブザーバーに通知します
this._notifyobservers = function（）{
var length = _this.observers.length;
console.log（長さ）
for（var i = 0; i <length; i ++）{
_this.observers [i] .update（）;
}
}
// URLを変更します
this.changeurl = function（hash）{
window.location.hash = hash;
_this._notifyobservers（）;
}
}
//リスニングクラス
function oneofofobservers（）{
var _this = this;
this.update = function（）{...}
}
//成し遂げる
var o1 = new UrlChanger（）;
var o2 = new oneofofobservers（）;
O1.AddobServer（O2）;
o1.changeurl（ 'fun/arg1/arg2/'）;
// o2はsthをしました...