路由就是根据不同的 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的回调函数,更新页面。