前端路由的原理和实现

栏目: JavaScript · 发布时间: 5年前

内容简介：现在基本都是单页面应用，现在单页面应用能够模拟多页面应用的效果，归功于其前端路由机制。现在前端路由有两种形式：如：xxx.xx.com/#/hash，这种方式可以实现刷新跳转，不需要后端进行配合，主要是得益于haschange事件，当锚点哈希改变时，就会调用haschange函数，如：xxx.xx.com/hash 这种模式需要后端路由配合使用。HTML5的History API为浏览器的全局history对象增加的扩展方法。一般用来解决ajax请求无法通过回退按钮回到请求前状态的问题

现在基本都是单页面应用，现在单页面应用能够模拟多页面应用的效果，归功于其前端路由机制。现在前端路由有两种形式：

Hash模式

如：xxx.xx.com/#/hash，这种方式可以实现刷新跳转，不需要后端进行配合，主要是得益于haschange事件，当锚点哈希改变时，就会调用haschange函数，

haschange模拟实现

(function(window) {
  // 如果浏览器原生支持该事件,则退出  
 if ( "onhashchange" in window.document.body ) { return; }
 var location = window.location,
 oldURL = location.href,
 oldHash = location.hash;
 // 每隔100ms检测一下location.hash是否发生变化
 setInterval(function() {
    var newURL = location.href,
    newHash = location.hash;
    // 如果hash发生了变化,且绑定了处理函数...
    if ( newHash != oldHash && typeof window.onhashchange === "function" ) {
    // execute the handler
      window.onhashchange({
        type: "hashchange",
        oldURL: oldURL,
        newURL: newURL
      });

      oldURL = newURL;
      oldHash = newHash;
    }
  }, 100);
})(window);
复制代码

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <ul>
       <li><a href="#/css">css</a></li>
       <li><a href="#/js">js</a></li>
       <li><a href="#/node">node</a></li>
   </ul>
   <div class="wrapper">
       当前选择的是：<span></span>
   </div>
</body>
<script>
    window.onhashchange = function (e) {
        console.log(e);
        document.querySelector('.wrapper span').innerText = location.hash.split('/')[1]
    }
</script>
</html>
复制代码

H5模式

如：xxx.xx.com/hash 这种模式需要后端路由配合使用。HTML5的History API为浏览器的全局history对象增加的扩展方法。一般用来解决ajax请求无法通过回退按钮回到请求前状态的问题

在HTML4中，已经支持window.history对象来控制页面历史记录跳转，常用的方法包括：

history.forward(); //在历史记录中前进一步
history.back(); //在历史记录中后退一步
history.go(n): //在历史记录中跳转n步骤，n=0为刷新本页,n=-1为后退一页。

在HTML5中，window.history对象得到了扩展，新增的API包括：

history.pushState(data[,title][,url]);//向历史记录中追加一条记录
history.replaceState(data[,title][,url]);//替换当前页在历史记录中的信息。
history.state;//是一个属性，可以得到当前页的state信息。
window.onpopstate;//是一个事件，在点击浏览器后退按钮或js调用forward()、back()、go()时触发。监听函数中可传入一个event对象，event.state即为通过pushState()或replaceState()方法传入的data参数。注意调用pushState和replaceState不会触发onpopstate事件

history.pushState({page: 1}, null, '?page=1');
    history.pushState({page: 2}, null, '?page=2');

    history.back(); //浏览器后退

    window.addEventListener('popstate', function(e) {
        //在popstate事件触发后,事件对象event保存了当前浏览器历史记录的状态.
        //e.state保存了pushState添加的state的引用
        console.log(e.state);  //输出 {page: 1}
    });
复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

图解Java多线程设计模式

[日] 结城浩 / 侯振龙、杨文轩 / 人民邮电出版社 / 2017-8 / 89.00元

本书通过具体的Java 程序，以浅显易懂的语言逐一说明了多线程和并发处理中常用的12 种设计模式。内容涉及线程的基础知识、线程的启动与终止、线程间的互斥处理与协作、线程的有效应用、线程的数量管理以及性能优化的注意事项等。此外，还介绍了一些多线程编程时容易出现的失误，以及多线程程序的阅读技巧等。在讲解过程中，不仅以图配文，理论结合实例，而且提供了运用模式解决具体问题的练习题和答案，帮助读者加深对多线......一起来看看《图解Java多线程设计模式》这本书的介绍吧!

码农工具