いくつかの単語の男は言った、最初のオファーコード、その後、徐々に世間話！
/ ****著者：XYB *** * /
（関数（）{
VARのUTIL = {
//パスルーティング及び詳細なパラメータを取得
getParamsUrl：関数（）{
"？"、VAR hashDeatail = location.hash.split（）
hashName hashDeatail = [0] .split（ "＃" ）[1] //ルーティングアドレス
のparams = hashDeatail [1] hashDeatail [ 1] .split（ "＆"）:? [] // パラメータ含量
= {}クエリ;
（VAR I = 0;私はのparamsを< .LENGTH; I ++）{
VAR = paramsは項目[I] .split（ "="）;
クエリ[項目[0] =項目[1]
}
戻り{
パス：hashName、
クエリ：クエリ
}
}
}
関数spaRouters（） {
this.routersは= {}; //すべての経路の登録保存
//前切替; this.beforeFun = NULL
; this.afterFun = NULL
}
spaRouters.prototype = {
{（）関数：INITを
自己=このVAR;
//ページのロードマッチングルート
window.addEventListener（ '負荷'、関数（）{
self.urlChange（）
}）
//ルートの切り替え
、（ 'なhashchange' window.addEventListenerを関数（）{
self.urlChange（ ）
}）
//パラメータJSを通過させることによって導入された非同期コールバック
window.SPA_RESOLVE_INIT = NULL;
}、
リフレッシュ：関数（currentHash）{
VAR =自己この;
IF（self.beforeFun）{
self.beforeFun（{
へ：{
パス：currentHash .path、
クエリ：currentHash.query
}、
次に：関数（）{
self.routers [currentHash.path] .callback.call（セルフ、currentHash）
}
}）
} {他
self.routers [currentHash.path] .callback。コール（自己、currentHash）
}
}
//処理ルーティング
により、urlChangeを：関数（）{
VAR currentHash util.getParamsUrl =（）;
IF（this.routers [currentHash.path]）{
This.Refresh（currentHash）
}他は{
//アドレスは体重を存在しません向けホーム
location.hash = '/インデックス'
}
}
//単一ルートレジスタ
マップ：関数（パス、コールバック）{
パスpath.replace =（/ \ * S / G、 ""）; //フィルタ空間
IF（&& Object.prototype.toString.callコールバック（コールバック）=== '[オブジェクト機能]'）{
this.routers [パス] = {
コールバック：コールバック、コールバック//
FN：NULL //非同期メモリ・ファイル・ステータス
}
他{}
console.trace（「登録」+パスが+「登録されたコールバックの正しいアドレスを必要」）
}
}
//いくつかの処理の切り替え前
beforeEachを：関数（コールバック）{
IF（Object.prototype.toString.call（コールバック）=== '[オブジェクト機能]'）{
this.beforeFun =コールバック;
}そうでなければ{
console.trace（ '誤っ経路切替機能前フック'）
}
}
/ /ハンドオーバ成功後
afterEach：関数（コールバック）{
IF（Object.prototype.toString.call（コールバック）=== '[目的関数]'）{
this.afterFun =コールバック;
}そうでなければ{
console.trace（「経路切り替え誤ったコールバック関数「）
}
}
//非同期ルーティング遅延ロードJSファイル
asyncFun：機能（ファイル、トランジション）{
VAR =自己この;
IF（self.routers [transition.path]の.Fn）{
self.afterFun && self.afterFun（トランジション）
self.routers [transition.path]の.Fn（トランジション）
、他} {
はconsole.log（ "非同期的にダウンロードされたJSファイルを起動する" +ファイル）
VaRの_body = document.getElementsByTagName（ 'ボディ'）[0];
VAR scriptEle =のdocument.createElement（ 'スクリプト'）;
scriptEle.type = 'テキスト/ javascriptの';
scriptEle.src =ファイル。
scriptEle.async =はtrue。
SPA_RESOLVE_INIT = NULL;
scriptEle.onload =関数（）{
にconsole.log（ '下载' +ファイル+ '完成'）
self.afterFun && self.afterFun（遷移）
self.routers [transition.path]の.Fn = SPA_RESOLVE_INIT。
self.routers [transition.path]の.Fn（遷移）
}
_body.appendChild（scriptEle）。
}
}
//同步操作
syncFun：関数（コールバック、遷移）{
this.afterFun && this.afterFun（遷移）
コールバック&&
//ウィンドウグローバルレジスタ
window.spaRouters =新新spaRouters（）;
}）（）
次のようにケースがある：
1、静的の.html / .htmのファイルを作成します。
2、HTML内の文書要素の作成
<のhref = "＃/ログインを " >試験1 </a>を、
<a href="#/register"> 测试2 </a>の
<a href="#/main">测试3 </a>の
「＃」は、対応するコンテンツを表し、
3はそれぞれ、3つ作成します
login.js
index.js
main.jsスクリプトファイル。
4、登録ルート：
spaRouters.map（ '/インデックス'、関数（遷移）{
//非同期でロードJS
spaRouters.asyncFun（ 'index.js'、トランジション）
//または同期コールバック
//spaRouters.syncFun（関数（遷移）{}、遷移）
}）
5は、次のようにスクリプトコードはlogin.js。
=機能SPA_RESOLVE_INIT（遷移）{
アラート（ "ログイン"）;
}
次のように5、index.jsスクリプトコードは次のようになります。
SPA_RESOLVE_INIT = function(transition) {
alert("测试1");
}
5、main.js脚本代码如下:
SPA_RESOLVE_INIT = function(transition) {
alert("测试2");
}
6、初始化：spaRouters.init()；
结束语:
本文下笔之处还以为会发现一些好玩的东西，后来发现自己想多了。
整理来整理去，最后就成了一个比较详尽的文档了。
之后写组件，我会借助些原生的已经内置好的方法来实现，可以省去不少功夫，会很有意思。
日后的精彩演绎源自平时平淡的积累。
对于大部分的人，对于本文这些是无感的，想不到如何在实际项目中应用，觉得很鸡肋，实际上大有可为的，我已经想要跃跃欲试了，嘿嘿。
如有疑问，请各位基佬们私聊或留言，我的大哥大25英寸的手机一直带着身上，可随时联系我......