web端hash前端路由

由 夕空 撰写于  2020年4月19日

自己写的前端路由方法,这样再也不用操心点击按钮执行哪个方法,以及后退执行哪个方法,退出哪个方法。

将函数绑定到 #url 这种hash路径上,以及退出函数也绑定上,只需在按钮上href="#url"非常方便。

如果不想让父地址执行退出,Router.routes['/home'].subset=['/sub1','/sub2']给#/home添加子集地址即可解决问题。

//============================hash前端路由
/*
* 夕空 flashme.cn 2020-4-19
//初始化
window.Router = new Router();
window.Router.init();
//方法
Router.route("/url", function, function);
Router.route(url地址, 触发函数, 退出函数);
1.填写"hash"将会监听每次地址变更的触发
2.添加地址层级关系
例:Router.routes['/home'].subset=['/sub1','/sub2']
/home的子地址有/sub1、/sub2,打开子集地址/home将不执行退出函数
*/
function Router() {
this.routes = {};
this.currentUrl = '';
this.beforeUrl = '';
}
Router.prototype.route = function(path, callback, removeback) {
var obj={start:false,subset:[]};
obj.callback=callback || function(){};
if(removeback) obj.leave = removeback;
this.routes[path] = obj;
};
Router.prototype.refresh = function(ev) {
this.routes["hash"] && this.routes["hash"]();

this.currentUrl = location.hash.slice(1) || '/';
if(this.routes[this.currentUrl] && this.routes[this.currentUrl].start == false){
this.routes[this.currentUrl].callback();
this.routes[this.currentUrl].start = true;
this.routes[this.currentUrl].before = this.beforeUrl;//记录上一个地址
}
//将之前的地址判断是否执行退出
this.parentUrl(this.beforeUrl);

//判断全部地址是否执行退出
for(var k in this.routes){
var than=this.routes[k];
if(than.start && this.currentUrl!=k){
//处在打开状态 & 当前地址不等于此地址
if(!this.forsub(than)){
than.start = false;
than.leave && than.leave();
}

}
}
this.beforeUrl=this.currentUrl;

};
Router.prototype.forsub = function(than){
//for 子地址非打开状态 >> 执行退出函数
for(var i in than.subset){//判断子集是否打开状态
if(this.routes[than.subset[i]].start){
return true;
}
}
return false;
}
Router.prototype.parentUrl = function (before) {
if (before && this.currentUrl!=before && this.routes[before] && this.routes[before].start && !this.forsub(this.routes[before])) {
this.routes[before].start = false;
this.routes[before].leave && this.routes[before].leave();
var parent = this.routes[before].before;
if (parent) {
this.routes[before].before = null;
this.parentUrl(parent);
}
}

}
Router.prototype.init = function() {
window.addEventListener('load', this.refresh.bind(this), false);
window.addEventListener('hashchange', this.refresh.bind(this), false);
}




声明:星耀夕空|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - web端hash前端路由


欢迎光顾我的小站!