无法理解History.js，需要简化吗？

Question

我刚接触编程，正在使用jQuery制作一个AJAX网站。

我搜索了很多关于AJAX历史记录处理程序的资料，发现History.js似乎是最好/最新的。

我的菜单按钮各自有自己独特的ID（#homeBtn，#featuresBtn，#pricingBtn），目前看起来像这样：

<a href="#home" class="homeMainMenuButton" id="homeBtn"><div class="homeMainMenuButtonText">Home</div></a>

有人能给我一个示例（最好在jsfiddle上）演示如何实现History.js吗？

我似乎无法理解作者提供的任何示例，我只需要一个简化版本 =b

如果您需要更多信息，请告诉我，谢谢！

- Peter

---

我希望在单击按钮后（加载我的AJAX内容），浏览器的后退/前进按钮能够正常工作。 显然，history.js还允许您收藏页面，并且跨浏览器刷新没有任何问题。 - Peter

我已查看了stack overflow上所有有关history.js的问题以及前5页谷歌搜索结果，但未找到任何简单易懂的教程或示例，你提供的链接也没有 =( 考虑到我已经花费大约6个小时尝试解决这个问题，我感到相当愚蠢... - Peter

你有没有看过jQuery BBQ？ - Clive

据我所知，@Clive jQuery BBQ不支持HTML5 History API。 - balupton

看看这个视频。有很多关于history.js之外的内容，所以跳到51:00看history.js的部分。这是一个非常快速的演示如何使用history.js。如果你对单页应用程序设计感兴趣，视频的其余部分也非常酷。http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159 - Jeremy Armstrong

Answer 1

请按照以下说明进行操作：https://github.com/browserstate/ajaxify

将您的链接从传统的链接 href="#home" 更改为 href="/home" - 确保 http://mywebsite.com/home 可用。这一切都是关于优雅的升级。

- balupton

---

很遗憾，链接已失效。 - antinome

Answer 2

我认为你需要的“简化”版本是路由器抽象层。我为自己编写了一个简单的路由器抽象层，称为StateRouter.js。它基本上负责将应用程序支持的URL定向到正确的函数，甚至可以定义路由的参数部分（例如，http://example.com/persons/id 的“id”部分变成函数参数）。

以下是一个简单的示例代码，演示了如何使用它：

var router = new staterouter.Router();
// Configure routes
router
  .route('/', getHome)
  .route('/persons', getPersons)
  .route('/persons/:id', getPerson);
// Perform routing of the current state
router.perform();
// Navigate to the page of person 1
router.navigate('/persons/1');

这里有一个小 fiddle，我为了演示它的用法而创建。

- aknuds1

---

@Justin Gah，我想我必须将文件托管在其他地方。 - aknuds1