响应浏览器地址栏#(hash/fragment)变化

Gmail 作为一个经典的 Web 2.0 应用,在带来革命性的邮件管理体验的同时,以其完整、快速的 AJAX 操作方式,深受用户的推崇和技术人员的追捧。

技术上,Gmail 通过将用户的操作以 #op1/op2 这样的形式(即 hash 或 fragment, 这里称之为 hash)反映在浏览器地址栏,最后得到一个类似这样的 URL: https://mail.google.com/mail/#inbox. 它还允许用户直接粘贴这样的地址到达相同的操作界面,并可以通过浏览器的前进/后退按钮在操作步骤之间跳转。

也想尝试一下?先分析一下,通过获取 hash 的值,执行一些操作,即可恢复到该值表示的场景——非常简单。但是,要处理浏览器前进/后退按钮,跳转到相应场景,则有一定困难。因为浏览器不会告诉你 hash 发生变化了。因此,需要实现一个 JavaScript 浏览器导航按钮处理模块。

网上有些代码实现了类似功能,大多感觉冗长复杂。这里,我们介绍支付宝实际应用中开发的一段代码,它的功能简单实用——允许用户指定 hash 发生变化时要做的事情(回调),也可以随时停止它。简单地说,这个代码的原理是,每隔一段时间检查 hash 有没有发生变化,如果有,就运行用户指定的回调方法。代码如下: ..

5 continue reading