查缺补漏,之前对于路由真的不太了解,今天算是恶补吧。内推阶段就是要发现自己的不足,然后赶紧查缺补漏,加油!
在单页面应用中,前端通常需要一套路由机制,这样当url发生变化时就可以做
出一些处理,从而让页面显示不同的内容。
1、什么是路由?
对于没有开发过后端,也没有开发过 SPA 的前端来说,路由这个名词可能会让人比较困惑,这里的路由并不是指「硬件路由」,也不是网络七层协议中的「网络层路由」,但是其思想原理是一样的:
从性能和用户体验的层面来说,后端路由每次访问一个新的页面都要向服务器发送请求,然后服务器再响应请求,这个过程会有延迟的
,而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已,没有网络延迟。
无论是前端还是后端,我们看到的URL其实都是马甲,需要通过路由触发/执行真实需要执行的逻辑路径。
比如,服务器网络地址为 10.0.0.1,而该Web服务器又提供了三个可供用户访问的页面,其页面URI分别是:
http://10.0.0.1/
http://10.0.0.1/about
http://10.0.0.1/concat
上述URI的路径就分别是
/
/about
/concat
当用户使用http://10.0.0.1/about 来访问页面时,服务器会接收到这个请求,然后会解析URI中的路径,该路径对应着相应的处理逻辑,程序会把请求交给路径所对应的处理逻辑,这样就完成了一次路由分发,这个分发就是通过路由实现的。
2、前端路由
下面说一下实现的简要原理
以hash形式为例,当url的hash发生变化时,会触发hashchange注册的回调函数,回调函数中去进行不同的操作,进行不同的内容显示。具体代码如下:
//闭包形成块级作用域
(function () {
function Router () {} //Router构造函数
//在原型中定义方法,为不同的path指定不同的回调函数
Router.prototype.route = function ( path, callback ) {
var url = location.hash.slice(1) || '/'; //获取当前hash值
// 刷新时的处理
window.addEventListener('load', function () {
if ( url == path ) {
callback();
}
}, false);
// hash变化时的处理
window.addEventListener('hashchange', function () {
url = location.hash.slice(1) || '/';
if ( url == path ) {
callback();
}
}, false);
};
window.Router = new Router(); //创建Router对象作为window对象的属性
})();
Router的使用如下:
HTML结构:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单页面的路由</title>
</head>
<body>
<div class="container">
<nav class="mainMenu">
<ul>
<li><a href="#/">首页</a></li>
<li><a href="#/page1">页面1</a></li>
<li><a href="#/page2">页面2</a></li>
<li><a href="#/page3">页面3</a></li>
<li><a href="#/page4">页面4</a></li>
</ul>
</nav>
<div class="content"></div>
</div>
</body>
</html>
Router的使用:
var content = document.querySelectorAll('.content');
// 测试函数,这里可以放一些ajax处理之类的
function loadContent ( text ) {
content[0].innerHTML = text;
}
// 注意:这里的path要和html里面锚链接对应
// 如:‘#/’对应‘/’, '#/page2'对应'/page2'
Router.route('/', function () {
loadContent('这是首页');
});
Router.route('/page1', function () {
loadContent('这是页面1');
});
Router.route('/page2', function () {
loadContent('这是页面2');
});
Router.route('/page3', function () {
loadContent('这是页面3');
});
Router.route('/page4', function () {
loadContent('这是页面4');
});
完整代码可从github下载,这里只是简单的例子,我还要具体的学习React Router,所以博客还会继续更新。