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实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
javascript 获取图片尺寸及放大图片
Sep 04 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
在vscode里使用.vue代码模板的方法
Apr 28 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
Vue获取微博授权URL代码实例
Nov 04 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
WHOIS类的修改版
2006/10/09 PHP
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
php ajax 静态分页过程形式
2011/09/02 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
服务行业个人求职的自我评价
2013/12/12 职场文书
学生会招新策划书
2014/02/14 职场文书
党员教师工作决心书
2014/03/13 职场文书
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技
Java使用HttpClient实现文件下载
2022/08/14 Java/Android