了解Jquery SPA实现

Question

我正试图用JQuery创建一个SPA网站。我知道如何使用history.pushState和$(window).on('popstate')，但我有一些问题。目前我有一个router.js文件，它处理popstate事件和导航链接。我将链接放在自定义属性(data-navId="templates/page/page.html")或href中，并使用$(e).preventDefault();用户点击链接，执行$('.page-content').load('url', function() {})和history.pushstate。

1)我是否被迫包含包含以下内容的router.js文件每个模板中的函数？我想要一个包含以下内容的html功能。模板应仅包含HTML及其相应的脚本。我设法做到了，但如果用户刷新模板显示的页面，而不设置样式或任何内容。是使用散列来回答？或者，如果用户关闭浏览器并"恢复以前的页面"选项激活后，模板将仅使用其html加载。

过去，我只使用popstate和history.pushState开发了没有哈希的SPA页面，但我必须在每个文件上包含所有html，然后调用$('.page-content').load(url + ' .page-content > *', function() {});来避免刷新错误。

我还知道，facebook在现代浏览器中使用popstate，在旧浏览器中使用hashchange，可能是通过包含Modernizr.js或一些自定义库。但是，如果不将路由器包含在每个模板中，路由器是如何工作的呢？

提前谢谢。

Answer 1

我找到了！我缺少路由器的主要代码，即检索当前url，使用regex(或任何其他方式)获取参数，并动态加载内容。此外，我还犯了一个错误，即推送请求模板的完整路径(要注入的页面)，而不是像查询字符串或通过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=阻止默认链接(a href标记)重定向。注入容器=要将内容加载到的页面

url + ' > * '=要获取的内容。星号代表所有元素。您还可以使用以下方法加载注入页面的主要内容：url+'>.injection container>*'

索引是包含所有CSS和JS的主页面。您还应该创建一个router.js文件，该文件检查查询字符串并决定将动态加载哪个页面。注意，上面没有.html扩展，因为我使用mod_rewrite配置了apache来清除扩展。或者，您可以通过获取url(window.location.href)来替换扩展名。

你最不需要的就是这个代码：

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