路由
路由发展史
- 路由——这个概念最早出现在后台。
- 传统的mvc架构的web开发(前后端未分离),由后台设置路由规则,当用户发送请求(页面交互)时,后台根据设定的路由规则将数据渲染到模板中,并将模板返回给用户,因此,用户每发送一次请求(后台交互)就要刷新一次页面,用户体验十分不好。
- Ajax的出现有效解决了这一问题。Ajax时浏览器提供的一种技术方案,采用异步加载数据的方式实现页面局部刷新,极大提升了用户体验。
- 再后来出现了SPA(单页面应用),不仅也页面交互无刷新,页面跳转也可以无刷新,前端路由也就随之产生。
前端路由
- 前端路由——仅改变页面地址,使用前端代码刷新页面,而不向后端服务器实际发送请求的组件,就称为前端路由。
- 广义上的前端路由是指前端根据URL来分发视图,两个核心操作:一是需要监听浏览器地址的变化;二是需要动态加载视图。
- 使用原生javascript实现前端路由:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<ul>
<li>
<a href="#/">Home</a>
<a href="#/about">About</a>
</li>
</ul>
<div id="view"></div>
</div>
</body>
<script>
let Home = '<h1>This is Home!</h1>';
let About = '<h1>This is About!</h1>';
let Router = function (el) {
let view = document.getElementById(el)
let routes = []
let load = function (route) {
route && (view.innerHTML = route.template)
}
let redirect = function () {
let url = window.location.hash.slice(1) || '/'
for (let route of routes) {
url === route.url && load(route)
}
}
this.push = function (route) {
routes.push(route)
}
window.addEventListener('load', redirect, false);
window.addEventListener('hashchange', redirect, false)
}
let router = new Router('view')
router.push({
url: '/',
template: Home
})
router.push({
url: '/about',
template: About
})
</script>
</html>
- 浏览器的内置对象window在页面加载和Url变化时添加了监听器,用来以分发视图。