Jquery plugins jQuery深度链接Web应用程序

问题。。。我想建立一个具有深度链接的单页web应用程序（url在单击用户加载的位置时更改），以便用户可以共享链接、书签等

jQuery BBQ插件的问题在于它要求href中包含一个类似href=“#/photos/1”的散列

这意味着我需要确保我的应用程序中的每个URL都以哈希开头。此外，这意味着非JS浏览器将无法工作，因为URL都是散列的

有没有一种优雅的方式来实现一个具有深度链接的单页web应用程序，它可以无缝地适用于JS和非JS浏览器，并且需要更少的代码更改

---

谢谢

如果您想使用一个URL结构，既可以用于JS浏览器，也可以用于不支持JS的浏览器，您可以检查浏览器是否支持JS，并相应地更改导航链接。如果浏览器确实支持/已启用JS，请添加哈希并使用

window.location.hash

检索页面。示例URL：

site.com/#photos/1

如果它不支持JS，您的URL将如下所示：

site.com/photos/1

这样，您只需向URL添加一个

#

。这很容易做到，无论是在脚本本身中，还是在页面加载后使用jQuery更改页面上的链接。您可以使用（假设为Apache/PHP）Apache的ModRewrite将URL重写为以下内容：

site.com/index.php？p=photos&show=1

假设站点是第一次加载，而浏览器不支持JS，根据“页面”和“显示”变量，以正常方式加载应该加载的内容。如果它确实支持JS，您可以像这样存储变量：

<div style="display:none;" id="page">photos</div>
<div style="display:none;" id="show">1</div>
<div id="content"></div>

并且做任何需要做的事情来显示正确的页面

当您单击新链接时，您可以使用各种jQuery插件进行散列导航，或者当链接中没有JS，因此没有散列时，页面将以正常方式加载

为了防止代码重复，您需要将页面设置为可以通过jQuery以正常方式轻松显示的方式。假设您有这个照片页面，您可以在不使用JS的情况下浏览时包含一个“photos.php”，并使用jQuery使用相同的文件：

$.get(page + '.php', {
  show: show
}, function(data) {
  $('#content').html(data);
});

由于“photos.php”将看到完全相同的

$\u GET

变量，因此输出将是相同的

不过，您将获得一些重叠。如果您想显示/发布表单，例如，您可能会以与通过jQuery处理表单不同的正常方式来处理表单。处理表单数据并显示更新页面的正常方式。因此，在“photos.php”的情况下，您需要完整输出。但是，当使用jQuery时，您只希望得到一个结果，例如说“完成”，并在不完全重新加载页面的情况下更改页面。这可以通过向

$.get

（或

$.post

）函数添加更多变量来解决

您可能需要研究（PHP）MVC框架。使用MVC设置时，您可以将站点的所有逻辑（导航/数据库查询等）与视图（即站点上显示的内容）分开。这使得使用相同的逻辑非常容易，但在本例中，对于一个具有普通功能的站点和一个具有基于jQuery的导航功能的站点，可以使用单独的视图

最后，你必须问问自己，经历这些麻烦是否值得。这个网站是给谁的？这些人真的使用没有JavaScript的浏览器吗？真的需要一个不依赖JS的站点吗？如今，大多数人都在使用一款可以很好地处理JS的浏览器，人们出于“安全原因”而禁用它的时间早已过去。维护一个站点的两个版本可能会占用大量的时间和资源（当然这取决于站点的大小），因此可能不值得这么做。在这种情况下，更容易简单地显示一条信息或一个精简的网站，说明用户应该跨入21世纪使用功能齐全的网站

$.get(page + '.php', {
  show: show
}, function(data) {
  $('#content').html(data);
});