前端路由实现原理

BOM对象；tips:为啥在这罗列下BOM，因为下面实现的两种路由模式中用到location、history中的属性和方法

window对象，JS顶层对象，其他的BOM对象都是window对象的属性；

document对象，文档对象；

location对象，浏览器当前URL信息；

navigator对象，浏览器本身信息；

screen对象，客户端屏幕信息；

history对象，浏览器访问历史信息；

前端路由实现原理

基础路由

class BaseRouter {
　　constructor(list){
　　　　this.list = list
　　}
　　render(state){
　　　　//要么找到路由对应的组件，要么配置的 * 代表404页面组件
　　　　let ele = this.list.find( item => item.path === state );
　　　　ele = ele ? ele : this.find( item => item.path === '*')
　　　　//ELEMENT：就当成 let zjy = document.getElementById('zjy')这种DOM
　　　　ELEMENT.innerText = ele.component
　　}
}

hash模式

hash（“#”）符号的本来作用是加在URL中指示网页中的位置

#符号本身以及它后面的字符称为hash，可以通过location.hash属性读取。

hash虽然出现在URL中，但不会被包括在HTTP请求中，它是用来知道浏览器动作的，对服务器端完全无用，因此改变hash不会重新加载页面。

class HashRouter extends BaseRouter {
　　constructor(list){
　　　　super(list)
　　　　//history模式同理
　　　　//初次加载配置跟路由的页面组件
　　　　this.handler()
　　　　//添加监听，加载组件页面
　　　　window.addEventListener('hashchange',()=>{
　　　　　　this.handler()
　　　　},false)
　　}
　　handler(){
　　　　this.render(this.getState())
　　}
　　getState(){
　　　　const hash = location.hash
　　　　return hash ? hash.splice('1') : '/'
　　}
　　push(path){
　　　　location.hash = path
　　}
　　getUrl(path){
　　　　const href = location.href
　　　　const index = href.indexOf('#')
　　　　const base = index >= 0 ? href.splice(0,index) : href
　　　　return `${base}#${path}`
　　}
　　replace(path){
　　　　location.replace(this.getUrl(path))
　　}
　　go(n){
　　　　history.go(n)
　　}
}

history模式

history.pushState(stateObject,title,URL)

history.replaceState(stateObject,title,URL)

• stateObject：当浏览器跳转到新的状态时，将触发popState事件，该事件将携带这个stateObject参数的副本
• title：所添加记录的标题
• URL：所添加记录的URL

class HistoryRouter extends BaseRouter {
　　constructor(list){
　　　　super(list)
　　　　this.handler()
　　　　window.addEventListener('popstate',()=>{
　　　　　　this.handler()
　　　　},false)
　　}
　　handler(){
　　　　this.render(this.getState())
　　}
　　getState(){
　　　　const path = location.pathname
　　　　return path ? path : '/'
　　}
　　push(path){
　　　　history.pushState(null,null,path)
　　　　this.handler()
　　}
　　replace(path){
　　　　history.replaceState(null,null,path)
　　　　this.handler()
　　}
　　go(n){
　　　　history.go(n)
　　}
}