关于怎么去实现一个前端路由
1.why
为什么需要前端路由，其实这是根据后端路由来的，一个路由，简单理解就是系统中的一个页面，传统的模式，路由存在于后端，当访问一个页面时，会从后端返回一个html格式的文件给前端，浏览器再对这个html文件进行渲染，这有一个弊端，每次都会去请求服务器的资源，耗时间，耗网络资源，在Mobile上尤其明显
2.How
那么，有没有什么手段是可以解决上面的问题的呢，答案是有的，一种是采取hash，一种是采取history，当页面路由改变时，去加载不同的页面（对于用户），其实，这是单页的基本原理，对于浏览器而言，当路由不同时，调用不同的js去重新渲染页面
3.hash
这种方式的原理就是，每次hash改变时，获取当前的hash值，对hashchange进行监听即可，页面刷新时，判断当前的hash值，进行匹配
原理有了，我们来看源码吧
function render(pathname) {
var script = document.createElement('script')
switch (pathname) {
case 'index':
script.src = './index.js'
break;
case 'concact':
script.src = './concact.js'
break;
case 'about':
script.src = './about.js'
break;
default:
script.src = './index.js'
}
document.body.appendChild(script)
}
这是render的方法，传入一个hash值，然后对这个hash值进行匹配即可，这边的匹配可以去写一个映射关系，此处不展开，接下来就是去监听hashchange和load事件了
window.addEventListener('hashchange', function() {
render(location.hash.replace(/#\//, ''))
})
window.addEventListener('load', function() {
render(location.hash.replace(/#\//, ''))
})
监听的方法比较简单，就是一个简单的事件注册，然后调用render即可
hash的使用场景一般用于纯客户端的渲染，兼容低版本的浏览器
4.history
history目前提供了pushState和replaceState,以及window有一个onpopstate，push和replace都是对浏览器的浏览记录进行操作，一个是push一个是replace
使用history时，会面临两个问题
4.1 当页面刷新时，会报404
这个时候，我们需要服务端提供一个服务，所有的路由都指向一个地址，这个地址引用了我们的基本js，当这个页面加载之后，再通过js匹配当前的pathname去进行客户端路由渲染，这里，服务端我们用到了express,view engine用到的是html，然后在路由里，匹配了*,所有的请求都指向了同一个路由
// app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var ejs = require('ejs');
var routes = require('./routes/index');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');
app.engine('html', require('ejs').renderFile)
省略......
// route
router.get('*', function(req, res, next) {
res.render('index', { title: 'Express' });
});
以上即为服务端的代码，其实很简单，就是为了防止用户刷新报404
4.2 push和replace时，不触发onpopstate
当按下浏览器的前进和后退按钮时，都会触发onpopstate，但是push和replace时，却不会，此时，我们就需要定义一定的规则来触发push和replace了，本demo,我是这么实现的，全局监听页面的click事件，给标签自定义了一个属性to，判断当前触发的dom，只要有这个属性的，就去push或者replace
对pathname进行处理的方法
function initPage(pathname) {
var script = document.createElement('script')
if (pathname) {
let text = ''
switch (pathname) {
case route.index.name:
text = '首页'
script.src = route.index.script
break
case route.concact.name:
text = '联系我们'
script.src = route.concact.script
break
case route.about.name:
text = '关于我们'
script.src = route.about.script
break
default:
script.src = route.index.script
text = '首页'
}
//console.log(text)
//app.innerHTML = text
document.body.appendChild(script)
}
}
判断当前的路由，然后去加载不同的js文件（细心的朋友应该看出来，这里也实现了按需加载的功能，太简单，我就不展开了）
其他的就是一些监听的处理了，用来监听用户点击前进和后退，用来监听用户点击链接，用来监听用户刷新页面
var route = {
index: {
name: '/index',
script: '/javascript/index.js'
},
concact: {
name: '/concact',
script: '/javascript/concact.js'
},
about: {
name: '/about',
script: '/javascript/about.js'
}
}
// 监听click事件，判断当前的点击对象是否包括to属性
document.body.addEventListener('click', (e) => {
const pathname = e.target.getAttribute('to')
history.pushState({}, null, pathname)
initPage(pathname)
})
// 监听页面刷新
window.onload = function() {
initPage(location.pathname)
}
// 监听浏览器前进后退
window.addEventListener("popstate", function(e) {
initPage(location.pathname)
})
