小程序單頁面應用特征是什么

這篇文章主要介紹了小程序單頁面應用特征是什么，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

單頁面應用特征

「假設：」 在一個 web 頁面中，有1個按鈕，點擊可跳轉到站內其他頁面。

「多頁面應用：」 點擊按鈕，會從新加載一個html資源，刷新整個頁面；

「單頁面應用：」 點擊按鈕，沒有新的html請求，只發生局部刷新，能營造出一種接近原生的體驗，如絲般順滑。

SPA 單頁面應用為什么可以幾乎無刷新呢？因為它的SP——single-page。在第一次進入應用時，即返回了唯一的html頁面和它的公共靜態資源，后續的所謂“跳轉”，都不再從服務端拿html文件，只是DOM的替換操作，是模（jia）擬（zhuang）的。

那么js又是怎么捕捉到組件切換的時機，并且無刷新變更瀏覽器url呢？靠hash和HTML5History。

hash 路由

特征

• 類似www.xiaoming.html#bar 就是哈希路由，當 # 后面的哈希值發生變化時，不會向服務器請求數據，可以通過 hashchange 事件來監聽到 URL 的變化，從而進行DOM操作來模擬頁面跳轉

• 不需要服務端配合

• 對 SEO 不友好

原理

hash

HTML5History 路由

特征

1. History 模式是 HTML5 新推出的功能，比之 hash 路由的方式直觀，長成類似這個樣子www.xiaoming.html/bar ，模擬頁面跳轉是通過 history.pushState(state, title, url) 來更新瀏覽器路由，路由變化時監聽 popstate 事件來操作DOM

2. 需要后端配合，進行重定向

3. 對 SEO 相對友好

4. 
   

原理

HTML5History

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)
  })
  }
 }
 }
 )
 }
 ...
}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“小程序單頁面應用特征是什么”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!