首选的客户端路由解决方案？ [关闭]答案

【问题标题】：Preferred client side routing solution? [closed]首选的客户端路由解决方案？ [关闭]
【发布时间】：2011-09-13 00:24:43
【问题描述】：

我正在设计一个基于单页浏览器的 Web 应用程序。

JQuery 已在我的应用程序中使用。我目前计划使用KnockoutJS 进行数据绑定和UI 管理。但是我过去使用过Backbone.js，并且对控制器层提供的路由功能印象深刻。

我还研究了一些基于 JQuery 的解决方案，例如用于客户端路由的 pathjs。

如果有人能为选择合适的路由系统提供建议和指导，那就太好了。

我不愿意使用Backbone.js 代替KnockoutJS，因为KnockoutJS 具有出色的数据绑定功能。

【问题讨论】：

您的问题不够清楚，无法得到答案（对我而言）。你能澄清一下“正确的路由系统”是什么意思吗？
路由系统是指灵活的客户端解决方案，可以将 mydomail.com/#!/action/param1/param2 等 URL 映射到特定操作。
我想你已经读过这个：documentcloud.github.com/backbone/#Controller-routes 如果你打算使用backbone.js，你仍然不确定你在寻找什么。路由基础设施就在那里，您可以根据自己的应用覆盖路由。
PathJS 不是基于 jQuery 的解决方案。它没有外部依赖项，并且不包含其他库。它是完全独立的，但可以与所有其他库一起使用。

【解决方案1】：

Crossroads.js 似乎是最好的之一。它的一个主要优点是，它不依赖 window.location 进行路由。它是轻量级的，因为它坚持只做路由和单独路由。

其他您可能想尝试的：finch.js, davisjs（基于 pushState 以便在 JS 失败时使用现有链接作为后备）

追加更新： 2015 年 3 月 30 日 - 去年年底我搬到了 AngularJS。不折不扣的最好的交换机形式JQ，内置了很多路由等模块。

【讨论】：

嗨，目前我们正在考虑从 Knockout & Crossroads 迁移到 Angular 4。我们的方法将逐页迁移项目，我也可能会尝试将 Crossroads 与 Angular 一起使用。我想知道您在迁移到 Angular 时是否遇到任何问题以及您的经历是什么？最好的问候，
我只使用过 Angular 1.x。 Angular 的 UI-Router 是一个出色的路由框架，它比上面列出的要好得多（因为“状态”）。我没有使用过 Angular 4，但我相信你会找到一个等效的 UI-Router，或者 Angular4 可能已经内置了它。我不确定。

【解决方案2】：

经过一番探索后，我找到了解决方案。 @Eisenhauer Backbone 的路由功能很棒，但是如果我不使用 Backbone 怎么办。正如我在问题中概述的那样，我已经在使用 KnockoutJS，它为我提供了客户端 MVVM 模型，因此在同一页面中放置额外的 MVC 实现并不是一个好主意。

对于寻求独立路由解决方案的人来说，pathjs 是一个简单而优雅的解决方案。

更灵活、更强大和独立的路由解决方案是 Crossroads.js，可在http://millermedeiros.github.com/crossroads.js/ 获得。它有很好的文档记录并且非常强大，因此可以适应任何一组需求。

【讨论】：

绝对同意 PathJs 很棒。它是如此简单和小巧。我正在使用 Saltarelle C# to JS 编译器并创建了一个包装器：github.com/mattleibow/Saltarelle.PathJs
在与您自己类似的设置中，我使用了SammyJS，但现在已经过时，建议使用现代 SPA 框架。

【解决方案3】：

还有优秀的Director

【讨论】：

【解决方案4】：

您可以使用 History API 而不是 hashbang 方法吗？

缺点是旧浏览器不支持它。你可以求助于 hashbang 方法（如果你真的需要的话）。我不知道有任何现有的框架可以做到这一点。我宁愿依靠不动态加载内容（即当用户单击链接时重新加载整页）。历史 API 将得到越来越广泛的支持，因此这个“问题”会随着时间的推移而减少。

这是一个working example 和一些文档。从地址栏中，看起来页面正在加载“老派”（整页刷新），但如果您查看控制台（Firebug、Chrome 开发工具），您可以看到内容正在通过 AJAX 请求获取.

Mozilla 有一些关于它的 docs。

【讨论】：

感谢您真正有见地的回答。由于您的努力，我向我 +1。然而，出于多种原因，路由解决方案是一种更好的方法。请注意，所有客户端路由解决方案仅位于 History API 之上，并提供非常简单的机制来连接 url 与方法/ajax 请求。因此，与手动监控 url 并相应地执行任务相比，基本上大大减少了开发人员要做的工作量。
啊，好的。对不起，我误解了你的意思。由于您提供的示例链接 (mydomail.com/#!/action/param1/param2)，我以为您指的是 hashbang 解决方案。
IE 目前不支持History API（直到v10 caniuse.com/#search=history）history.js 库处理回退到hashbangs。