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

// 代码不支持 IE6 
historyWatcher = function() { 
    var timer, last; 
    return { 
        register: function(fn, thisObj) { 
            if(typeof fn !== 'function') return; 
            timer = window.setInterval(function() { 
                if(location.hash !== last) { 
                    last = location.hash; 
                    fn.call(thisObj || window, last); 
                } 
            }, 100); 
        }, 
        stop: function() { 
            timer && window.clearInterval(timer); 
        }, 
        set: function(newHash) { 
            last = newHash; 
            location.hash = newHash; 
        } 
    }; 
}();

以上代码不支持IE6，我们将在解决IE6兼容问题后更新它。

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

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

注册回调方法：

hashWatcher.register(function(hash) { 
  // do something here... 
});

必要的时候更新 hash

hashWatcher.set('#op1/obj1');

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

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