仿照jq的模式封装自己的一个路由东西

废话不多说,直接代码

/*!
 * router JavaScript Library v1.1.0 for web
 *  http://39.107.139.174:8084
 *  author huangjunfu
 * /aplanmis-project/aplanmis-mall/src/main/resources/static/mall/js/utils
 *
 * Date: 2019-07-12 T15:04
 * update:2019-12-17 T14:48
 * describe: 目前只mode name 为 hash 的模式
 */
;(function(global,factory,plug){
    if(typeof exports === 'object' && module !== 'undefined'){  // node 判断
        module.exports = factory(global.$,plug);
    } else if(typeof define === 'function' && (define.amd || define.cmd)){ // AMD cmd 判断
        define(factory(global.$,plug));
    } else {
        return  factory.call(global,global.$,plug); // 工厂函数执行
    }
})(typeof window === 'undefined'? this:window,function($,plug){ //工厂内容
    $.fn[plug] = function (ops) {
        var _THIS_ = $(this); // 缓存jq this
        var _DEFL_ = {}; // 预配参数
        var initRouter = ops.router;
        var APP = ops.APP;
        //初始化所有需要用的 路由:hash值 和 加载的内容  暂时没实现路由懒加载
        initRouter.forEach(function(item,index){
            var itemHash = item.hash;
            var itemUlr;
            var _activeName = sessionStorage.getItem('navIndex') // 选中第几个
            if (document.location.protocol == "file:") { // 本地打开
                itemUlr = item.url;
            } else {
                itemUlr = ctx + item.thUrl;
            }
            R.route(itemHash,function () { // 回调
                APP.activeName = _activeName||0;
                _THIS_.load(itemUlr);
            })
        })
    };
    //路由构造器
    function Router() {
        //接受所有的配置路由内容
        this.routes = {};
        this.curUrl = ''; //当前的hash
        this.UserCenterReg= /declare|IntermediateResult|ReviewApplyDetail|ReviewApply|scheduleInquire|declareHave|matCompletionList|approve|matSupplementList|lifeCycle|UserInfo|MyHomeIndex|myHomeIndex|MyMaterials|AddProj|MyCertificateLibrary|CreditDetail|withdrawApplyList|drafts|UnclaimedResultMat|HistoryApplyMat|ApproveResult/ // 个人空间判断
        //所有路由和函数方法 传给 routes
        this.route = function (path, callback) {
            this.routes[path] = callback || function () {};
        };
        this.refresh = function (e) {
            if(e.type=='load' && /div_step/igm.test(location.hash.slice(1))){
                this.curUrl = '/guideIndex'; // 跳转板是在指南
            } else if (e.type == 'load' && this.UserCenterReg.test(location.hash.slice(1))) {
               this.curUrl = '/userCenterIndex' // 跳转个人中心
            }else if(e.type="hashchange" && /userCenterIndex/igm.test(location.hash.slice(1))){
               this.curUrl = '/userCenterIndex' // 跳转个人中心
            } else{
                //获取改变的hash值
                this.curUrl = location.hash.slice(1) || '/';
            }
            this.routes[this.curUrl] && this.routes[this.curUrl](); // 执行对应的事件
        };
        //监听load(加载url)、hashchange(hash改变)事件
        this.init = function () {
            window.addEventListener('load',this.refresh.bind(this),false); // load改变触发事件
            window.addEventListener('hashchange',this.refresh.bind(this),false) // hash 改变触发对应事件
        }
    }
    var R = new Router();//使用Router构造器

    R.init();//监听时间

},'AGRouter'); // 向外暴露

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

春风得意之时

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值