模板户:专注于dede模板,织梦源码,织梦模板,网站模板,dedecms模板,网站源码,dedecms教程以及各类手机网站模板和企业网站模板分享.

织梦模板

VIP

 vue-router 源码阅读 - 文件结构与注册机制

vue-router 源码阅读 - 文件结构与注册机制

  • 语言编码:UTF-8
  • 模板颜色:绿色、白色
  • 适用站点:地方门户、新闻资讯
  • 下载用户:免费下载
  • 下载一提取码:psp7
  • 详细描述

    SHERlocked93 前端下午茶


    前端路由是我们前端开发日常开发中经常碰到的概念,在下在日常使用中知其然也好奇着所以然,因此对 vue-router 的源码进行了一些阅读,也汲取了社区的一些文章优秀的思想,于本文记录总结作为自己思考的输出,本人水平有限,欢迎留言讨论~

    目标 vue-rouer 版本: 3.0.2

    vue-router源码注释:vue-router-analysis

    声明:文章中源码的语法都使用 Flow,并且源码根据需要都有删节(为了不被迷糊 @_@),如果要看完整版的请进入上面的 github地址 ~

    本文是系列文章,链接见底部 ~

    0. 前备知识

    • Flow

    • ES6语法

    • 设计模式 - 外观模式

    • HTML5 History Api

    如果你对这些还没有了解的话,可以看一下本文末尾的推介阅读。

    1. 文件结构

    首先我们来看看文件结构:

    1. .

    2. ├── build                    // 打包相关配置

    3. ├── scripts                    // 构建相关

    4. ├── dist                    // 构建后文件目录

    5. ├── docs                    // 项目文档

    6. ├── docs-gitbook            // gitbook配置

    7. ├── examples                // 示例代码,调试的时候使用

    8. ├── flow                    // Flow 声明

    9. ├── src                        // 源码目录

    10.    ├── components             // 公共组件

    11.    ├── history                // 路由类实现

    12.    ├── util                // 相关工具库

    13.    ├── create-matcher.js    // 根据传入的配置对象创建路由映射表

    14.    ├── create-route-map.js    // 根据routes配置对象创建路由映射表

    15.    ├── index.js            // 主入口

    16.    └── install.js            // VueRouter装载入口

    17. ├── test                    // 测试文件

    18. └── types                    // TypeScript 声明

    我们主要关注的就是 src 中的内容。

    2. 入口文件

    2.1 rollup 出口与入口

    按照惯例,首先从 package.json 看起,这里有两个命令值得注意一下:

    1. {

    2.    "scripts": {

    3.        "dev:dist": "rollup -wm -c build/rollup.dev.config.js",

    4.        "build": "node build/build.js"

    5.  }

    6. }

    dev:dist 用配置文件 rollup.dev.config.js 生成 dist 目录下方便开发调试相关生成文件,对应于下面的配置环境 development

    build 是用 node 运行 build/build.js 生成正式的文件,包括 es6commonjsIIFE方式的导出文件和压缩之后的导出文件;

    这两种方式都是使用 build/configs.js 这个配置文件来生成的,其中有一段语义化比较不错的代码挺有意思,跟 Vue 的配置生成文件比较类似:

    1. // vue-router/build/configs.js


    2. module.exports = [{                     // 打包出口

    3.    file: resolve(dist/vue-router.js),

    4.    format: umd,

    5.    env: development

    6.  },{

    7.    file: resolve(dist/vue-router.min.js),

    8.    format: umd,

    9.    env: production

    10.  },{

    11.    file: resolve(dist/vue-router.common.js),

    12.    format: cjs

    13.  },{

    14.    file: resolve(dist/vue-router.esm.js),

    15.    format: es

    16.  }

    17. ].map(genConfig)


    18. function genConfig (opts) {

    19.  const config = {

    20.    input: {

    21.      input: resolve(src/index.js),     // 打包入口

    22.      plugins: [...]

    23.    },

    24.    output: {

    25.      file: opts.file,

    26.      format: opts.format,

    27.      banner,

    28.      name: VueRouter

    29.    }

    30.  }

    31.  return config

    32. }

    可以清晰的看到 rollup 打包的出口和入口,入口是 src/index.js 文件,而出口就是上面那部分的配置, env 是开发/生产环境标记, format 为编译输出的方式:

    • es: ES Modules,使用ES6的模板语法输出

    • cjs: CommonJs Module,遵循CommonJs Module规范的文件输出

    • umd: 支持外链规范的文件输出,此文件可以直接使用script标签,其实也就是 IIFE 的方式

    那么正式输出是使用 build 方式,我们可以从 src/index.js 看起

    1. // src/index.js


    2. import { install } from ./install


    3. export default class VueRouter { ... }


    4. VueRouter.install = install

    首先这个文件导出了一个类 VueRouter,这个就是我们在 Vue 项目中引入 vue-router 的时候 Vue.use(VueRouter) 所用到的,而 Vue.use 的主要作用就是找注册插件上的 install方法并执行,往下看最后一行,从一个 install.js 文件中导出的 install 被赋给了 VueRouter.install,这就是 Vue.use 中执行所用到的 install 方法。

    2.2 Vue.use

    可以简单看一下 Vue 中 Vue.use 这个方法是如何实现的:

    1. // vue/src/core/global-api/use.js


    2. export function initUse (Vue: GlobalAPI) {

    3.  Vue.use = function (plugin: Function | Object) {

    4.    // ... 省略一些判重操作

    5.    const args = toArray(arguments, 1)

    6.    args.unshift(this)            // 注意这个this,是vue对象

    7.    if (typeof plugin.install === function) {

    8.      plugin.install.apply(plugin, args)

    9.    }

    10.    return this

    11.  }

    12. }

    上面可以看到 Vue.use 这个方法就是执行待注册插件上的 install 方法,并将这个插件实例保存起来。值得注意的是 install 方法执行时的第一个参数是通过 unshift 推入的 this,因此 install 执行时可以拿到 Vue 对象。

    对应上一小节,这里的 plugin.install 就是 VueRouter.install

    3. 路由注册

    3.1 install

    接之前,看一下 install.js 里面是如何进行路由插件的注册:

    1. // vue-router/src/install.js


    2. /* vue-router 的注册过程 Vue.use(VueRouter) */

    3. export function install(Vue) {

    4.  _Vue = Vue    // 这样拿到 Vue 不会因为 import 带来的打包体积增加


    5.  const isDef = v => v !== undefined


    6.  const registerInstance = (vm, callVal) => {

    7.    let i = vm.$options._parentVnode // 至少存在一个 VueComponent 时, _parentVnode 属性才存在

    8.    // registerRouteInstance 在 src/components/view.js

    9.    if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {

    10.      i(vm, callVal)

    11.    }

    12.  }


    13.  // new Vue 时或者创建新组件时,在 beforeCreate 钩子中调用

    14.  Vue.mixin({

    15.    beforeCreate() {

    16.      if (isDef(this.$options.router)) {  // 组件是否存在$options.router,该对象只在根组件上有

    17.        this._routerRoot = this           // 这里的this是根vue实例

    18.        this._router = this.$options.router      // VueRouter实例

    19.        this._router.init(this)

    20.        Vue.util.defineReactive(this, _route, this._router.history.current)

    21.      } else {                            // 组件实例才会进入,通过$parent一级级获取_routerRoot

    22.        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this

    23.      }

    24.      registerInstance(this, this)

    25.    },

    26.    destroyed() {

    27.      registerInstance(this)

    28.    }

    29.  })


    30.  // 所有实例中 this.$router 等同于访问 this._routerRoot._router

    31.  Object.defineProperty(Vue.prototype, $router, {

    32.    get() { return this._routerRoot._router }

    33.  })


    34.  // 所有实例中 this.$route 等同于访问 this._routerRoot._route

    35.  Object.defineProperty(Vue.prototype, $route, {

    36.    get() { return this._routerRoot._route }

    37.  })


    38.  Vue.component(RouterView, View)     // 注册公共组件 router-view

    39.  Vue.component(RouterLink, Link)     // 注册公共组件 router-link


    40.  const strats = Vue.config.optionMergeStrategies

    41.  strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created

    42. }

    install 方法主要分为几个部分:

    1. 通过 Vue.mixin 在 beforeCreate、 destroyed 的时候将一些路由方法挂载到每个 vue 实例中

    2. 给每个 vue 实例中挂载路由对象以保证在 methods 等地方可以通过 this.$router、 this.$route 访问到相关信息

    3. 注册公共组件 router-view、 router-link

    4. 注册路由的生命周期函数

    Vue.mixin 将定义的两个钩子在组件 extend 的时候合并到该组件的 options 中,从而注册到每个组件实例。看看 beforeCreate,一开始访问了一个 this.$options.router 这个是 Vue 项目里面 app.js 中的 newVue({router}) 这里传入的这个 router,当然也只有在 newVue 这时才会传入 router,也就是说 this.$options.router 只有根实例上才有。这个传入 router 到底是什么呢,我们看看它的使用方式就知道了:

    1. const router = new VueRouter({

    2.  mode: hash,

    3.  routes: [{ path: /, component: Home },

    4.        { path: /foo, component: Foo },

    5.        { path: /bar, component: Bar }]

    6. })


    7. new Vue({

    8.  router,

    9.  template: `<div id="app"></div>`

    10. }).$mount(#app)

    可以看到这个 this.$options.router 也就是 Vue 实例中的 this._route 其实就是 VueRouter 的实例。

    剩下的一顿眼花缭乱的操作,是为了在每个 Vue 组件实例中都可以通过 _routerRoot 访问根 Vue 实例,其上的 _route_router 被赋到 Vue 的原型上,这样每个 Vue 的实例中都可以通过 this.$routethis.$router 访问到挂载在根实例 _routerRoot 上的 _route_router,后面用 Vue 上的响应式化方法 defineReactive 来将 _route 响应式化,另外在根组件上用 this._router.init() 进行了初始化操作。

    随便找个 Vue 组件,打印一下其上的 _routerRoot

    可以看到这是 Vue 的根组件。

    3.2 VueRouter

    在之前我们已经看过 src/index.js 了,这里来详细看一下 VueRouter 这个类

    1. // vue-router/src/index.js


    2. export default class VueRouter {  

    3.  constructor(options: RouterOptions = {}) { }


    4.  /* install 方法会调用 init 来初始化 */

    5.  init(app: any /* Vue组件实例 */) { }


    6.  /* createMatcher 方法返回的 match 方法 */

    7.  match(raw: RawLocation, current?: Route, redirectedFrom?: Location) { }


    8.  /* 当前路由对象 */

    9.  get currentRoute() { }


    10.  /* 注册 beforeHooks 事件 */

    11.  beforeEach(fn: Function): Function { }


    12.  /* 注册 resolveHooks 事件 */

    13.  beforeResolve(fn: Function): Function { }


    14.  /* 注册 afterHooks 事件 */

    15.  afterEach(fn: Function): Function { }


    16.  /* onReady 事件 */

    17.  onReady(cb: Function, errorCb?: Function) { }


    18.  /* onError 事件 */

    19.  onError(errorCb: Function) { }


    20.  /* 调用 transitionTo 跳转路由 */

    21.  push(location: RawLocation, onComplete?: Function, onAbort?: Function) { }


    22.  /* 调用 transitionTo 跳转路由 */

    23.  replace(location: RawLocation, onComplete?: Function, onAbort?: Function) { }


    24.  /* 跳转到指定历史记录 */

    25.  go(n: number) { }


    26.  /* 后退 */

    27.  back() { }


    28.  /* 前进 */

    29.  forward() { }


    30.  /* 获取路由匹配的组件 */

    31.  getMatchedComponents(to?: RawLocation | Route) { }


    32.  /* 根据路由对象返回浏览器路径等信息 */

    33.  resolve(to: RawLocation, current?: Route, append?: boolean) { }


    34.  /* 动态添加路由 */

    35.  addRoutes(routes: Array<RouteConfig>) { }

    36. }

    VueRouter 类中除了一坨实例方法之外,主要关注的是它的构造函数和初始化方法 init

    首先看看构造函数,其中的 mode 代表路由创建的模式,由用户配置与应用场景决定,主要有三种 History、Hash、Abstract,前两种我们已经很熟悉了,Abstract 代表非浏览器环境,比如 Node、weex 等; this.history 主要是路由的具体实例。实现如下:

    1. // vue-router/src/index.js


    2. export default class VueRouter {  

    3.  constructor(options: RouterOptions = {}) {

    4.    let mode = options.mode || hash       // 路由匹配方式,默认为hash

    5.    this.fallback = mode === history && !supportsPushState && options.fallback !== false

    6.    if (this.fallback) { mode = hash }    // 如果不支持history则退化为hash

    7.    if (!inBrowser) { mode = abstract }   // 非浏览器环境强制abstract,比如node中

    8.    this.mode = mode


    9.    switch (mode) {         // 外观模式

    10.      case history:       // history 方式

    11.        this.history = new HTML5History(this, options.base)

    12.        break

    13.      case hash:          // hash 方式

    14.        this.history = new HashHistory(this, options.base, this.fallback)

    15.        break

    16.      case abstract:      // abstract 方式

    17.        this.history = new AbstractHistory(this, options.base)

    18.        break

    19.      default: ...

    20.    }

    21.  }

    22. }

    init 初始化方法是在 install 时的 Vue.mixin 所注册的 beforeCreate 钩子中调用的,可以翻上去看看;调用方式是 this._router.init(this),因为是在 Vue.mixin 里调用,所以这个 this 是当前的 Vue 实例。另外初始化方法需要负责从任一个路径跳转到项目中时的路由初始化,以 Hash 模式为例,此时还没有对相关事件进行绑定,因此在第一次执行的时候就要进行事件绑定与 popstatehashchange 事件触发,然后手动触发一次路由跳转。实现如下:

    1. // vue-router/src/index.js


    2. export default class VueRouter {  

    3.  /* install 方法会调用 init 来初始化 */

    4.  init(app: any /* Vue组件实例 */) {

    5.    const history = this.history


    6.    if (history instanceof HTML5History) {

    7.      // 调用 history 实例的 transitionTo 方法

    8.      history.transitionTo(history.getCurrentLocation())

    9.    } else if (history instanceof HashHistory) {

    10.      const setupHashListener = () => {

    11.          history.setupListeners()      // 设置 popstate/hashchange 事件监听

    12.      }

    13.      history.transitionTo(             // 调用 history 实例的 transitionTo 方法

    14.          history.getCurrentLocation(), // 浏览器 window 地址的 hash 值

    15.          setupHashListener,            // 成功回调

    16.          setupHashListener             // 失败回调

    17.      )

    18.    }

    19.  }

    20. }

    除此之外,VueRouter 还有很多实例方法,用来实现各种功能的,剩下的将在系列文章分享 ~


    本文是系列文章,随后会更新后面的部分,共同进步~

    1. vue-router 源码阅读 - 文件结构与注册机制

    网上的帖子大多深浅不一,甚至有些前后矛盾,在下的文章都是学习过程中的总结,如果发现错误,欢迎留言指出~

    推介阅读:

    1. H5 History Api - MDN

    2. ECMAScript 6 入门 - 阮一峰

    3. JS 静态类型检查工具 Flow - SegmentFault 思否

    4. JS 外观模式 - SegmentFault 思否

    5. 前端路由跳转基本原理 - 掘金

    参考:

    1. Vue.js 技术揭秘


      阅读原文

      发送中

      阅读原文
      你可能还喜欢
      首页 免费源码 VIP专区 会员中心
      收缩