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);

js中的路由匹配的更多相关文章

  1. vue.js中的路由vue-router2.0使用

    在我们平时工作中,我们有时候会有需求,按照不同的规则,加载不同的组件,页面不去跳转,常见的操作是ajax的异步操作,实现局部刷新加载新数据 在vue中,我们写了很多不同的组件,这时候,实现不刷新调用新 ...

  2. Angular JS中的路由

      前  言            本章节将为大家介绍 AngularJS 路由.AngularJS 路由允许我们通过不同的 URL 访问不同的内容.通过 AngularJS 可以实现多视图的单页We ...

  3. djanjo中url路由匹配规则是啥意思

    一,django路由匹配规则的本质是通过正则表达式对用户的url进行匹配. 1,r 是正则表达式中防止转义的符号,例如在python/n代表换行,加上r就不换行了. 2,$ 正则表达式中表示以什么什么 ...

  4. Go的http包中默认路由匹配规则

    # 一.执行流程 首先我们构建一个简单http server: ```go package main import ( "log" "net/http" ) f ...

  5. node.js中的路由(url)初步

    1.建立n4_root.js var http = require('http'); var url = require('url'); //这是node.js中自带的var router = req ...

  6. node.js中使用路由方法

    1.数组的find方法还是不会用,改为filter 2.正规表达式还是理解的不好 //var myrouter = require("./myrouter"); //myroute ...

  7. ASP.NET Core 中的SEO优化(3):自定义路由匹配和生成

    前言 前两篇文章主要总结了CMS系统两个技术点在ASP.NET Core中的应用: <ASP.NET Core 中的SEO优化(1):中间件实现服务端静态化缓存> <ASP.NET ...

  8. Vue 项目中对路由文件进行拆分(解构的方法)

    项目需求场景: 在开发项目过程中,在项目过于庞大,路由信息非常多的情况下,如果将路由配置信息都放在一个文件里面,那么这个JS是不方便维护的, 那么,这个时候需要我们把这个庞大的路由文件,根据项目功能分 ...

  9. VS2013和VS2015中MVC 区域路由匹配顺序相反

    创建测试工程 分别在vs2013和vs2015中创建mvc项目,并创建First.Second.Three三个Area,每个Area下面创建一个HomeController和Index视图.修改Rou ...

随机推荐

  1. 一次生产环境下MongoDB备份还原数据

    最近开发一个版本的功能当中用到了MongoDB分页,懒于造数据,于是就研究了下从生产环境上导出数据到本地来进行测试. 研究了一下,发现MongoDB的备份还原和MySQL语法还挺类似,下面请看详细介绍 ...

  2. asp.net web api 2.2 基础框架(带例子)

    链接:https://github.com/solenovex/asp.net-web-api-2.2-starter-template 简介 这个是我自己编写的asp.net web api 2.2 ...

  3. [C语言]贪吃蛇_结构数组实现

    一.设计思路 蛇身本质上就是个结构数组,数组里存储了坐标x.y的值,再通过一个循环把它打印出来,蛇的移动则是不断地刷新重新打印.所以撞墙.咬到自己只是数组x.y值的简单比较. 二.用上的知识点 结构数 ...

  4. php过滤textarea 中的换行符问题

    之前我写的替换代码是这样的 $content = str_replace('\r\n', '', $_POST['content']); 为了确保window和Linux的换行符都能去掉,改成这样的: ...

  5. JAVA提高二:枚举

    JDK5.0中有一个非常有用的特性:枚举,这个特性以前在C语言中出现过,后来JDK出现后,开始觉得没有必要,但随着使用JAVA语言的人数增多,发现大家对枚举的需求非常大,于是又加入了此特性,下面我们来 ...

  6. ZOJ2345Gold Coins 简单分块

    昨天做过一样的题: 平方和公式:n*(n+1)*(2n+1) #include<cstdio> #include<cstdlib> #include<iostream&g ...

  7. Android 性能测试之方向与框架篇

    假期结束,你的状态有没有回归?那么,放空脑袋后,先来学习学习,欢迎大家继续关注腾讯云技术社区. 作者:李帅 导语 借项目的开发周期,把思考了一段时间的场景化性能测试框架搭建起来,包括 耗电性能测试.内 ...

  8. 阿里云AliYun表格存储(Table Store)相关案例

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  9. php 变量 循环关键词以及方法

    <?php/* 多行注释 */常用数据类型int string double/float bool变量的定义$a = 123;$b = "123";$c = '456';$d ...

  10. 笨鸟先飞之ASP.NET MVC系列之过滤器(04认证过滤器过滤器)

    概念介绍 认证过滤器是MVC5的新特性,它有一个相对复杂的生命周期,它在其他所有过滤器之前运行,我们可以在认证过滤器中创建一个我们定义的认证方法,也可以结合授权过滤器做一个复杂的认证方法,这个方法可以 ...