Js achieve self single page function package

Man of few words said, the first offer code, and then slowly small talk!

/ **** author: XYB *** * /

(function () { 
var util = { 
// Get the path routing and detailed parameters 
getParamsUrl: function () { 
var hashDeatail = location.hash.split (), "?" 
hashName hashDeatail = [0] .split ( "#" ) [1], // the routing address 
params = hashDeatail [1] hashDeatail [ 1] .split ( "&"):? [], // the parameter content 
Query = {}; 
for (var I = 0; I <the params .length; I ++) { 
var = the params Item [I] .split ( "="); 
Query [Item [0]] = Item [. 1] 
} 
return { 
path: hashName, 
Query: Query 
} 
} 
} 
function spaRouters () { 
this.routers = {}; // save the registration of all the routes 
this.beforeFun = null; // before switching 
this.afterFun = null; 
} 
spaRouters.prototype = { 
the init: function () {
Self = the this var; 
// page load matching route 
window.addEventListener ( 'Load', function () { 
self.urlChange () 
}) 
// route switching 
window.addEventListener ( 'hashchange', function () { 
self.urlChange ( ) 
}) 
// asynchronous callback introduced by passing parameters js 
window.SPA_RESOLVE_INIT = null; 
}, 
Refresh: function (currentHash) { 
var = Self the this; 
IF (self.beforeFun) { 
self.beforeFun ({ 
to: { 
path: currentHash .path, 
Query: currentHash.query 
}, 
Next: function () { 
self.routers [currentHash.path] .callback.call (Self, currentHash) 
} 
}) 
} {the else 
self.routers [currentHash.path] .callback. call (self, currentHash)
} 
} 
// routing processing 
a urlChange: function () { 
var currentHash util.getParamsUrl = (); 
IF (this.routers [currentHash.path]) { 
This.Refresh (currentHash) 
} the else { 
// the address does not exist weight Home directed to 
the location.hash = '/ index' 
} 
}, 
// single route Register 
Map: function (path, the callback) { 
path path.replace = (/ \ * S / G, ""); // filter space 
IF (&& Object.prototype.toString.call the callback (the callback) === '[Object Function]') { 
this.routers [path] = { 
the callback: the callback, the callback // 
fn: null // asynchronous memory file status 
} 
the else {} 
console.trace ( 'registration' + path + 'requires the correct address of the registered callback') 
} 
}, 
before switching // some processing 
beforeEach: function (callback) {
IF (Object.prototype.toString.call (the callback) === '[Object Function]') { 
this.beforeFun = the callback; 
} the else { 
console.trace ( 'the hook before the route switching function incorrectly') 
} 
}, 
/ / after the handover success 
afterEach: function (the callback) { 
IF (Object.prototype.toString.call (the callback) === '[Object function]') { 
this.afterFun = the callback; 
} the else { 
console.trace ( 'route switching callback function incorrectly ') 
} 
} 
// asynchronous routing lazy loading js file 
asyncFun: function (file, Transition) { 
var = Self the this; 
IF (self.routers [transition.path] .fn) { 
self.afterFun && self.afterFun (Transition) 
self.routers [transition.path] .fn (Transition) 
} {the else 
the console.log ( "start js files downloaded asynchronously" + file)
 var _body= document.getElementsByTagName('body')[0];
 var scriptEle= document.createElement('script');
 scriptEle.type= 'text/javascript';
 scriptEle.src= file;
 scriptEle.async = true;
 SPA_RESOLVE_INIT = null;
 scriptEle.onload= function(){
 console.log('下载'+file+'完成')
 self.afterFun && self.afterFun(transition)
 self.routers[transition.path].fn = SPA_RESOLVE_INIT;
 self.routers[transition.path].fn(transition)
 }
 _body.appendChild(scriptEle);
 }
 },
 //同步操作
 syncFun:function(callback,transition){
 this.afterFun && this.afterFun(transition)
 callback && callback(transition)
 }

 }
// Register the window global 
window.spaRouters = new new spaRouters (); 
}) () 


case are as follows: 

1, create a static .html / .htm files; 

2, create a document element in html 
<a href = "# / login " > test 1 </a>,

<a href="#/register">测试2</a>

<a href="#/main">测试3</a>

"#" Represents the corresponding content; 

3, respectively, to create three

login.js

index.js

main.js script file;

4, the registered route: 
spaRouters.map ( '/ index', function (Transition) { 
    // loaded asynchronously JS 
    spaRouters.asyncFun ( 'The index.js', Transition) 
    // or synchronous callback 
    //spaRouters.syncFun (function ( Transition) {}, Transition) 
}) 

. 5, login.js script code is as follows:

   = Function SPA_RESOLVE_INIT (Transition) { 
   　　Alert ( "login"); 
   }

5, index.js script code is as follows:

   SPA_RESOLVE_INIT = function(transition) {
   　　alert("测试1");
   }

5、main.js脚本代码如下:

   SPA_RESOLVE_INIT = function(transition) {
   　　alert("测试2");
   }

6、初始化：spaRouters.init()；


结束语:

   本文下笔之处还以为会发现一些好玩的东西，后来发现自己想多了。

  整理来整理去，最后就成了一个比较详尽的文档了。

  之后写组件，我会借助些原生的已经内置好的方法来实现，可以省去不少功夫，会很有意思。

  日后的精彩演绎源自平时平淡的积累。

  对于大部分的人，对于本文这些是无感的，想不到如何在实际项目中应用，觉得很鸡肋，实际上大有可为的，我已经想要跃跃欲试了，嘿嘿。

  如有疑问，请各位基佬们私聊或留言，我的大哥大25英寸的手机一直带着身上，可随时联系我......