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 相关文章推荐
JQuery中each()的使用方法说明
Aug 19 Javascript
Prototype源码浅析 Number部分
Jan 16 Javascript
微信JSSDK上传图片
Aug 23 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
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使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
Python中List.count()方法的使用教程
2015/05/20 Python
Python中datetime模块参考手册
2017/01/13 Python
python与php实现分割文件代码
2017/03/06 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
Python matplotlib实时画图案例
2020/04/23 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
消防应急演练方案
2014/02/12 职场文书
大学运动会入场词
2014/02/22 职场文书
个人收入证明范本
2015/06/12 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
Python代码,能玩30多款童年游戏!这些有几个是你玩过的
2021/04/27 Python
浅谈Python数学建模之数据导入
2021/06/23 Python
SQL基础的查询语句
2021/11/11 MySQL