在单页面应用程序(SPA)中,前端通过url的改变来渲染不同的页面, 但希望能将url的页面记录下来。这样可以使用浏览器的后退前进键来返回上一页。
要实现这一点,首先要实现前端路由。根据路由的不同,渲染不同页面,执行不同方法。
简单的前端路由有两种实现方式:
1. hash
2.history API
//------------------------------------------------------------------------------------------------
下面介绍第一种hash的方式。
这一方式,主要是通过监听onhashchange事件来实现的,但是有浏览器兼容性问题。下面是浏览器支持的情况(截图来源:http://www.runoob.com/jsref/event-onhashchange.html)。
在不支持此事件的浏览器中,可以通过轮询hash是否变化来实现。
下面是实现了简单前端路由功能的一个小demo。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.content{
position:absolute;
left: 0px;
top:0px;
display: none;
}
</style>
</head>
<body>
<div id="index-page" class="content">
<ul>
<li><a href="#/index">index</a></li>
<li><a href="#/text">text</a></li>
<li><a href="#/news">news</a></li>
<li><a href="#/about">about</a></li>
<li><a href="http://www.baidu.com">baidu</a></li>
</ul>
</div>
<div id="text-page" class="content">
<h1> this is text page</h1>
<a href="#/index">back</a>
</div>
<div id="news-page" class="content">
<h1>this is new page</h1>
<a href="#/index">back</a>
</div>
<div id="about-page" class="content">
<h1>this is about page</h1>
<a href="#/index">back</a>
</div>
<script>
//构造函数
function Router(){
this.routes={};
this.currentURL='';
}
//定义路由回调函数
Router.prototype.route = function(path,callback){
this.routes[path] = callback || function(){};
}
//定义路由更新时的调用函数
Router.prototype.refresh = function(){
this.currentURL = location.hash.slice(1) || '/index';
try { //抛出路由不正确的路由
this.routes[this.currentURL]();
}
catch(err) {
alert("请输入合法路由");
}
}
//路由初始化函数,添加监听事件
Router.prototype.init = function () {
var that = this;
if (window.addEventListener) {
window.addEventListener("load",function(){that.refresh();},false);
if ( "onhashchange" in window.document.body ) {
window.addEventListener("hashchange",function(){that.refresh();},false)
}else{
onhashchange_compatibility(that);
}
} else if (window.attachEvent) { //ie低版本兼容
window.attachEvent("onload",function(){that.refresh();},false);
window.attachEvent("onhashchange",function(){that.refresh();},false)
onhashchange_compatibility(that);
}
//bind()函数IE8以下不支持
// window.addEventListener('load',this.refresh.bind(this),false);
// window.addEventListener('hashchange',this.refresh.bind(this),false);
}
//轮询url的变化
function onhashchange_compatibility(that){
var location = window.location,
oldURL = location.href,
oldHash = location.hash;
// 每隔100ms检查hash是否发生变化
setInterval(function() {
var newHash = location.hash;
if ( newHash != oldHash) {
that.refresh();
oldURL = location.href;
oldHash = newHash;
}
}, 100);
}
//自定义路由更新时的回调函数
function display_page(id){
var el = document.getElementsByClassName("content");
for(var i = 0; i < el.length; i++){
el[i].style.display = "none";
}
el[id].style.display = "block";
}
window.Router = new Router();
//将合法路由以及执行的回调函数写入routes
Router.route('/index',function(){
display_page(0);
})
Router.route('/text',function(){
display_page(1);
})
Router.route('/news',function(){
display_page(2);
})
Router.route('/about',function(){
display_page(3);
})
//初始化
window.Router.init();
</script>
</body>
</html>
//叨叨-----------------------------------------------------------------------------------
这是我的学习笔记,参考网上的博文写的代码,网址找不到了,所以没贴出来。
每挖一个坑,会发现里面超级深,初入门,请多指教。