两种路由的实现hash和history

2019-03-25 本文已影响0人刘凯gg

hash 和 history是主流的两种前端路由实现方式

History API

关于history的详细用法请点击这里

主要说一下新增的两个API history.pushState() 和 history.replaceState()

history

pushState() 和 history.replaceState()一样采用三个参数：状态对象，标题（当前被忽略）和（可选）URL。让我们更详细地研究这三个参数中的每一个

状态对象（state object） — 一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate事件都会被触发，并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。
标题（title） — FireFox浏览器目前会忽略该参数，虽然以后可能会用上。考虑到未来可能会对该方法进行修改，传一个空字符串会比较安全。或者，你也可以传入一个简短的标题，标明将要进入的状态。
地址（URL） — 新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址，但之后，可能会试图加载，例如用户重启浏览器。新的URL不一定是绝对路径；如果是相对路径，它将以当前URL为基准；传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。该参数是可选的；不指定的话则为文档当前URL。

history.replaceState()操作完全一样history.pushState()，只是replaceState()修改当前的历史条目，而不是创建一个新的。请注意，这不会阻止在全局浏览器历史记录中创建新条目。
replaceState() 当您想要更新当前历史记录条目的状态对象或URL以响应某些用户操作时，此功能特别有用。
不同之处在于，pushState()会增加一条新的历史记录，而replaceState()则会替换当前的历史记录。

举一个例子

在百度页面打开控制台输入

window.history.pushState(null, null, "https://www.baidu.com/?name=history");

按下回车会发现地址栏变成这样

上面的例子中改变url页面并没有刷新，同样根据API所述，浏览器会产生浏览记录

注意pushState()的url不支持跨域

通过用户的历史记录中向后和向前移动使用做了back()，forward()和go() 方法。

这里就不多做介绍了详情点击这里

hash

我们经常在 url 中看到 #，这个 # 有两种情况，一个是我们所谓的锚点，比如典型的回到顶部按钮原理、Github 上各个标题之间的跳转等，路由里的 # 不叫锚点，我们称之为 hash，大型框架的路由系统大多都是哈希实现的。

同样我们需要一个根据监听哈希变化触发的事件 ——hashchange 事件

我们用 window.location 处理哈希的改变时不会重新渲染页面，而是当作新页面加到历史记录中，这样我们跳转页面就可以在 hashchange 事件中注册 ajax 从而改变页面内容。

hashchange 在低版本 IE 需要通过轮询监听 url 变化来实现，我们可以模拟如下

(function(window) {

// 如果浏览器不支持原生实现的事件，则开始模拟，否则退出。
 if ( "onhashchange" in window.document.body ) { return; }

 var location = window.location,
 oldURL = location.href,
 oldHash = location.hash;

 // 每隔100ms检查hash是否发生变化
 setInterval(function() {
   var newURL = location.href,
   newHash = location.hash;

  // hash发生变化且全局注册有onhashchange方法（这个名字是为了和模拟的事件名保持统一）
   if ( newHash != oldHash && typeof window.onhashchange === "function"  ) {
     // 执行方法
     window.onhashchange({
       type: "hashchange",
       oldURL: oldURL,
       newURL: newURL
     });

     oldURL = newURL;
     oldHash = newHash;
   }
 }, 100);
})(window)

个人感觉还是hash方案好一点，因为照顾到低级浏览器，就是多了#号感觉不太美观，两者兼容也是可以的，只能根据浏览器的版本给出对应的方案不过也支持IE8+ 还是不错的