Hashbang与URI解析

Question

我希望将我的站点移到完整的异步文档加载中，但是我不想使用#!方法来处理请求，因为我不想破坏链接，而我想要一种更灵活的方法来处理站点获得的URI。

我已经为我的站点构建了一个轻量级的MVC，它允许一个公共样式的url (例如：http://ddrewdesign.com/blog/jquery-is-or-is-child-of-function )来做出正确的请求。

我的问题是:这件事做起来很容易。我遗漏了什么？为什么Gawker和谷歌选择#!，而从用户体验的角度来看，这种方法似乎更有意义呢？

编辑

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

Answer 1

我认为您正在寻找history.pushState urls，它允许您执行部分页面加载，并且具有与不带javascript相同的urls。

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

#! urls只适用于javascript，因为#片段不能在服务器端访问。使用hashbang，您的url将类似于http://site.com/#javascript.htm注意到!是不必要的。因为您可以在散列之后设置任何内容，所以您也可以使用url http://site.com/#!/javascript.htm。

不幸的是，由于IE不支持history.pushState，所以必须有#! urls作为后盾。

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

哈什班斯的工作方式如下：

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要复杂一些，因为您将页面的“状态”存储在对象中。

以下是有关此方法的一些很好的参考：

• https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

• http://diveintohtml5.ep.io/history.html

第6版

• Javascript:权威指南

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