/**
* 注册路由跳转脚本
* 实现前端页面的跳转的简单URl路由
* @author ShanLingyu
* date:2018.4.28
*/
(function() {
var util = {
//获取路由的路径和详细参数
getParamsUrl:function(){
var hashDeatail = location.hash.split("?"),
hashName = hashDeatail[0].split("#")[1],//路由地址
params = hashDeatail[1] ? hashDeatail[1].split("&") : [],//参数内容
query = {};//承载参数对象
for(var i = 0;i<params.length ; i++){//封装参数内容
var item = params[i].split("=");
query[item[0]] = item[1]
}
return {
path:hashName,
query:query
}
}
}
function spaRouters(){
this.mainRouter = null;//保存项目地址
this.routers = {};//保存注册的所有路由
this.beforeFun = null;//切换前
this.afterFun = null;
}
spaRouters.prototype={
init:function(){
var self = this;
//页面加载匹配路由
window.addEventListener('load',function(){
self.urlChange()
})
//路由切换
window.addEventListener('hashchange',function(){
self.urlChange()
})
//异步引入js通过回调传递参数
window.SPA_RESOLVE_INIT = null;
},
refresh:function(currentHash){
var self = this;
if(self.beforeFun){
self.beforeFun({
to:{
path:currentHash.path,
query:currentHash.query
},
next:function(){
self.routers[currentHash.path].callback.call(self,currentHash)
}
})
}else{
self.routers[currentHash.path].callback.call(self,currentHash)
}
},
//路由处理
urlChange:function(){
var currentHash = util.getParamsUrl();
if(this.routers[currentHash.path]){
this.refresh(currentHash)
}else{
//不存在的地址重定向到首页(根路径)
location.hash = '/'
}
},
//无权限跳转回项目地址
takeOut:function(){
window.location.href=this.mainRouter;
},
//项目地址注册
mainMap:function(path){
this.mainRouter = path.replace(/\s*/g,"");//过滤空格
},
//单层路由注册
map:function(path,callback){
path = path.replace(/\s*/g,"");//过滤空格
if(callback && Object.prototype.toString.call(callback) === '[object Function]' ){
this.routers[path] ={
callback:callback,//回调
fn:null //存储异步文件状态
}
}else{
console.trace('注册'+path+'地址需要提供正确的的注册回调')
}
},
//切换之前一些处理
beforeEach:function(callback){
if(Object.prototype.toString.call(callback) === '[object Function]'){
this.beforeFun = callback;
}else{
console.trace('路由切换前钩子函数不正确')
}
},
//切换成功之后
afterEach:function(callback){
if(Object.prototype.toString.call(callback) === '[object Function]'){
this.afterFun = callback;
}else{
console.trace('路由切换后回调函数不正确')
}
},
//路由异步Ajax加载html文件
asyncFunFile:function(jsfile,htmlFile,transition){
var self = this;
$.ajax({
type: "post",
dataType: "html",
url: htmlFile,
success: function (data) {
if(data == 'null'){
self.takeOut();
}else{
$('#showPage').html(data);
//加载js页面内容
self.asyncFunJs(jsfile,transition);
}
},error:function(data){//请求失败后处理函数
console.trace('路由切换调取资源失败')
},
});
},
//路由异步懒加载js文件
asyncFunJs:function(jsfile,transition){
var self = this;
if(self.routers[transition.path].fn){
self.afterFun && self.afterFun(transition)
self.routers[transition.path].fn(transition)
}else{
var _body= document.getElementsByTagName('body')[0];
var scriptEle= document.createElement('script');
scriptEle.type= 'text/javascript';
scriptEle.src= jsfile;
scriptEle.async = true;
SPA_RESOLVE_INIT = null;
scriptEle.onload= function(){
self.afterFun && self.afterFun(transition)
self.routers[transition.path].fn = SPA_RESOLVE_INIT;
self.routers[transition.path].fn(transition);
}
_body.appendChild(scriptEle);
}
},
//同步操作,执行回调
syncFunFile:function(callback,transition){
this.afterFun && this.afterFun(transition)
callback && callback(transition)
}
}
//注册到window全局
window.spaRouters = new spaRouters();
})()
没有合适的资源?快使用搜索试试~ 我知道了~
js实现轻量级前端路由框架
共2个文件
js:2个
需积分: 23 40 下载量 168 浏览量
2018-08-28
16:11:50
上传
评论 1
收藏 2KB RAR 举报
温馨提示
其用少量的代码,实现了web项目的单页面实现框架,通过此框架可以实现前端路由功能。此框架适合做单页面程序。简单、实用、可拓展
资源推荐
资源详情
资源评论
收起资源包目录
url-rooter(前端路由).rar (2个子文件)
url-rooter
rooter.js 944B
js-rooter.js 6KB
共 2 条
- 1
资源评论
sinat_33266046
- 粉丝: 0
- 资源: 10
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功