實現(xiàn)自定義路由

本文實現(xiàn)自定路由，主要是事件hashchange的使用，然后根據(jù)我們的業(yè)務需求封裝。

首先實現(xiàn)一個router的類，并實例化。

function _router(config){
    this.config = config ? config : {}; 
}    
_router.prototype = {
    event:function(str,callback){
        var events = str.split(' ');
        for (var i in events) window.addEventListener(events[i],callback,false);
    },
init: function() {
    this.event('load hashchange',this.refresh.bind(this));
    return this;
},
refresh: function() {
    this.currentUrl = location.hash.slice(1) || '/';
    this.config[this.currentUrl]();
},
route: function(path,callback){
    this.config[path] = callback || function(){};
}
}
function router (config){
    return new _router(config).init();
}

上邊唯一需要注意的是，在使用addEventListener的時候，需要注意bind函數(shù)的使用，因為我是踩了坑，這才體會到$.proxy()。

上邊使用的時候可以使用兩種方法進行注冊，但第二種是依賴第一種的。

方法一：

var Router = router({
    '
        
		

        		
網(wǎng)友評論
     		
				

			
			
			
		
		
		
    	
    	
        	

        		
更多精彩分享
        		

        			
        		
        			
	        		
	        		學習是年輕人改變自己的最好方式