瞭解JQuery的SPA實施

我想用JQuery創建一個SPA網站。我知道如何使用history.pushState和$(window).on('popstate')，但我有幾個問題。目前我有一個處理popstate事件和導航鏈接的router.js文件。我將鏈接放置在自定義屬性（data-navId =「templates/page/page.html」）或href中，並使用 $(e).preventDefault(); 來處理它。用戶點擊鏈接並執行$('.page-content').load('url', function() {})和history.pushstate。瞭解JQuery的SPA實施

1）我是否被迫在每個模板中包含包含這些函數的router.js文件？我只需要一個包含這些函數的html。模板應該只包含HTML及其相應的腳本。我設法做到了這一點，但如果用戶刷新頁面模板顯示沒有風格或任何東西。是使用散列的答案？或者，如果用戶關閉了瀏覽器，並且啓動了「還原以前的頁面」選項，則該模板將僅用加載其html。

在過去，我開發的SPA頁，而僅僅使用popstate和history.pushState哈希，但我必須包括所有對每個文件的HTML，然後調用$('.page-content').load(url + ' .page-content > *', function() {});避免刷新錯誤。

我也知道Facebook使用popstate用於現代瀏覽器，hashchange用於較舊的可能包括Modernizr.js或一些自定義庫。但是，路由器如何工作而不將其包含在每個模板中？

在此先感謝。

來源

2017-10-14 EverCoder

我找到了！我錯過了檢索當前url的路由器的主代碼，使用正則表達式（或其他方式）獲取參數並動態加載內容。另外我犯了推送請求模板（頁面注入）的完整路徑而不是像查詢字符串或通過mod_rewrite(Apache)處理它的錯誤。

源（查詢字符串）：https://stackoverflow.com/a/901144/6128301

綜上所述： 1）用戶點擊鏈接時，執行下面的代碼：

$('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 =防止默認鏈路（一href標籤）重定向。 injection-container =您要加載內容的頁面

url + ' > * ' =要獲取的內容。 Asterisk代表所有元素。您還可以使用以下方式加載注入頁面的主要內容：url +'> .injection-container> *''

索引是保存所有CSS和JS的主頁面。你還應該創建一個router.js文件，它檢查查詢字符串並決定將動態加載哪個頁面。請注意，它上面沒有.html擴展名，因爲我使用mod_rewrite配置了我的apache來清除擴展名。或者，您可以通過獲取URL（window.location.href）來替換擴展名。

你需要的最後一件事是這樣的代碼：

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

來源

2017-10-14 18:57:40 EverCoder

瞭解JQuery的SPA實施

回答

相關問題