博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js中的路由匹配
阅读量:5936 次
发布时间:2019-06-19

本文共 6023 字,大约阅读时间需要 20 分钟。

 

 

routie插件:

/** * 路由 * @example * routie( *     { *         '/':function(){ }, *         '/main':function (){ },     // *         '/list/:id': function(id){  //带参数的路由                 loadModule("#maindiv","list",{"id":id}) *         } *     } * ) */(function(w) {    var routes = [];    var map = {};    var reference = "routie";    var oldReference = w[reference];    var Route = function(path, name) {        this.name = name;        this.path = path;        this.keys = [];        this.fns = [];        this.params = {};        this.regex = pathToRegexp(this.path, this.keys, false, false);    };    Route.prototype.addHandler = function(fn) {        this.fns.push(fn);    };    Route.prototype.removeHandler = function(fn) {        for (var i = 0, c = this.fns.length; i < c; i++) {            var f = this.fns[i];            if (fn == f) {                this.fns.splice(i, 1);                return;            }        }    };    //执行匹配的路由对应的回调函数    Route.prototype.run = function(params) {        for (var i = 0, c = this.fns.length; i < c; i++) {            this.fns[i].apply(this, params);        }    };    Route.prototype.match = function(path, params){        var m = this.regex.exec(path);        if (!m) return false;        for (var i = 1, len = m.length; i < len; ++i) {            var key = this.keys[i - 1];            var val = ('string' == typeof m[i]) ? decodeURIComponent(m[i]) : m[i];            if (key) {                this.params[key.name] = val;            }            params.push(val);        }        return true;    };    Route.prototype.toURL = function(params) {        var path = this.path;        for (var param in params) {            path = path.replace('/:'+param, '/'+params[param]);        }        path = path.replace(/\/:.*\?/g, '/').replace(/\?/g, '');        if (path.indexOf(':') != -1) {            throw new Error('missing parameters for url: '+path);        }        return path;    };    var pathToRegexp = function(path, keys, sensitive, strict) {        if (path instanceof RegExp) return path;        if (path instanceof Array) path = '(' + path.join('|') + ')';        path = path            .concat(strict ? '' : '/?')            .replace(/\/\(/g, '(?:/')            .replace(/\+/g, '__plus__')            .replace(/(\/)?(\.)?:(\w+)(?:(\(.*?\)))?(\?)?/g, function(_, slash, format, key, capture, optional){                keys.push({ name: key, optional: !! optional });                slash = slash || '';                return '' + (optional ? '' : slash) + '(?:' + (optional ? slash : '') + (format || '') + (capture || (format && '([^/.]+?)' || '([^/]+?)')) + ')' + (optional || '');            })            .replace(/([\/.])/g, '\\$1')            .replace(/__plus__/g, '(.+)')            .replace(/\*/g, '(.*)');        return new RegExp('^' + path + '$', sensitive ? '' : 'i');    };    var addHandler = function(path, fn) {        var s = path.split(' ');        var name = (s.length == 2) ? s[0] : null;        path = (s.length == 2) ? s[1] : s[0];        if (!map[path]) {            map[path] = new Route(path, name);            routes.push(map[path]);        }        map[path].addHandler(fn);    };    //调用入口    var routie = function(path, fn) {        if (typeof fn == 'function') {            addHandler(path, fn);            routie.reload();        } else if (typeof path == 'object') {   //多个路由的情况 {'/list':function(){},}            for (var p in path) {                addHandler(p, path[p]);   //将每个路由通过Route实例化,生成路由对象            }            routie.reload();   //获取当前url中的hash,找到匹配的路由,并执行路由的回调函数        } else if (typeof fn === 'undefined') {            routie.navigate(path);        }    };    routie.lookup = function(name, obj) {        for (var i = 0, c = routes.length; i < c; i++) {            var route = routes[i];            if (route.name == name) {                return route.toURL(obj);            }        }    };    routie.remove = function(path, fn) {        var route = map[path];        if (!route)            return;        route.removeHandler(fn);    };    routie.removeAll = function() {        map = {};        routes = [];    };    routie.navigate = function(path, options) {        options = options || {};        var silent = options.silent || false;        if (silent) {            removeListener();        }        setTimeout(function() {            window.location.hash = path;            if (silent) {                setTimeout(function() {                    addListener();                }, 1);            }        }, 1);    };    routie.noConflict = function() {        w[reference] = oldReference;        return routie;    };    var getHash = function () {        var result = window.location.hash.substring(1);        if (result.indexOf("&")>-1) {            result = window.location.hash.substring(1, window.location.hash.indexOf("&"));        } else if (result.indexOf("?") > -1) {            result = window.location.hash.substring(1, window.location.hash.indexOf("?"));        }        return result;    };    var checkRoute = function(hash, route) {        var params = [];        if (route.match(hash, params)) {            route.run(params);            return true;        }        return false;    };    var hashChanged = routie.reload = function() {        var hash = getHash();        for (var i = 0, c = routes.length; i < c; i++) {            var route = routes[i];            if (checkRoute(hash, route)) {                return;            }        }    };    var addListener = function() {        if (w.addEventListener) {            w.addEventListener('hashchange', hashChanged, false);        } else {            w.attachEvent('onhashchange', hashChanged);        }    };    var removeListener = function() {        if (w.removeEventListener) {            w.removeEventListener('hashchange', hashChanged);        } else {            w.detachEvent('onhashchange', hashChanged);        }    };    addListener();    w[reference] = routie;})(window);

 

转载于:https://www.cnblogs.com/lydialee/p/7766781.html

你可能感兴趣的文章
试用阿里云邮件推送服务
查看>>
Extra Credits: Easy Games 17
查看>>
Linux组件封装(八)——Socket的封装
查看>>
展开字符串
查看>>
关于选择器(很早之前写的)
查看>>
android 下linux的I2C 读写函数实例
查看>>
CLI组成
查看>>
maven - Eclipse构建maven项目
查看>>
关于VS2008/2010中SORT,stable_sort的比较函数中strict weak ordering
查看>>
局部内部类
查看>>
apache 开启网页压缩功能
查看>>
[Android四大组件之一]——Activity
查看>>
使用 ButterKnife 操作无效(不报错、点击后没效果)------代码编写错误
查看>>
Test of String
查看>>
[转载]Linux内存高,触发oom-killer问题解决
查看>>
SqlServer中的merge操作(转载)
查看>>
学习进度条(第十四周)
查看>>
工控随笔_C#连接PLC_之_C#入门_01_配置学习环境
查看>>
hexo搭建个人主页托管于github
查看>>
linux下常用命令
查看>>