refactor: split scrollBehavior logic and pushState logic into separate modules

Author: yyx990803

src/history/abstract.js

@@ -1,13 +1,13 @@
 /* @flow */
 
-import type VueRouter from '../index'
+import type Router from '../index'
 import { History } from './base'
 
 export class AbstractHistory extends History {
   index: number;
   stack: Array<Route>;
 
-  constructor (router: VueRouter, base: ?string) {
+  constructor (router: Router, base: ?string) {
     super(router, base)
     this.stack = []
     this.index = -1

src/history/base.js

@@ -1,14 +1,14 @@
 /* @flow */
 
-import type VueRouter from '../index'
+import type Router from '../index'
 import { warn } from '../util/warn'
 import { inBrowser } from '../util/dom'
 import { runQueue } from '../util/async'
 import { START, isSameRoute } from '../util/route'
 import { _Vue } from '../install'
 
 export class History {
-  router: VueRouter;
+  router: Router;
   base: string;
   current: Route;
   pending: ?Route;
@@ -21,7 +21,7 @@ export class History {
   ensureURL: (push?: boolean) => void;
   getCurrentLocation: () => string;
 
-  constructor (router: VueRouter, base: ?string) {
+  constructor (router: Router, base: ?string) {
     this.router = router
     this.base = normalizeBase(base)
     // start with a route object that stands for "nowhere"

src/history/hash.js

@@ -1,36 +1,30 @@
 /* @flow */
 
-import type VueRouter from '../index'
+import type Router from '../index'
 import { History } from './base'
-import { getLocation } from './html5'
 import { cleanPath } from '../util/path'
+import { getLocation } from './html5'
 
 export class HashHistory extends History {
-  constructor (router: VueRouter, base: ?string, fallback: boolean) {
+  constructor (router: Router, base: ?string, fallback: boolean) {
     super(router, base)
     // check history fallback deeplinking
-    if (fallback && this.checkFallback()) {
+    if (fallback && checkFallback(this.base)) {
       return
     }
     ensureSlash()
   }
 
-  checkFallback () {
-    const location = getLocation(this.base)
-    if (!/^\/#/.test(location)) {
-      window.location.replace(
-        cleanPath(this.base + '/#' + location)
-      )
-      return true
-    }
-  }
-
-  onHashChange () {
-    if (!ensureSlash()) {
-      return
-    }
-    this.transitionTo(getHash(), route => {
-      replaceHash(route.fullPath)
+  // this is delayed until the app mounts
+  // to avoid the hashchange listener being fired too early
+  setupListeners () {
+    window.addEventListener('hashchange', () => {
+      if (!ensureSlash()) {
+        return
+      }
+      this.transitionTo(getHash(), route => {
+        replaceHash(route.fullPath)
+      })
     })
   }
 
@@ -64,6 +58,16 @@ export class HashHistory extends History {
   }
 }
 
+function checkFallback (base) {
+  const location = getLocation(base)
+  if (!/^\/#/.test(location)) {
+    window.location.replace(
+      cleanPath(base + '/#' + location)
+    )
+    return true
+  }
+}
+
 function ensureSlash (): boolean {
   const path = getHash()
   if (path.charAt(0) === '/') {

src/history/html5.js

@@ -2,58 +2,45 @@
 
 import type Router from '../index'
 import { History } from './base'
-import { inBrowser } from '../util/dom'
 import { cleanPath } from '../util/path'
-import { handleScroll, saveScrollPosition } from '../util/scroll'
-
-// use User Timing api (if present) for more accurate key precision
-const Time = inBrowser && window.performance && window.performance.now
-  ? window.performance
-  : Date
-
-const genKey = () => String(Time.now())
-let _key: string = genKey()
+import { setupScroll, handleScroll } from '../util/scroll'
+import { pushState, replaceState } from '../util/push-state'
 
 export class HTML5History extends History {
   constructor (router: Router, base: ?string) {
     super(router, base)
 
     const expectScroll = router.options.scrollBehavior
+
+    if (expectScroll) {
+      setupScroll()
+    }
+
     window.addEventListener('popstate', e => {
-      _key = e.state && e.state.key
-      const current = this.current
-      this.transitionTo(getLocation(this.base), next => {
+      this.transitionTo(getLocation(this.base), route => {
         if (expectScroll) {
-          handleScroll(router, _key, next, current, true)
+          handleScroll(router, route, this.current, true)
         }
       })
     })
-
-    if (expectScroll) {
-      window.addEventListener('scroll', () => {
-        saveScrollPosition(_key)
-      })
-    }
   }
 
   go (n: number) {
     window.history.go(n)
   }
 
   push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
-    const current = this.current
     this.transitionTo(location, route => {
       pushState(cleanPath(this.base + route.fullPath))
-      handleScroll(this.router, _key, route, current, false)
+      handleScroll(this.router, route, this.current, false)
       onComplete && onComplete(route)
     }, onAbort)
   }
 
   replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
-    const current = this.current
     this.transitionTo(location, route => {
       replaceState(cleanPath(this.base + route.fullPath))
-      handleScroll(this.router, _key, route, current, false)
+      handleScroll(this.router, route, this.current, false)
       onComplete && onComplete(route)
     }, onAbort)
   }
@@ -77,24 +64,3 @@ export function getLocation (base: string): string {
   }
   return (path || '/') + window.location.search + window.location.hash
 }
-
-function pushState (url: string, replace?: boolean) {
-  // try...catch the pushState call to get around Safari
-  // DOM Exception 18 where it limits to 100 pushState calls
-  const history = window.history
-  try {
-    if (replace) {
-      history.replaceState({ key: _key }, '', url)
-    } else {
-      _key = genKey()
-      history.pushState({ key: _key }, '', url)
-    }
-    saveScrollPosition(_key)
-  } catch (e) {
-    window.location[replace ? 'replace' : 'assign'](url)
-  }
-}
-
-function replaceState (url: string) {
-  pushState(url, true)
-}

src/index.js

@@ -1,15 +1,17 @@
 /* @flow */
 
 import { install } from './install'
+import { START } from './util/route'
+import { assert } from './util/warn'
+import { inBrowser } from './util/dom'
+import { cleanPath } from './util/path'
 import { createMatcher } from './create-matcher'
+import { normalizeLocation } from './util/location'
+import { supportsPushState } from './util/push-state'
+
 import { HashHistory } from './history/hash'
 import { HTML5History } from './history/html5'
 import { AbstractHistory } from './history/abstract'
-import { inBrowser, supportsHistory } from './util/dom'
-import { assert } from './util/warn'
-import { cleanPath } from './util/path'
-import { normalizeLocation } from './util/location'
-import { START } from './util/route'
 
 export default class VueRouter {
   static install: () => void;
@@ -34,7 +36,7 @@ export default class VueRouter {
     this.match = createMatcher(options.routes || [])
 
     let mode = options.mode || 'hash'
-    this.fallback = mode === 'history' && !supportsHistory
+    this.fallback = mode === 'history' && !supportsPushState
     if (this.fallback) {
       mode = 'hash'
     }
@@ -86,9 +88,7 @@ export default class VueRouter {
       history.transitionTo(history.getCurrentLocation())
     } else if (history instanceof HashHistory) {
       const setupHashListener = () => {
-        window.addEventListener('hashchange', () => {
-          history.onHashChange()
-        })
+        history.setupListeners()
       }
       history.transitionTo(
         history.getCurrentLocation(),

src/util/dom.js

@@ -1,18 +1,3 @@
 /* @flow */
 
 export const inBrowser = typeof window !== 'undefined'
-
-export const supportsHistory = 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 && 'pushState' in window.history
-})()

src/util/push-state.js

@@ -0,0 +1,63 @@
+/* @flow */
+
+import { inBrowser } from './dom'
+import { saveScrollPosition } from './scroll'
+
+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 && 'pushState' in window.history
+})()
+
+// use User Timing api (if present) for more accurate key precision
+const Time = inBrowser && window.performance && window.performance.now
+  ? window.performance
+  : Date
+
+let _key: string = genKey()
+
+function genKey (): string {
+  return Time.now().toFixed(3)
+}
+
+export function getStateKey () {
+  return _key
+}
+
+export function setStateKey (key: string) {
+  _key = key
+}
+
+export function genNewKey () {
+  _key = genKey()
+}
+
+export function pushState (url?: string, replace?: boolean) {
+  // try...catch the pushState call to get around Safari
+  // DOM Exception 18 where it limits to 100 pushState calls
+  const history = window.history
+  try {
+    if (replace) {
+      history.replaceState({ key: _key }, '', url)
+    } else {
+      _key = genKey()
+      history.pushState({ key: _key }, '', url)
+    }
+    saveScrollPosition()
+  } catch (e) {
+    window.location[replace ? 'replace' : 'assign'](url)
+  }
+}
+
+export function replaceState (url?: string) {
+  pushState(url, true)
+}

src/util/scroll.js

@@ -2,12 +2,22 @@
 
 import type Router from '../index'
 import { assert } from './warn'
+import { getStateKey, setStateKey } from './push-state'
 
 const positionStore = Object.create(null)
 
+export function setupScroll () {
+  window.addEventListener('popstate', e => {
+    if (e.state && e.state.key) {
+      setStateKey(e.state.key)
+    }
+  })
+
+  window.addEventListener('scroll', saveScrollPosition)
+}
+
 export function handleScroll (
   router: Router,
-  key: string,
   to: Route,
   from: Route,
   isPop: boolean
@@ -27,7 +37,7 @@ export function handleScroll (
 
   // wait until re-render finishes before scrolling
   router.app.$nextTick(() => {
-    let position = getScrollPosition(key)
+    let position = getScrollPosition()
     const shouldScroll = behavior(to, from, isPop ? position : null)
     if (!shouldScroll) {
       return
@@ -50,17 +60,21 @@ export function handleScroll (
   })
 }
 
-export function saveScrollPosition (key: string) {
-  if (!key) return
-  positionStore[key] = {
-    x: window.pageXOffset,
-    y: window.pageYOffset
+export function saveScrollPosition () {
+  const key = getStateKey()
+  if (key) {
+    positionStore[key] = {
+      x: window.pageXOffset,
+      y: window.pageYOffset
+    }
   }
 }
 
-function getScrollPosition (key: string): ?Object {
-  if (!key) return
-  return positionStore[key]
+function getScrollPosition (): ?Object {
+  const key = getStateKey()
+  if (key) {
+    return positionStore[key]
+  }
 }
 
 function getElementPosition (el: Element): Object {