响应浏览器地址栏#(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 有没有发生变化，如果有，就运行用户指定的回调方法。代码如下：

1. historyWatcher = function() {
2.     var timer, last;
3.     return {
4.         register: function(fn, thisObj) {
5.             if(typeof fn !== 'function') return;
6.             timer = window.setInterval(function() {
7.                 if(fn && location.hash !== last) {
8.                     last = location.hash;
9.                     fn.call(thisObj || window, last);
10.                 }
11.             }, 100);
12.         },
13.         stop: function() {
14.             timer && window.clearInterval(timer);
15.         },
16.         set: function(newHash) {
17.             last = newHash;
18.             location.hash = newHash;
19.         }
20.     };
21. }();

因为它要比较 hash, 所以如果需要更新 hash, 则必须调用 hashWatcher.set() 方法，传入新的 hash。hashWatcher.register() 方法接受两个参数：回调和上下文（可选），hash 发生变化后，新的 hash 会作为唯一的参数传递给回调方法。

hashWatcher的使用方式通常有两部分：

• 注册回调方法：
  1. hashWatcher.register(function(hash) {
  2.   // do something here...
  3. });
• 必要的时候更新 hash:
  1. hashWatcher.set('#op1/obj1');

通常，用于处理 hash 变化的回调 (handler) 只有一个。因此，在设计上，这里只是暴露了一个方法，而不是用采用更复杂的自定义事件的方式。同理，hashWatcher 被设计成一个“静态类”──直接使用，无需实例化。如果需要使用多个回调，可修改上面的代码，让 hashWatcher.register() 返回定时器实例 (timer), 在调用hashWatcher.stop() 时传入这个 timer.

这段代码仅提供了处理 hash 变化（由应用设置或浏览器导航按键触发）的机制，进一步的恢复操作场景，与具体业务有关，这里就不再讨论了。近期会提供应用于支付宝某项目的实例 (不仅仅是 demo)链接，敬请期待