YUI3组件:Browser History Manager

Javascript应用程序经常需要在不刷新整个页面的情况下调用客户端的交互操作来改变页面的状态或内容，浏览器不会记录这种类型的操作，这就 意味着后退和前进按钮不能用来导航这些状态。YUI3的History提供了一个处理浏览器历史的Javascript应用程序接口，可以提供添加书签或 是分享URL，以后再打开的时候就能够恢复这个状态。

模块名：history

History提供了不同的适配器，他们的实现各不相同，但是都用共同的API，分别是：

Y.History – Y.HistoryHash和Y.HistoryHTML5的别名，根据浏览器的支持情况选择这两个适配器中的一个

Y.HistoryHash – 通过修改浏览器的hash标签来实现，这种方式适用于大部分的浏览器，但是也有限制，状态的值必须是key/value的形式

Y.HistoryHTML5 – 使用最新的HTML5 History interface，支持arrays和objects这样的状态存储，并且允许自定义的相关联URL在浏览器地址栏显示而不刷新页面

使用add和addValue方法来创建和改变一个浏览器历史记录状态，然后用户就可以使用后退和前进按钮了。replace和replaceValue方法是用来体会当前的状态。get是获取当前的状态。

YUI().use(’history’, function(Y){
var history = new Y.History();
history.add({kittens: ‘cute’});
history.addValue(’kittens’, ’soft’);
history.replace({kittens: ‘pretty’});
history.get(’kittens’);
});

History的事件有：
可以通过add/replace方法或浏览器导航使浏览器状态发生改变的操作来触发history的事件，全局的一个事件是hitory:change事件，它会通知所有的实例，而不去管它来自哪个源

Y.on(’history:change’, function (e) {
var changed = e.changed,
removed = e.removed;
if (changed.kittens) {
// The “kittens” key was added or changed.
console.log(’kittens were ‘ + changed.kittens.prevVal);
console.log(’kittens are now ‘ + changed.kittens.newVal);
} else if (removed.kittens) {
// The “kittens” key previously existed, but was removed.
console.log(’kittens were ‘ + removed.kittens);
console.log(’kittens have escaped!’);
}
});
如果只想对一个实例添加事件，只需要：
history.on(’change’, function (e) {
// … handle only local changes …
});
还可以监听某个状态的改变事件：
history.on(’kittensChange’, function (e) {
// The “kittens” key was added or changed.
console.log(’kittens were ‘ + e.prevVal);
console.log(’kittens are now ‘ + e.newVal);
});
history.on(’kittensRemove’, function (e) {
// The “kittens” key previously existed, but was removed.
console.log(’kittens were ‘ + e.prevVal);
console.log(’kittens have escaped!’);
});

Hitory还提供了src属性表示事件的源，你可以过滤你不关心的事件源，例如：
Y.on(’history:change’, function (e) {
if (e.src === Y.HistoryHash.SRC_HASH) {
// …
}

除了Y.HistoryHash所提供的功能外，Y.HistoryHTML5还提供了一些其它的功能，如add和replace的第二个或addValue和replaceValue的第三个参数
的一个对象，包含title(历史记录的title)和url(地址栏显示url[同源]),例子：
// Current URL: http://example.com/photos/
history.addValue(’kittens’, ‘cute’, {
title: ‘Photos of cute kittens’,
url  : ‘/photos/kittens?type=cute’
});
// New URL: http://example.com/photos/kittens?type=cute
});

更多请看http://developer.yahoo.com/yui/3/history/

YUI Example : http://developer.yahoo.com/yui/examples/history/history-tabview.html