jQuery 深度链接 Web 应用程序

Question

问题...我想构建一个具有深层链接的单页 Web 应用程序（点击时 url 会更改为用户加载的位置），以便用户可以共享链接、书签等...

jQuery BBQ 插件的问题是它要求 href 中包含哈希值，例如 href="#/photos/1"

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

有没有一种优雅的方法来完成一个具有深层链接的单页 Web 应用程序，可以无缝地用于 JS 和 Java 语言。非 JS 浏览器，并且需要较少的代码更改？

谢谢

Answer 1

如果您想使用可同时适用于 JS 和不支持 JS 的浏览器的单一 URL 结构，您可以检查浏览器是否支持 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，加载应以正常方式加载的任何内容，具体取决于（在本例中）“page”和“show”变量。如果它确实支持 JS，您可以像这样存储变量：

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

加载页面后，您启动 jQuery 并提取导航数据：

var page = $('#page').html();
var show = $('#show').html();

并执行任何需要执行的操作来显示正确的页面。

当您单击新链接时，您可以使用各种 jQuery 插件进行哈希导航，或者当没有 JS 且链接中没有哈希时，页面将简单地以正常方式加载。

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

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

因为“photos.php”将看到完全相同的 $_GET 变量，输出将是相同的。

不过，您将会得到一些重叠。如果您想显示/发布表单，例如，您可能会以与通过 jQuery 处理此方式不同的正常方式进行处理。处理表单数据并显示更新页面的正常方式。因此，对于“photos.php”，您需要完整输出。但是，当使用 jQuery 时，您只想要一个结果，例如“完成”，并更改页面而不完全重新加载它。这可以通过向 $.get （或 $.post）函数添加更多变量来解决。

您可能想研究 (PHP) MVC 框架。使用 MVC 设置时，您可以将站点的所有逻辑（导航/数据库查询等）与视图（即站点上显示的内容）分开。它使得使用相同逻辑变得非常容易，但是单独视图，在这种情况下，一个具有正常导航的站点和一个具有基于 jQuery 导航的站点。

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