javascript - Hashbang 与 URI 解析

Question

我希望将我的站点移动到完全异步文档加载中，但我不想使用请求处理的 #! 方法，因为 1) 我不想断开链接，和 2) 我想要一种更灵活的方式来处理站点获取的 URI。

我已经能够为我的网站构建一个轻型 MVC，它允许通用样式的 url(例如:http://ddrewdesign.com/blog/jquery-is-or-is-child-of-function)发出正确的请求。

我的问题是:这很容易做到。我错过了什么？为什么 Gawker 和 Google 选择了 #!，而这种方法从用户体验的 Angular 来看似乎更有意义？

编辑

为了澄清，最初，我的站点仅使用查询字符串方法(没有mod_rewrite)来检索请求。这些链接遍布整个网络，我不能让它们中断。据我了解，如果我开始使用 hashbang 方法，他们会这样做。再说一次:这可能是我的困惑的一部分，所以我并不是说我已经解释了一切。我在问我遗漏了什么，因为到目前为止我读过的任何东西都没有让我觉得我可以容纳那个查询字符串。

Answer 1

我认为您正在寻找 history.pushState url，它允许您进行部分页面加载，并且在使用和不使用 javascript 时具有相同的 url。

例如，假设您的基本 url 是 http://site.com/ 使用 history.pushState，您可以使用 javascript 将页面修改为 javascript.htm，以便 url 更改为 http://site.com/javascript.htm。

#! url 仅适用于 javascript，因为无法在服务器端访问#fragment。使用 hashbangs，您的 url 将类似于 http://site.com/#javascript.htm 请注意 ! 是不必要的。由于您可以在散列后设置任何内容，因此您还可以使用 url http://site.com/#!/javascript.htm。

不幸的是，由于 IE 不支持 history.pushState，您必须使用 #! url 作为后备。

这两种方法都不会破坏后退按钮，但必须为每种方法设置不同的 url。

Hashbangs 是这样工作的:

function change(){
   //page update logic
}

//hashchange event binding
(typeof window.addeventListener === "function")
    ? window.addEventListener("hashchange", change, false)
    : window.attachEvent("onhashchange", change);

 //This is how the hash is set
 location.hash = "hashstring";

 //Accessing it returns the hashstring, with a #
 location.hash; //returns #hashstring

History.pushState 有点复杂，因为您将页面的“状态”存储在一个对象中。

这里有一些关于此方法的很好的引用资料:

• Javascript:权威指南第 6 版
• https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
• http://diveintohtml5.ep.io/history.html

这两种方法都需要 javascript 页面操作。我有一个此类网址的示例。 http://timshomepage.net/comic/有指向一堆不同网络漫画的链接，并将它们嵌入到页面的 iframe 中。禁用 javascript 后，链接将类似于 http://timshomepage.net/comic/dilbert。 .使用 history.pushState，我可以拥有相同的 url。使用 hashbang 回退，我得到这样的 url:http://timshomepage.net/comic/#!/dilbert