网页上模拟浏览器前进后退功能(二)

昨天解决这个问题的时候，没有经过仔细测试，今天同事帮我发现了一个问题，就是当用户已经浏览过其他页面、或者在点击返回按钮后，继续点击新页面链接的情况下，昨天写的这个模拟功能会存在bug，因为此时history.length已经有了一个不为1的初始值，导致程序中判断后会出现bug。细想还是因为自己急于项目进度，没有仔细弄懂浏览器前进后退的机制。今天测试了一下浏览器这两个按钮的功能，发现点击后退，再点击新页面链接时，后退过的那部分页面信息会被删除掉。比如，我按照次序浏览了ABCDE五个页面(history.length=5)，然后通过返回按钮，返回到了C页面(history.length=5)，然后再点击页面上的新链接，进入X(history.length=3)Y(history.length=4)Z(history.length=5)这三个页面，那么此时，history.length应该等于5，即ABXYZ的浏览记录。

弄清楚了这个机制，再修改一下代码，总算搞定了问题。实现原理是通过在cookie中存储两个变量，一个模拟history.length的值，另一个代表用户在历史记录中的坐标。

// @charset "utf-8";
// 顶部工具栏
var Controller_Toolbar = function () {
	var self = this,
		_isFirstPage = null,
		_isLastPage = null,
		_initSwitchPageEvent = null,
		_forword = null,
		_goback = null,
		_setCount = null,
		_init = null;
	
	/**
	 * 工具栏事件(前进、后退)
	 * 思路：在cookie中存储两个Integer型变量
	 * cur_news_page	:	当前页下标
	 * total_news_page	:	用户浏览过的页面总数
	 */
	_initSwitchPageEvent = function () {
		$('.back').live('click', function () {
			if (!_isFirstPage()) {
				_goback();
			}
		});
		$('.forword').live('click', function () {
			if (!_isLastPage()) {
				_forword();
			}
		});
		
		$('.btn_left').click(function () {
			_setCount();
		});
		$('.btn_right').click(function () {
			_setCount();
		});
		$('.highlight_tip > span').click(function () {
			if (!$(this).hasClass('current')) {
				_setCount();
			}
		});
		
		
		// 初始样式
		if (!_isFirstPage()) {
			$('.back_disabled').removeClass('back_disabled').addClass('back');
		} 
		if (!_isLastPage()) {
			$('.forword_disabled').removeClass('forword_disabled').addClass('forword');
		}
	};
	
	/**
	 * 计数变量的赋值
	 */
	_setCount = function () {
		var curPage = Util.Cookies.get('cur_news_page');
		curPage = curPage || 1;
		curPage = parseInt(curPage) + 1;
		Util.Cookies.set('cur_news_page', curPage);
		Util.Cookies.set('total_news_page', curPage);
		
	};
	
	/**
	 * 是否为第一页
	 * @returns {Boolean}
	 */
	_isFirstPage = function () {
		var curPage = Util.Cookies.get('cur_news_page'),
		curPage = curPage || 1;
		if (curPage == 1) {
			return true;
		}
		return false;
	};
	
	/**
	 * 是否为最后一页
	 * @returns {Boolean}
	 */
	_isLastPage = function () {
		var curPage = Util.Cookies.get('cur_news_page');
		var totalPage = Util.Cookies.get('total_news_page');
		curPage = curPage || 1;
		totalPage = totalPage || 1;
		if (curPage == totalPage) {
			return true;
		}
		return false;
		
	};
	
	/**
	 * 前进
	 */
	_forword = function () {
		var curPage = Util.Cookies.get('cur_news_page');
		Util.Cookies.set('cur_news_page', (parseInt(curPage) + 1));
		history.go(+1);
		
	};
	
	/**
	 * 后退
	 */
	_goback = function () {
		var curPage = Util.Cookies.get('cur_news_page');
		Util.Cookies.set('cur_news_page', (parseInt(curPage) - 1));
		history.go(-1);
	};
	
	_init = function () {
		_initSwitchPageEvent();
	};
	
	_init();
};