cross-browser - 多合一位置/哈希更改历史管理库

Question

首先，我知道有一些库为 location.pushState 提供 polyfill|/popState ( History.js 、 Hash.js 、 jQuery hashchange )，所以请不要只链接到那些。

我需要一个更强大的库来在 RIA 中实现以下目标:

1. 用户点击链接
2. 库收到通知并通过 Ajax 加载上下文(无需完全重新加载!)
3. 所有 <a>元素与点击处理程序一起使用
   • 防止页面在 2. ( preventDefault ) 和
   中重新加载
   • 调用 location.pushState相反/设置 location.hash对于旧版浏览器
4. 加载的内容插入页面并替换当前内容
5. 继续 1。

此外，当用户返回时应该恢复之前加载的内容。

例如，点击 Google+在 Internet Explorer <10 和任何其他浏览器中。

有什么比这更接近的了吗？我需要对 IE8、FF10、Safari 5 和 Chrome 18 的支持。此外，它应该具有像 MIT 或 Apache 这样的宽松许可证。

Answer 1

我相信 Sammy.js ( http://sammyjs.org )(麻省理工学院许可)最专注于你想做的事情，它的 2 个主要支柱是:

1. 路线
2. 事件

我可以引用文档，但它非常简单:

• 设置与要完成的事情相关的客户端路由，例如:通过 ajax 更新 View

• 链接事件调用路由，例如:当我点击一个链接时调用上面的路由。 (你必须确保在定义的事件中调用 e.preventDefault 我相信，因为这真的是一个应用程序决定，所以你将要使用恕我直言的任何库都不能抽象掉它)

一些相关文档

• http://sammyjs.org/docs
• http://sammyjs.org/docs/routes
• http://sammyjs.org/docs/events

路线示例:(来自 http://sammyjs.org/docs/tutorials/json_store_1)

 this.get('#/', function(context) {
    $.ajax({
      url: 'data/items.json',
      dataType: 'json',
      success: function(items) {
        $.each(items, function(i, item) {
          context.log(item.title, '-', item.artist);
        });
      }
    });
  });

或者类似的东西

 this.get('#/', function(context) {
     context.app.swap(''); ///the 'swap' here indicates a cleaning of the view
                              //before partials are loaded, effectively rerendering the entire screen. NOt doing the swap enables you to do infinite-scrolling / appending style, etc. 
     // ...
   });

当然，其他客户端 MVC 框架也可能是一种选择，它会减少更多的管道，但在这种情况下可能有点矫枉过正。

一个非常好的(并且仍然是最近的)比较:

http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/ (我自己使用 Spine.js)。

最后，我认为将我不久前写的一个答案包含在内可能会有用，该答案详细介绍了客户端刷新等方面的整个最佳实践(如我所见)。也许您会发现它有用的:

Accessibility and all these JavaScript frameworks