js中的路由匹配

时间:2023-07-22 12:01:32

routie插件:http://projects.jga.me/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);