历史页面的栈结构

思考场景

我们常用的浏览器历史页面也是根据这个栈的结构来实现的，只有当我们新访问一个页面的时候，我们的历史页面栈就会加一，当点击返回的时候，只能返回到刚才进入的页面。

我们用一个内嵌的iframe内的历史页面栈来查看其浏览器的history是否和我们设想的是一致的。

代码实现

代码地址：https://codepen.io/robinson90/pen/KjNaEO

function History(){
  let historyStack = new Stack();
  let fowardStack = new Stack();
  this.pushPage = function(page){
    historyStack.push(page)
  }
  this.back=function(){
    if(historyStack.isEmpty()){
      console.log('没有历史页面可以返回')
      return
    }else {
      let page = historyStack.pop();
      console.log('返回页面',page);
      fowardStack.push(page);
    }
  }
  this.forward = function(){
      if(fowardStack.isEmpty()){
      console.log('没有下一步页面可以前进')
      return
    }else {
      let page = fowardStack.pop();
      console.log('前进页面',page);
      historyStack.push(page);
    }
  }
}
let historySample = new History();
historySample.pushPage('baidu');
historySample.pushPage('aiqiyi');
historySample.back()
historySample.forward()
historySample.back()
historySample.back()
historySample.back()
historySample.pushPage('aiqiyi');
historySample.forward()
historySample.forward()
historySample.forward()