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. DOM中document对象的常用属性方法

    每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返 ...

  2. HADOOP源码分析之RPC(1)

    源码位于Hadoop-common ipc包下 abstract class Server 构造Server protected Server(String bindAddress, int port ...

  3. HDU 5976 数学

    Detachment Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  4. Online Bayesian Probit Regression介绍之Factor Graph

    下面就开始讲讲概率图中的Factor Graph.概率图博大精深,非我等鼠辈能够完全掌握,我只是通过研究一些通用的模型,对概率图了解了一点皮毛.其实我只是从概率这头神兽身上盲人摸象地抓掉几根毛,我打算 ...

  5. python---time模块使用详解

    python中的time模块提供一些方法用来进行关于时间的操作,time模块中有以下方法可供使用: time() --- 返回当前时间的时间戳. 调用:time.time(),  可用于计算程序运行的 ...

  6. 定制Three.js中Material属性

    1.找到想要更改的着色器代码

  7. JavaScript链式调用

    1.什么是链式调用? 这个很容易理解,例如 $('text').setStyle('color', 'red').show(); 一般的函数调用和链式调用的区别:链式调用完方法后,return thi ...

  8. 实战之elasticsearch集群及filebeat server和logstash server

    author:JevonWei 版权声明:原创作品 实战之elasticsearch集群及filebeat server和logstash server 环境 elasticsearch集群节点环境为 ...

  9. MVC中Controller控制器相关技术

    第6章Controller相关技术 Controller(控制器)在ASP.NET MVC中负责控制所有客户端与服务器端的交互,并 且负责协调Model与View之间的数椐传递,是ASP.NET MV ...

  10. asp.net调用Lodop实现页面打印或局部打印,可进行打印设置或预览

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebPrint.aspx.cs ...