JS是如何实现前端路由的
路由就是根据不同的 url 地址展示不同的内容或页面,早期路由的概念是在后端出现的,通过服务器端渲染后返回页面,随着页面越来越复杂,服务器端压力越来越大。后来ajax异步刷新的出现使得前端也可以对url进行管理,此时,前端路由就出现了。
单页面就是有前端路由来实现的,也就是说网站只有一个页面,点击导航会显示不同的内容,对应的url也在发生改变。在这个过程中,js会实时检测url的变化,从而改变显示的内容。
路由实现的原理:window绑定了监听函数,当url的hash值发生变化的时候会触发hashchange回调,在回调中进行不同的操作,马上刷新页面,从而显示不同的页面。
下面是一个前端路由的简单实现:通过路由实现url的切换、页面内容的改变。
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="../plugins/jQuery/jquery-1.12.4.min.js"></script><style>.content {width: 50px;height: 50px;background-color: #00a2d4;}</style></head>
<body>
<ul><li><a href="#/red">turn red</a></li><li><a href="#/blue">turn blue</a></li><li><a href="#/green">turn green</a></li>
</ul>
<div class="content">
</div><script src="router.js"></script>
<script src="test.js"></script></body>
</html>
router
//构造函数
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('/red', function () {$(".content").css('background-color','red')
});
Router.route('/blue', function () {$(".content").css('background-color','blue')
});
Router.route('/green', function () {$(".content").css('background-color','green')
});
注意:router.js要在test.js之前进行调用,不然会先加载test.js从而找不到,出现router.js未被定义。
上面router对象实现主要提供了三个方法
1.init监听浏览器url的hash值更新事件。
2.route存储路由更新时的回调到回调数组routes中,回掉函数将负责对页面进行更新。
3.refresh执行当前url的回调函数,更新页面。
JS是如何实现前端路由的相关推荐
- js路由在php上面使用,director.js实现前端路由使用实例
做过后端开发,尤其是使用过类似Django或者express对服务器端的路由功能应该都比较熟悉,国外流行的博客系统wordpress也是非常经典的路由实现案例.那么,究竟什么的路由呢,下面通过word ...
- 学习随笔1——前端路由和后端路由
一.后端路由阶段:后端处理URL和页面之间的映射关系. 后端渲染,即服务器渲染(早期): 例如jsp:java server page(html+css+java:从数据库中读取数据,并将它动态的放在 ...
- js文件里获取路由 vue_【源码拾遗】从vue-router看前端路由的两种实现
本文由浅入深观摩vue-router源码是如何通过hash与History interface两种方式实现前端路由,介绍了相关原理,并对比了两种方式的优缺点与注意事项.最后分析了如何实现可以直接从文件 ...
- [Vue.js] 路由 -- 前端路由
路由的基本概念与原理 路由 本质是对应关系 后端路由 概念 : 根据不同的用户URL请求,返回不同的内容 本质 : URL请求地址与服务器资源之间的对应关系 SPA 后端渲染(存在性能问题) Ajax ...
- 【前端路由原理--原生JS实现方式】--前后端路由的区别、关于单页面应用与多页面应用、什么是CSR、SSR、SSG、ISP
前言 本来只是想学习 React-Router v6 ,没有想到,带出了这么多东西.前后端路由有什么区别?SPA与MPA的是什么?在了解到前端路之后又发现单页面于应用与多页面应用的不同之处,以及 .n ...
- 简单的基于hash和hashchange的前端路由
hash定义 hash这个玩意是地址栏上#及后面部分,代表网页中的一个位置,#后面部分为位置标识符.页面打开后,会自动滚动到指定位置处. 位置标识符 ,一是使用锚点,比如<a name=&quo ...
- react router 级联路由_前端路由原理解析和实现
作者:@whinc链接:https://github.com/whinc/blog/issues/13 在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大 ...
- html5怎么改为vue_【面试需要Vue全家桶】一文带你看透Vue前端路由
作者 | Jeskson 掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb 2020.1.11 背景介绍 vue router是vue.js ...
- 令人惊叹的前端路由原理解析和实现方式
在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大的路由功能,导致路由实现变的复杂.想要搞懂路由内部实现还是有些困难的,但是如果只想了解路由实现基本原理还 ...
最新文章
- 这就是我为什么推荐使用var aa = for (var i = 0, l = aa.length; i < l; i++) {var a = aa[i];}循环的原因,每秒最快可以执行4000+次!
- pragma指令简介
- webservice jsonp格式调用
- counter 计数器
- 计算机英语手抄报活动主题,八一小学举行学生电脑绘画英语手抄报比赛
- golang 系统级服务器,golang 服务器监控
- 六级词汇打卡第五天(五)
- zznuoj 2174: 水题一发 希望笑纳
- adc信噪比matlab测试代码,ADC测试matlab代码
- BI(商务智能)系统简介
- 抚琴成一快-电吉他内录(Zoom G3为例)
- 喜大普奔:史上最全的报表模板库免费用!
- 后台管理系统UI选型推荐
- 微信朋友圈得内容可以爬取吗?看完这篇你心里就有底了
- 生命起源过程“消失环节”现形
- 帝国CMS手游综合门户网站模板
- CGB2105-Day19
- html5 固定背景,css 背景固定样式background-attachment属性基础
- 一切问题都可以是最优化
- [物联网文章之其三] 剖析物联网解决方案