泛式规则
路由的泛式规则很灵活。在这里,我们列出几个使用的路由泛式功能。今天要实现如下两个泛式路由。
/doc/:id符合这个泛式的url可以是 /doc/id0001。/doc/title/*符合这个泛式的url可以是 /doc/title/abcd 或 /doc/title。
(小胖一脸茫然的问:要实现这个好像不容易吧)
不难,找到突破口就会很容易。当有个请求的url符合某个泛式路由时,就会执行对应的处理器。那内部如何判断url符合路由泛式规则呢?答案是把泛式规则转换正则表达式,然后加以判断即可。
(小胖说:哦,我有些明白了!)
既然找到突破口,下一步就要编写一些代码。
// 把后缀的请求参数去掉
function pathRegexp(path)
path = path.replace(/\?(.*)$/,"");
return path;
}
// 运行测试
pathRegexp(("/article/name?id=001") // 打印结果 /article/name这一步的作用是去掉请求参数,因为路由判断的是路径,而不应掺杂请求参数,稍后会讲解如何获得请求参数。
下一步,我们要想办法用正则表达式替换掉所有路径中:xxx 和 * 这种形式的字符串。代码如下:
function pathRegexp (path){
path = path.replace(/\?(.*)$/,"")
// 这一步是把所有 * 替换成正则表达式(.*)
.replace(/((\*{1}(?=\/))|(\*{1}(?=$)))/g,"(.*)")
// 这一步是把所有 :xxx 替换成正则表达式(.*)
.replace(/(:(.*?(?=\/)))|(:(.*?(?=$)))/g,"(.*)")
// 这一步是把所有 / 路径 变为匹配正则表达式的 \/ 的形式
.replace(/\//g,"\\\/")
//这一步,通过生成正则表达式 ,前后的 ^ 和 & 顾名思义,要严格匹配整个路径。
return new RegExp("^"+path+"$");
}
// 测试代码如下:
var path_regexp = pathRegexp("/article/:id/*/:name");
console.log(path_regexp.test("/article/324234/dsd/ccc")); // true看起来很复杂,讲透了就容易了。得到path_regexp正则对象的目的,是通过它验证客户端发来的url是否符合这个正则表达式。本节开发了一个 pathRegexp路由路径转正则表达式的工具,但并没有把泛式路由加入到系统中,还需要对stuwebfk框架的相关代码进行修改。
下节将分析如何加入泛式路由功能,并找到思路和切入点。