关于前端:10分钟彻底搞懂单页面应用路由

32次阅读

共计 6795 个字符，预计需要花费 17 分钟才能阅读完成。

上一次，跟大家科普了小程序的自定义路由routes，开启了路由之旅；明天，趁势就单页面利用路由，跟大家唠个五毛钱，如果唠得不好……退…一块钱？

单页面利用特色

假如： 在一个 web 页面中，有 1 个按钮，点击可跳转到站内其余页面。

多页面利用： 点击按钮，会从新加载一个 html 资源，刷新整个页面；

单页面利用： 点击按钮，没有新的 html 申请，只产生部分刷新，能营造出一种靠近原生的体验，如丝般顺滑。

SPA 单页面利用为什么能够简直无刷新呢？因为它的 SP——single-page。在第一次进入利用时，即返回了惟一的 html 页面和它的公共动态资源，后续的所谓“跳转”，都不再从服务端拿 html 文件，只是 DOM 的替换操作，是模（jia）拟（zhuang）的。

那么 js 又是怎么捕捉到组件切换的机会，并且无刷新变更浏览器 url 呢？靠 hash 和HTML5History。

hash 路由

特色

  1. 相似 www.xiaoming.html#bar 就是哈希路由，当 # 前面的哈希值发生变化时，不会向服务器申请数据，能够通过 hashchange 事件来监听到 URL 的变动，从而进行DOM 操作来模仿页面跳转
  2. 不须要服务端配合
  3. 对 SEO 不敌对

原理

HTML5History 路由

特色

  1. History 模式是 HTML5 新推出的性能，比之 hash 路由的形式直观，长成相似这个样子www.xiaoming.html/bar，模仿页面跳转是通过 history.pushState(state, title, url) 来更新浏览器路由，路由变动时监听 popstate 事件来操作DOM
  2. 须要后端配合，进行重定向
  3. 对 SEO 绝对敌对

原理

vue-router 源码解读

以 Vue 的路由 vue-router 为例，咱们一起来撸一把它的源码。

Tips：因为，本篇的重点在于解说单页面路由的两种模式，所以，上面只列举了一些要害代码，次要解说：

  1. 注册插件
  2. VueRouter 的构造函数，辨别路由模式
  3. 全局注册组件
  4. hash / HTML5History 模式的 push 和监听办法
  5. transitionTo 办法

注册插件

首先，作为一个插件，要有裸露一个 install 办法的盲目，给 Vue 爸爸去 use。

源码的 install.js 文件中，定义了注册装置插件的办法 install，给每个组件的钩子函数混入办法，并在beforeCreate 钩子执行时初始化路由：

Vue.mixin({beforeCreate () {if (isDef(this.$options.router)) {
      this._routerRoot = this
      this._router = this.$options.router
      this._router.init(this)
      Vue.util.defineReactive(this, '_route', this._router.history.current)
    } else {this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
    }
    registerInstance(this, this)
  },
  // 全文中以... 来示意省略的办法
  ...
});

辨别 mode

而后，咱们从 index.js 找到整个插件的基类 VueRouter，不难看出，它是在 constructor 中，依据不同mode 采纳不同路由实例的。

...
import {install} from './install';
import {HashHistory} from './history/hash';
import {HTML5History} from './history/html5';
...
export default class VueRouter {static install: () => void;
  constructor (options: RouterOptions = {}) {if (this.fallback) {mode = 'hash'}
    if (!inBrowser) {mode = 'abstract'}
    this.mode = mode
           
    switch (mode) {
      case 'history':
        this.history = new HTML5History(this, options.base)
        break
      case 'hash':
        this.history = new HashHistory(this, options.base, this.fallback)
        break
     case 'abstract':
        this.history = new AbstractHistory(this, options.base)
        break
     default:
      if (process.env.NODE_ENV !== 'production') {assert(false, `invalid mode: ${mode}`)
      }
    }
  }
}

全局注册 router-link 组件

这个时候，咱们兴许会问：应用 vue-router 时，常见的 <router-link/>、<router-view/> 又是在哪里引入的呢？

回到 install.js 文件，它引入并全局注册了 router-view、router-link 组件：

import View from './components/view';
import Link from './components/link';
...
Vue.component('RouterView', View);
Vue.component('RouterLink', Link);

在 ./components/link.js 中，<router-link/>组件上默认绑定了 click 事件，点击触发 handler 办法进行相应的路由操作。

const handler = e => {if (guardEvent(e)) {if (this.replace) {router.replace(location, noop)
    } else {router.push(location, noop)
    }
 }
};

就像最开始提到的，VueRouter构造函数中对不同 mode 初始化了不同模式的 History 实例，因此 router.replace、router.push 的形式也不尽相同。接下来，咱们别离扒拉下这两个模式的源码。

hash 模式

history/hash.js 文件中，定义了HashHistory 类，这货继承自 history/base.js 的 History 基类。

它的 prototype 上定义了 push 办法：在反对 HTML5History 模式的浏览器环境中（supportsPushState为 true），调用 history.pushState 来扭转浏览器地址；其余浏览器环境中，则会间接用location.hash = path 来替换成新的 hash 地址。

其实最开始读到这里是有些疑难的，既然曾经是 hash 模式为何还要判断 supportsPushState？是为了反对scrollBehavior，history.pushState 能够传参 key 过来，这样每个 url 历史都有一个 key，用 key 保留了每个路由的地位信息。

同时，原型上绑定的 setupListeners 办法，负责监听 hash 变更的机会：在反对 HTML5History 模式的浏览器环境中，监听popstate 事件；而其余浏览器中，则监听 hashchange。监听到变动后，触发handleRoutingEvent 办法，调用父类的transitionTo 跳转逻辑，进行 DOM 的替换操作。

import {pushState, replaceState, supportsPushState} from '../util/push-state'
...
export class HashHistory extends History {setupListeners () {
    ...
    const handleRoutingEvent = () => {
        const current = this.current
        if (!ensureSlash()) {return}
        // transitionTo 调用的父类 History 下的跳转办法，跳转后门路会进行 hash 化
        this.transitionTo(getHash(), route => {if (supportsScroll) {handleScroll(this.router, route, current, true)
          }
          if (!supportsPushState) {replaceHash(route.fullPath)
          }
        })
      }
      const eventType = supportsPushState ? 'popstate' : 'hashchange'
      window.addEventListener(
        eventType,
        handleRoutingEvent
      )
      this.listeners.push(() => {window.removeEventListener(eventType, handleRoutingEvent)
      })
  }
  
  push (location: RawLocation, onComplete?: Function, onAbort?: Function) {const { current: fromRoute} = this
    this.transitionTo(
      location,
      route => {pushHash(route.fullPath)
        handleScroll(this.router, route, fromRoute, false)
        onComplete && onComplete(route)
      },
      onAbort
    )
  }
}
...

// 解决传入 path 成 hash 模式的 URL
function getUrl (path) {
  const href = window.location.href
  const i = href.indexOf('#')
  const base = i >= 0 ? href.slice(0, i) : href
  return `${base}#${path}`
}
...

// 替换 hash
function pushHash (path) {if (supportsPushState) {pushState(getUrl(path))
  } else {window.location.hash = path}
}

// util/push-state.js 文件中的办法
export const supportsPushState =
  inBrowser &&
  (function () {
    const ua = window.navigator.userAgent

    if ((ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) &&
      ua.indexOf('Mobile Safari') !== -1 &&
      ua.indexOf('Chrome') === -1 &&
      ua.indexOf('Windows Phone') === -1
    ) {return false}
    return window.history && typeof window.history.pushState === 'function'
  })()

HTML5History 模式

相似的，HTML5History 类定义在 history/html5.js 中。

定义 push 原型办法，调用 history.pusheState 批改浏览器的门路。

与此同时，原型 setupListeners 办法对popstate 进行了事件监听，适时做 DOM 替换。

import {pushState, replaceState, supportsPushState} from '../util/push-state';
...
export class HTML5History extends History {setupListeners () {const handleRoutingEvent = () => {
    const current = this.current;
    const location = getLocation(this.base);
    if (this.current === START && location === this._startLocation) {return}

    this.transitionTo(location, route => {if (supportsScroll) {handleScroll(router, route, current, true)
      }
    })
    }
    window.addEventListener('popstate', handleRoutingEvent)
    this.listeners.push(() => {window.removeEventListener('popstate', handleRoutingEvent)
    })
  }
  push (location: RawLocation, onComplete?: Function, onAbort?: Function) {const { current: fromRoute} = this
    this.transitionTo(location, route => {pushState(cleanPath(this.base + route.fullPath))
      handleScroll(this.router, route, fromRoute, false)
      onComplete && onComplete(route)
    }, onAbort)
  }
}

...

// util/push-state.js 文件中的办法
export function pushState (url?: string, replace?: boolean) {saveScrollPosition()
  const history = window.history
  try {if (replace) {const stateCopy = extend({}, history.state)
      stateCopy.key = getStateKey()
      history.replaceState(stateCopy, '', url)
    } else {history.pushState({ key: setStateKey(genStateKey()) }, '', url)
    }
  } catch (e) {window.location[replace ? 'replace' : 'assign'](url)
  }
}

transitionTo 解决路由变更逻辑

下面提到的两种路由模式，都在监听时触发了 this.transitionTo，这到底是个啥呢？它其实是定义在 history/base.js 基类上的原型办法，用来解决路由的变更逻辑。
先通过const route = this.router.match(location, this.current) 对传入的值与以后值进行比照，返回相应的路由对象；接着判断新路由是否与以后路由雷同，雷同的话间接返回；不雷同，则在 this.confirmTransition 中执行回调更新路由对象，并对视图相干 DOM 进行替换操作。

export class History {
 ...
 transitionTo (
    location: RawLocation,
    onComplete?: Function,
    onAbort?: Function
  ) {const route = this.router.match(location, this.current)
    this.confirmTransition(
      route,
      () => {
        const prev = this.current
        this.updateRoute(route)
        onComplete && onComplete(route)
        this.ensureURL()
        this.router.afterHooks.forEach(hook => {hook && hook(route, prev)
        })

        if (!this.ready) {
          this.ready = true
          this.readyCbs.forEach(cb => {cb(route)
          })
        }
      },
      err => {if (onAbort) {onAbort(err)
        }
        if (err && !this.ready) {
          this.ready = true
          // https://github.com/vuejs/vue-router/issues/3225
          if (!isRouterError(err, NavigationFailureType.redirected)) {
            this.readyErrorCbs.forEach(cb => {cb(err)
            })
          } else {
            this.readyCbs.forEach(cb => {cb(route)
            })
          }
        }
      }
    )
  }
  ...
}

最初

好啦，以上就是单页面路由的一些小常识，心愿咱们能一起从入门到永不放弃~~

正文完
前端
发表至： 前端
2020-08-05
 0
关于前端:克服-ClickHouse-运维难题ByteHouse-水平扩容功能上线
关于前端:MACreact项目cordova工程环境搭建
关于前端:前端日常搬砖指南
关于前端:前端文件花式直传OSS后端那我走