第五天——范式路由之泛式规则

泛式规则

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

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

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