Jquery SPAの実装の理解

Question

JQueryを使用してSPA Webサイトを作成しようとしています。私はhistory.pushStateと$(window).on('popstate')の使い方を知っていますが、いくつか質問があります。現在、私はpopstateイベントとナビゲーションリンクを処理するrouter.jsファイルを持っています。リンクをカスタム属性（data-navId = "templates/page/page.html"）またはhrefに配置し、 $(e).preventDefault(); で処理します。ユーザーがリンクをクリックし、$('.page-content').load('url', function() {})とhistory.pushstateが実行されます。

1）これらの 機能を含むrouter.jsファイルをすべてのテンプレートに含める必要がありますか？私はこれらの 関数を含むhtmlを1つだけ必要とします。テンプレートにはHTMLとそれに対応するスクリプトの のみが含まれている必要があります。私はそれを達成することができましたが、ユーザー がスタイリングや何もせずにテンプレートを表示するページを更新する場合。 はハッシュを使っていますか？または、ユーザーがブラウザを閉じて の「以前のページを復元する」オプションを有効にすると、テンプレートは のHTMLのみで読み込まれます。過去には

私だけpopstateとhistory.pushStateを使用してハッシュすることなく、SPAのページを開発しましたが、私は、各ファイルのすべてのhtmlを含め、その後、リフレッシュバグを回避するために$('.page-content').load(url + ' .page-content > *', function() {});を呼び出す必要がありました。

最新のブラウザではpopstate、おそらくModernizr.jsやカスタムライブラリを含めれば、hashchangeの方が古いかもしれません。しかし、どのようにルータはすべてのテンプレートにそれを含めることなく動作しますか？

ありがとうございます。

Answer 1

見つけました。私は、現在のURLを取得するための正規表現（または他の方法）でパラメータを取得し、コンテンツを動的にロードするルータのメインコードが不足していた。また、クエリ文字列やmod_rewrite(Apache)のように処理するのではなく、要求されたテンプレート（ページを挿入する）のフルパスをプッシュするのは間違いです。

ソース（クエリ文字列）：https://stackoverflow.com/a/901144/6128301

まとめると：

=防ぎデフォルトのリンク（A

$('url').on('click', function(e) { 
    e.preventDefault(); 

    var url = $(this).attr('href'); 
    $('.injection-container').load(url + ' > * ', function() { 

     history.pushState({'state': "index?p=" + url}, "Injected Page's Title", "index?p=" + url); 

    }); 

}); 

e.preventDefault： 1）ユーザーは、リンク、以下のコードが実行されるをクリックしますhrefタグ）リダイレクト。 injection-container =コンテンツをロードするページ

url + ' > * ' =取得するコンテンツ。アスタリスクはすべての要素を表します。 注入されたページのメインコンテンツをロードするには：url + '> .injection-container> *'

インデックスはすべてのCSSとJSを保持するメインページです。 また、クエリ文字列をチェックし、どのページを動的にロードするかを決定するrouter.jsファイルを作成する必要があります。拡張モジュールをクリアするためにmod_rewriteを使ってApacheを設定したので、拡張子が.htmlでないことに注意してください。または、URL（window.location.href）を取得して拡張機能を置き換えることもできます。

あなたが必要とする最後の事は、このコードです：

$(window).on('popsate', function() { // PageInjector function like before... })