JS实现前端路由功能示例【原生路由】


Posted in Javascript onMay 29, 2020

本文实例讲述了JS实现前端路由功能。分享给大家供大家参考,具体如下:

路由就是根据不同的 url 地址展示不同的内容或页面,早期路由的概念是在后端出现的,通过服务器端渲染后返回页面,随着页面越来越复杂,服务器端压力越来越大。后来ajax异步刷新的出现使得前端也可以对url进行管理,此时,前端路由就出现了。

单页面就是有前端路由来实现的,也就是说网站只有一个页面,点击导航会显示不同的内容,对应的url也在发生改变。在这个过程中,js会实时检测url的变化,从而改变显示的内容。

JS实现前端路由功能示例【原生路由】

路由实现的原理:window绑定了监听函数,当url的hash值发生变化的时候会触发hashchange回调,在回调中进行不同的操作,马上刷新页面,从而显示不同的页面。

下面是一个前端路由的简单实现:通过路由实现url的切换、页面内容的改变。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>前端路由测试</title>
  <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
 
  <style>
      *{
        margin:0;
        padding: 0;
      }

      .content{
        width: 500px;
        height: 300px;
        margin-top: 30px;
        margin:20px auto 0;
      }

      #click_btn{
        width: 500px;
        height: 50px;
        margin:100px auto 0;
      }

      #click_btn a{
        display: block;
        background: #333;
        color: #fff;
        text-decoration: none;
        line-height: 50px;
        text-align: center;
        float: left;
        margin-right: 15px;
        padding: 0px 15px;
      }

      #click_btn a:hover{
        background: #666;
      }
  </style>
 
</head>
<body>
<div id="click_btn">
  <a href="#/one" rel="external nofollow" >第一个页面</a>
  <a href="#/two" rel="external nofollow" >第二个页面</a>
  <a href="#/three" rel="external nofollow" >第三个页面</a>
</div>

<div class="content"></div>
 
<script src="router.js"></script>
<script src="test.js"></script>
 
</body>
</html>

router.js

//构造函数
function Router() {
  this.routes = {};
  this.currentUrl = '';
}
Router.prototype.route = function(path, callback) {
  this.routes[path] = callback || function(){};//给不同的hash设置不同的回调函数
};
Router.prototype.refresh = function() {
  console.log(location.hash.slice(1));//获取到相应的hash值
  this.currentUrl = location.hash.slice(1) || '/';//如果存在hash值则获取到,否则设置hash值为/
  // console.log(this.currentUrl);
  if(this.currentUrl&&this.currentUrl!='/'){
    this.routes[this.currentUrl]();//根据当前的hash值来调用相对应的回调函数
  }
 
};
Router.prototype.init = function() {
  window.addEventListener('load', this.refresh.bind(this), false);
  window.addEventListener('hashchange', this.refresh.bind(this), false);
}
//给window对象挂载属性
window.Router = new Router();
window.Router.init();

test.js

Router.route('/one', function () {
  $(".content").html("<p>路由就是根据不同的 url 地址展示不同的内容或页面,早期路由的概念是在后端出现的,通过服务器端渲染后返回页面,随着页面越来越复杂,服务器端压力越来越大。后来ajax异步刷新的出现使得前端也可以对url进行管理,此时,前端路由就出现了。</p>");
});
Router.route('/two', function () {
  $(".content").html("<h3>单页面就是有前端路由来实现的,也就是说网站只有一个页面,点击导航会显示不同的内容,对应的url也在发生改变。在这个过程中,js会实时检测url的变化,从而改变显示的内容。</h3>");
});
Router.route('/three', function () {
  $(".content").html("<img src='https://upload-images.jianshu.io/upload_images/12890819-f8665293cc8d0dcf.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp' width='500'/>");
});

注意:router.js要在test.js之前进行调用,不然会先加载test.js从而找不到,出现router.js未被定义。

上面router对象实现主要提供了三个方法

1.init监听浏览器url的hash值更新事件。

2.route存储路由更新时的回调到回调数组routes中,回掉函数将负责对页面进行更新。

3.refresh执行当前url的回调函数,更新页面。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.3water.com/code/WebCodeRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 变量作用域 代码分析
Jun 26 Javascript
Prototype 学习 Prototype对象
Jul 12 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
javaScript函数中执行C#代码中的函数方法总结
Aug 07 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 Javascript
JavaScript如何实现图片处理与合成
May 29 #Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 #jQuery
JavaScript基于用户照片姓名生成海报
May 29 #Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 #Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 #Javascript
JavaScript隐式类型转换代码实例
May 29 #Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 #Javascript
You might like
php 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
php高级编程-函数-郑阿奇
2011/07/04 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
asp批量修改记录的代码
2008/06/25 Javascript
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
使用Python开发windows GUI程序入门实例
2014/10/23 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
医学类个人求职信范文
2014/02/05 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
手机被没收检讨书
2014/02/22 职场文书
森林防火宣传标语
2014/06/27 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
结婚当天新郎保证书
2015/05/08 职场文书