泛式规则

路由的泛式规则很灵活。在这里,我们列出几个使用的路由泛式功能。今天要实现如下两个泛式路由。

  • /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框架的相关代码进行修改。

下节将分析如何加入泛式路由功能,并找到思路和切入点。