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 live
May 15 Javascript
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
JS隐藏参数post传值实例
Apr 18 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
js前端面试题及答案整理(一)
Aug 26 Javascript
js实现网页定位导航功能
Mar 07 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
node实现分片下载的示例代码
Oct 17 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下使用curl模拟用户登陆的代码
2010/09/10 PHP
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
php实现网页端验证码功能
2017/07/11 PHP
PHP反射学习入门示例
2019/06/14 PHP
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
详解小程序缓存插件(mrc)
2018/08/17 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
详解python中的 is 操作符
2017/12/26 Python
python实现自动发送邮件
2018/06/20 Python
详解Python 正则表达式模块
2018/11/05 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
python中str内置函数用法总结
2020/12/27 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
中国旅游网站:同程旅游
2016/09/11 全球购物
计算机相关的自我评价
2014/01/15 职场文书
品牌转让协议书
2014/08/20 职场文书
维稳工作情况汇报
2014/10/27 职场文书
实习生个人总结范文
2015/02/28 职场文书
入党积极分子群众意见
2015/06/01 职场文书
给校长的建议书作文400字
2015/09/14 职场文书