我刚刚注意到,我们习惯使用的冗长、复杂的Facebook url现在是这样的:
http://www.facebook.com/example.profile !/页面/另一个页面/ 123456789012345
据我所知,今年早些时候,它只是一个普通的类似url片段的字符串(以#开头),没有感叹号。但是现在它是shebang或hashbang(#!),以前我只在shell脚本和Perl脚本中见过。
新的Twitter url现在也有#!符号。例如,一个Twitter配置文件的URL现在看起来是这样的:
http://twitter.com/ !/ BoltClock
是# !现在在url中扮演一些特殊的角色,比如某个Ajax框架或其他什么,因为新的Facebook和Twitter界面现在主要是Ajax化的?
在我的url中使用这个会对我的Web应用程序有任何好处吗?
如果您考虑采用这种hashbang约定,我会非常小心。
Once you hashbang, you can’t go back. This is probably the stickiest issue. Ben’s post put forward the point that when pushState is more widely adopted then we can leave hashbangs behind and return to traditional URLs. Well, fact is, you can’t. Earlier I stated that URLs are forever, they get indexed and archived and generally kept around. To add to that, cool URLs don’t change. We don’t want to disconnect ourselves from all the valuable links to our content. If you’ve implemented hashbang URLs at any point then want to change them without breaking links the only way you can do it is by running some JavaScript on the root document of your domain. Forever. It’s in no way temporary, you are stuck with it.
您确实希望使用pushState而不是hashbang,因为使您的url变得丑陋并可能永远损坏是hashbang的一个巨大而永久的缺点。
八位/数字符号/hashmark在URL中有特殊的意义,它通常标识文档的一个部分的名称。确切的术语是,散列后面的文本是URL的锚部分。如果你使用维基百科,你会看到大多数页面都有一个目录,你可以用锚跳转到文档中的部分,比如:
https://en.wikipedia.org/wiki/Alan_Turing#Early_computers_and_the_Turing_test
https://en.wikipedia.org/wiki/Alan_Turing标识页面,Early_computers_and_the_Turing_test是锚。Facebook和其他javascript驱动的应用程序(比如我自己的Wood & Stones)使用锚的原因是,他们想让页面具有书签功能(就像回答后的评论所建议的那样),或者支持后退按钮,而无需从服务器重新加载整个页面。
为了支持书签和后退按钮,您需要更改URL。但是,如果您更改了页面部分(使用类似window。location = 'http://raganwald.com';)到不同的URL或不指定锚,浏览器将从URL加载整个页面。在Firebug或Safari的Javascript控制台试试这个方法。加载http://minimal-github.gilesb.com/raganwald。现在在Javascript控制台中输入:
window.location = 'http://minimal-github.gilesb.com/raganwald';
您将看到从服务器刷新的页面。现在类型:
window.location = 'http://minimal-github.gilesb.com/raganwald#try_this';
啊哈!没有页面刷新!类型:
window.location = 'http://minimal-github.gilesb.com/raganwald#and_this';
Still no refresh. Use the back button to see that these URLs are in the browser history. The browser notices that we are on the same page but just changing the anchor, so it doesn't reload. Thanks to this behaviour, we can have a single Javascript application that appears to the browser to be on one 'page' but to have many bookmarkable sections that respect the back button. The application must change the anchor when a user enters different 'states', and likewise if a user uses the back button or a bookmark or a link to load the application with an anchor included, the application must restore the appropriate state.
所以你知道了:锚为Javascript程序员提供了一种机制,用于制作可书签、可索引和后退按钮友好的应用程序。这种技术有一个名字:单页接口。
p.s.这种技术还有第四个好处:通过AJAX加载页面内容,然后将其注入到当前DOM中,比加载新页面要快得多。除了速度的提高,更多的技巧,如在后台加载某些部分,可以在程序员的控制下执行。
p.p.s.鉴于所有这些,“bang”或感叹号是对谷歌的网络爬虫的进一步暗示,完全相同的页面可以从服务器加载在一个略有不同的URL。参见Ajax爬行。另一种技术是使每个链接指向服务器可访问的URL,然后使用不引人注目的Javascript将其更改为带有锚的SPI。
这里又是一个关键的链接:单页界面宣言
首先,我是raganwald所引用的《单页界面宣言》的作者
正如raganwald解释得很好,FaceBook和Twitter中使用的单页接口(SPI)方法最重要的方面是在url中使用哈希#
角色!是仅为谷歌目的添加的,这个符号是谷歌的“标准”,用于在AJAX上爬行网站(在极端的单页面界面网站)。当谷歌的爬虫发现一个URL与#!它知道一个替代的传统URL存在,提供相同的页面“状态”,但在这种情况下,在加载时间。
尽管有#!组合是非常有趣的搜索引擎优化,只支持谷歌(据我所知),与一些JavaScript技巧,你可以建立SPI网站搜索引擎优化兼容的任何网络爬虫(雅虎,必应…)
SPI宣言和演示不使用谷歌的格式!在哈希中,这个符号可以很容易地添加,SPI爬行可以更容易(更新:现在!使用符号,并与其他搜索引擎保持兼容)。
看看这个教程,是一个简单的ItsNat SPI站点的例子,但你可以为其他框架选择一些想法,这个例子是SEO兼容的任何网络爬虫。
困难的问题是生成任何(或选定的)“AJAX页面状态”作为纯HTML进行SEO,在ItsNat是非常简单和自动的,同一站点是在同一时间SPI或基于页面进行SEO(或当JavaScript被禁用的可访问性)。对于其他web框架,你可以遵循双站点方法,一个站点是基于SPI的,另一个页面是基于SEO的,例如Twitter使用这种“双站点”技术。