背景

这两天在学习vue-router的源码，通过造轮子，把学到的东西进行巩固吧。

Router类的设计

在使用vue-router的时候我们通常会传入这样的参数：

 new Router({base: '/example',mode: 'hash',routes: [{path: '/',name: 'home',component: '<div>home</div>'}]})
复制代码

很显然Router是一个类，传入的参数就是构造函数的参数因此我们的构造函数设计如下：

class Router {constructor (options) {this.base = options.basethis.routes = options.routesthis.mode = options.mode || 'hash'this.init()}init() {}
}
复制代码

hash和history两种模式基类

设计完了Router类，我们还需要根据不同的mode采取不同的处理方式，即hash模式和history模式。但是这两种模式都有一些共同的属性，例如：path,query,params,name,fullPath, route等属性，还有对路由匹配的处理,因此我们将这些通用方法设计成一个基类。

class Base {constructor (router) {this.router = routerthis.current = {path: '/',query: {},params: {},name: '',fullPath: '/',route: {}}}// 这里的taregt就是浏览器中获取path，如：/foo /bartransitionTo(target, cb) {// 通过对比传入的 routes 获取匹配到的 targetRoute 对象const targetRoute = match(target, this.router.routes)this.confirmTransition(targetRoute, () => {this.current.route = targetRoutethis.current.name = targetRoute.namethis.current.path = targetRoute.paththis.current.query = targetRoute.query || getQuery()this.current.fullPath = getFullPath(this.current)cb && cb()})}confirmTransition (route, cb) {cb()}
}function getFullPath ({ path, query = {}, hash = '' }, _stringifyQuery){const stringify = _stringifyQuery || stringifyQueryreturn (path || '/') + stringify(query) + hash
}// 用这些path从而筛选出对应的route
export function match(path, routeMap) {let match = {}if (typeof path === 'string' || path.name === undefined) {for(let route of routeMap) {if (route.path === path || route.path === path.path) {match = routebreak;}}} else {for(let route of routeMap) {if (route.name === path.name) {match = routeif (path.query) {match.query = path.query}break;}}}return match
}
// 获取url中的参数
export function getQuery() {const hash = location.hashconst queryStr = hash.indexOf('?') !== -1 ? hash.substring(hash.indexOf('?') + 1) : ''const queryArray = queryStr ? queryStr.split('&') : []let query = {}queryArray.forEach((q) => {let qArray = q.split('=')query[qArray[0]] = qArray[1]})return query
}function stringifyQuery (obj) {const res = obj ? Object.keys(obj).map(key => {const val = obj[key]if (val === undefined) {return ''}if (val === null) {return key}if (Array.isArray(val)) {const result = []val.forEach(val2 => {if (val2 === undefined) {return}if (val2 === null) {result.push(key)} else {result.push(key + '=' + val2)}})return result.join('&')}return key + '=' + val}).filter(x => x.length > 0).join('&') : nullreturn res ? `?${res}` : ''
}
复制代码

HashHistory实现

class HashHistory extends Base {constructor (router) {super(router)this.ensureSlash()// 监听hashchange事件window.addEventListener('hashchange', () => {this.transitionTo(this.getCurrentLocation())})}push (location) {const targetRoute = match(location, this.router.routes)this.transitionTo(targetRoute, () => {changeUrl(this.current.fullPath.substring(1))})}replaceState (location) {const targetRoute = match(location, this.router.routes)this.transitionTo(targetRoute, () => {changeUrl(this.current.fullPath.substring(1), true)})}ensureSlash () {const path = this.getCurrentLocation()if (path.charAt(0) === '/') {return true}changeUrl(path)return false}// 获取当前路由getCurrentLocation() {const href = window.location.hrefconst index = href.indexOf('#')return index === -1 ? '' : href.slice(index + 1)}
}
// 处理浏览器路由跳转变化
// 这里使用了：
// window.history.replaceState({}, '', url)
// window.history.pushState({}, '', url)
function changeUrl(path, replace) {const href = window.location.hrefconst i = href.indexOf('#')const base = i >= 0 ? href.slice(0, i) : hrefif (replace) {window.history.replaceState({}, '', `${base}#/${path}`)} else {window.history.pushState({}, '', `${base}#/${path}`)}
}
复制代码

window.history.replaceState和window.history.pushState的区别

Html5History实现

 class HTML5History extends Base {constructor (router) {super(router)window.addEventListener('popstate', () => {this.transitionTo(getLocation())})}push (location) {const targetRoute = match(location, this.router.routes)this.transitionTo(targetRoute, () => {changeUrl(this.router.base, this.current.fullPath)})}getCurrentLocation () {return getLocation(this.router.base)}
}function getLocation (base = ''){let path = window.location.pathnameif (base && path.indexOf(base) === 0) {path = path.slice(base.length)}return (path || '/') + window.location.search + window.location.hash
}function changeUrl(base, path, replace) {if (replace) {window.history.replaceState({}, '', (base + path).replace(/\/\//g, '/'))} else {window.history.pushState({}, '', (base + path).replace(/\/\//g, '/'))}
}
复制代码

整合Router

前面我聊了Router类，hash模式下如何处理，history模式下如何处理，但是如何与我们的构造函数Router类整合呢？或者说Router中对这两种路由模式如何处理呢？

import { HTML5History } from './history/HTML5History'
import { HashHistory } from './history/HashHistory'
class Router {constructor (options) {// 省略之前代码this.mode = options.mode || 'hash'this.history = this.mode === 'hash' ? new HashHistory(options) :new HTML5History(options)}
}
复制代码

这样就实现了针对不同的mode对应不同的路由解析办法, 但是还有一个问题，我们上面的代码实现了可以动态切换路由，但是切换路由的同时视图如何跟着渲染呢？我们可以利用vue的双向绑定，从而实现当路由切换的同时视图也跟着切换

import { Watcher } from './utils/Watcher'
class Router {constructor (options) {// 省略代码this.init()this.history = this.mode === 'hash' ? new HashHistory(options) :new HTML5History(options)}// 简单搞个render()说明问题就好render () {let iif ((i = this.history.current) && (i = i.route) && (i = i.component)) {document.getElementById(this.container).innerHTML = i}}init () {const history = this.historyobserver.call(this, this.history.current)new Watcher(this.history.current, 'route', this.render.bind(this))history.transitionTo(history.getCurrentLocation())}
}
复制代码

接下来我们来依次实现这几个函数，顺便也学习了vue中的双向绑定

• observer函数实现

class Observer {constructor (value) {this.walk(value)}walk (obj) {Object.keys(obj).forEach(key => {if (typeof obj[key] === 'object') {this.walk(obj[key])}defineRective(obj, key, obj[key])})}
}function defineRective (obj, key, value) {let dep = new Dep()Object.defineProperty(obj, key, {get () {if (dep.target) {dep.add()}return value},set (newVal) {// 注意这两个顺序value = newValdep.notify()}})
}
复制代码

• Dep类的实现

class Dep {constructor () {this.listeners = []}add () {this.listeners.push(Dep.target)}notify () {this.listeners.forEach(listen => listen.update())}
}export function setTarget (target) {Dep.target = target
}export function cleanTarget() {Dep.target = null
}
复制代码

• watcher函数实现

import {setTarget, cleanTarget} from './dep'export class Watcher {constructor (vm, expression, callback) {this.vm = vmthis.callbacks = []this.expression = expressionthis.callbacks.push(callback)this.value = this.getVal()}getVal () {setTarget(this)let val = this.vmthis.expression.split('.').forEach((key) => {val = val[key]})cleanTarget()return val}update () {this.callbacks.forEach((cb) => {cb()})}
}
复制代码

参考资料：

• 前端路由简介以及vue-router实现原理