JS实现的简单路由

  • A+
所属分类:javascript

(function(global){
"use strict";
const util = {
	getInitParam(){
		//console.log(window.location.hash);
		//#asd?name=lxy&age=24
		let paramDetail = window.location.hash.split("?"),
			hashName = paramDetail[0].split("#")[1],
			params = paramDetail[1] ? paramDetail[1].split("&") : [],
			query = {};
		for(let i = 0, len = params.length; i < len; i++){
			let item = params[i].split("=");
			query[item[0]] = item[1];
		};
		return {
			path: hashName,
			query: query,
		};
	}
};
let Router = function(){
	this.routers = {};
	this.beforeFn = null;
	this.afterFn = null;
	this.RESOLVE_INIT = null;
	this.index = 0;
};
Router.prototype = {
	init(){
		let self = this;
		window.addEventListener("load", function(){
			self.urlChange("load");
		});
		window.addEventListener("hashchange", function(){
			self.urlChange("hashchange");
		});
	},
	urlChange(operator){
		console.log(operator);
		let currentHash = util.getInitParam();
		if(this.routers[currentHash.path]){
			this.refresh(currentHash);
		}else{
			window.location.hash = "/index";
			console.trace("没到找到该注册地址!为您跳转默认页....");
		}
	},
	refresh(currentHash){
		let self = this;
		if(self.beforeFn){
			self.beforeFn({
				to: {
					path: currentHash.path,
					query: currentHash.query,
				},
				next(){
					self.routers[currentHash.path].callback.call(self, currentHash);
				}
			});
		}else{
			this.routers[currentHash.path].callback.call(self, currentHash);
		}
	},
	register(path, callback){
		path = String(path).replace(/\s*/g, "");
		if(callback && {}.toString.call(callback) === "[object Function]"){
			this.routers[path] = {callback:callback, fn:null};
		}else{
			console.trace("注册"+path+"地址必须提供正确的回调函数!");
		}
	},
	beforeEach(callback){
		if(callback && {}.toString.call(callback) === "[object Function]"){
			this.beforeFn = callback;
		}else{
			console.trace("路由切换前钩子函数不正确!");
		}
	},
	afterEach(callback){
		if(callback && {}.toString.call(callback) === "[object Function]"){
			this.afterFn = callback;
		}else{
			console.trace("路由切换后钩子函数不正确!");
		}
	},
	asyncScript(file, currentHash){
		let self = this;
		if(self.routers[currentHash.path].fn){
			self.afterFn && self.afterFn(currentHash);
			self.routers[currentHash.path].fn.call(self, currentHash, "isCache");
		}else{
			let body = document.getElementsByTagName("body")[0],
				script = document.createElement("script");
			script.type = "text/javascript";
			script.src = file;
			script.async = true;
			self.RESOLVE_INIT = null;
			script.onload = function(){
				console.log("脚本"+file+"加载完毕!");
				self.afterFn && self.afterFn(currentHash);
				self.routers[currentHash.path].fn = self.RESOLVE_INIT;
				self.routers[currentHash.path].fn.call(self, currentHash, "noCache");
			};
			body.appendChild(script);
		}
	},
	syncScript(callback, currentHash){
		this.afterFn && this.afterFn(currentHash);
		callback && callback(currentHash);
	}
};
global.Router = Router;
})(window);
let route = new Router();
route.register("/hello", function(currentHash){
this.asyncScript("./js/hello.js", currentHash);
});
route.beforeEach(function(transition){
console.log("before do something.....");
transition.next();
});
route.init();
weinxin
我的微信
欢迎来撩!!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: