开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
History API 与 Hashbang 的对比 - 技术翻译 - 开源中国社区

History API 与 Hashbang 的对比 【已翻译100%】

标签: <无>
kenzone 推荐于 4年前 (共 9 段, 翻译完成于 01-18) 评论 2
收藏  
34
推荐标签: 待读

智能状态处理

哈希bang(#!),哈希(#),甚至HTML5的历史API(pushState,popState)都有一些问题。这篇文章将一一谈及这些问题,包括它们的用例,然后会提到问题解决方案的进化史。只要一点简单的学习之后,你就能有所提升,获得更好的用户体验,同时你的解决方案也会有更好的兼容性、可访问性和可维护性。

问题

有关哈希bang的问题

1.频繁地访问、映射以及逃离你的站点上的应用会破坏旧有的网站结构:

   1.把我们正在使用的旧有URL http://mywebsite.com/page1重定向到http://mywebsite.com/#!page1

   2.编写一个非哈希改变事件代码钩住http://mywebsite.com/#!page1,并且发送一个ajax请求到一些常去的服务端代码用来掌控那个ajax

   3.保证http://mywebsite.com?_escaped_fragment_=page1与我们本该期望的旧有URL http://mywebsite.com/page1一致,并且保证可以通过搜索引擎访问。

2.对于关闭js的用户,你的站点将不再工作【注意:这与上面1.1方案有关。一个客户端javascript重定向,对于平均请求来说代价过高,对于关闭js的用户会支持提供期望的旧有页面。】也不再会被搜索引擎抓取到,除了谷歌(网站地图必须提供给他们)。

wisedonkey
 翻译得不错哦!

有关哈希的成对问题

如果用哈希的话,下面这些问题是不能避免的.

  1. 对于同一内容有两种url可用
    1. http://twitter.com/baluptonandhttp://twitter.com/#!/balupton
    2. http://mywebsite.com/page1andhttp://mywebsite.com/#/page1
  2. 如果我们在主页启动,URL将会被污染
    1. http://www.facebook.com/balupton#!/balupton?sk=info
    2. http://mywebsite.com/page1#/page2
  3. 如果一个用户同另一个禁用js的用户共享一个哈希,那么这个用户将不会得到正确的页面
  4. 当一个哈希url被加载后,性能和体验成为问题.
    1. 当一个用户访问http://mywebsite.com/page1#/page2,浏览器开始访问http://mywebsite.com/page1,之后发送ajax请求加载page2,因为初始化访问引起两次加载而不是一次.
    2. 这个问题会让用户感到烦人,产生了体验问题,用户可并不喜欢“加载”页面,或者是它们滚动初始页面为了是让其消失并改变页面.
yale8848
 翻译得不错哦!

过分设计产生的成对问题

这些成对出现的问题也是因为用哈希,尽管它们产生的原因是过分的设计,但其实这是很容易避免的。
  1. 用hashbang并继承了它的问题.
  2. 没有支持传统的url,强迫用户使用哈希url;禁止非js用户使用站点和搜索引擎.
    1. http://twitter.com/baluptonforces a redirect tohttp://twitter.com/#!/balupton
  3. 自定义编码以及分离AJAX控制器动作导致客户端和服务端停止DRY(避免重复代码)和最好的优雅的体验
yale8848
 翻译得不错哦!

解决方案

警告

跟着是一些漂亮的粗体语句;特别是当这些语句挑战着很长时间以来人们的做事方式。所以,让我们把自我放在一边,谦虚地敞开心胸来学习新的做事方式。敞开地学习一些漂亮的做事新方式?太好了,我们继续。

为什么哈希Bang是不必要的?

哈希Bang确实没有必要;以谷歌的立场,它被视作为过度工程。下面的代码片就是你传统网站需要的,使用哈希并且提供富ajax体验,它支持搜索引擎、关闭js的用户甚至谷歌分析:

点我看代码片

这段代码做了什么?

1。当http://mywebsite.com/page1被访问时,它就像传统方式一样工作,所以搜索引擎和关闭js用户是被自然支持的。没有任何多余的服务器端路由、映射或逃离。你给网站编码就像你正常所为的那样。

2.当http://mywebsite.com/#/page1被访问时,将执行一个ajax请求到我们的传统url:http://mywebsite.com/page1,去取那个HTML页面,把页面内容加载到我们已存在的网页。

所以,我们有了一个可以被搜索引擎和js关闭用户访问的可抓取的ajax解决方案,不用添加任何服务端代码。用谷歌试试吧!

wisedonkey
 翻译得不错哦!

优化AJAX响应

上面的已经很不错了,但每次发送AJAX请求时它仍然是获取整个页面,我们实际上只需加载我们需要的内容(没有布局的数据)。让我们使用下面的服务器端代码:

查看代码片段(译者注:原文只有链接,我把代码拷过来了)

<?php
	// Our Page Action
	public function pageAction ( ) {
		// Prepare our variables for our view
		// ...
		
		// Handle our view
		return $this->awesomeRender('page.html');
	}
	
	// Render Helper
	public function awesomeRender ( $template ) {
		// Get the full template path
		$template_path = ...
		
		// Render the template
		$template_html = $this->view->render($template_path);
		
		// Check for the XHR header
		if ( IS_XHR ) {
			// We are a AJAX Request, return just the template
			$this->sendJson({'content':$template_html});
		}
		else {
			// Wrap the Template HTML with the Layout and proceed as normal
			// ...
		}
		
		// Done
	}

这里,如果http://mywebsite.com/page1发送一般的请求,就执行一般的页面渲染过程,发送带布局的页面。如果发送的是AJAX请求,那就只返回JSON格式的数据。这很容易扩展,我们可以将JSON数据同渲染的页面一同发送。事实上jQuery Ajaxy自从2008年7月以来就提供了上面方法的实现,同样在服务器端我们也有Zend Framework Action Helper来帮助我们进行简单有效的优化(提供子页/字模板、数据拼接、缓存等支持)。

现在我们有了搜索引擎友好的ajax方案,并且性能相当优化。当然,与#相关的问题还是没有解决,只要我们继续使用#这些问题就不可避免。

realZ
 翻译得不错哦!

HTML5历史API-我的救世主

目前HTML5历史API的出现简直成为我们的救世主,它一次性的解决了所有成对出现的问题。它允许用户直接修改URL,并能添加数据和主题,所有这些都没有改变页面!耶!下面就来看看我更新的代码例子:

代码小片段

现在让所有的HTML5浏览器支持HTML5历史API是有些困难;悲观主义者可能把这个看成是阻碍而且会认为失败,而乐观主义者出来创建了一个叫History.js的工程,它可以提供一个在HTML5也HTML4之间能兼容的体验,并解决了浏览器所有的故障和问题。事实上,上面的代码已经能用History.js很好的工作了-向曲线学习说再见,你已经准备好了。

yale8848
 翻译得不错哦!

支持HTML4浏览器-终极任务

好的...那么HTML4浏览器呢?难道它错过了令人惊奇的HTML5历史API?也许吧,也不一定。那么你得做出严肃的决定和认真的考虑。你应该问问你自己-什么对于我来说是更加的重要;支持富web2.0的HTML5 ajax体验和用户用带有哈希问题的HTML4浏览器访问,或者用不支持web2.0ajax的HTML4浏览器没有遇到哈希问题。只有依据你的站点以及用例和用户才能做出决定。

yale8848
 翻译得不错哦!

将所有的放在一起

好的,我所需要的就是用History.js,上面的代码能解决生活问题吗?不,如果我想要支持HTML4浏览器来解决上面成对出现的哈希问题是不是对于我来说不是一个大问题吗?不,如果我想要优化AJAX返回值我现在知道怎么去实现吗?不,我只能感到这是很棒的。

那么之后呢?

History.js目前已经稳定了。后边要做的就是整理文档,教育,扩展框架--比如说和其它管理系统进行整合。Benjamin Lupton一直在致力于开发它们,而且他也愿意帮助你的。如果你也想提供帮助(甚至你并不知道你怎样能提供帮助),请和他联系-下面是他详细的介绍:)

yale8848
 翻译得不错哦!

结束

想要评论,关注,反馈,交流?下面是详细介绍。

Benjamin Lupton

喜欢它,分享它

你可以分享一些很有价值的练习!下面是一些微博信息:

yale8848
 翻译得不错哦!
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们
评论(2)
Ctrl/CMD+Enter

很不错的文章
是不是翻译的有点差劲。
顶部