1

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

jQuery BBQ 插件的问题在于它要求 href 在其中包含一个哈希，例如 href="#/photos/1"

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

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

谢谢

4

1 回答 1

2

如果您想使用可以同时适用于 JS 和不支持/启用 JS 的浏览器的单个 URL 结构，您可以检查浏览器是否支持 JS 并相应地更改导航链接。如果浏览器确实支持/启用了 JS，请添加一个哈希并使用window.location.hash. 示例网址：

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 并提取导航数据：

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(or $.post) 函数添加更多变量来解决。

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

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

于 2010-10-04T23:24:25.743 回答