PocketLibs(2)—— 请求相关 path-to-regexp

code in here
使用path-to-regexp,我们可以在路径字符串中使用正则。如/:foo*/:bar?/icon-:foo(\\d+).png等。
像express、vue好多框架都引用它做路径匹配,看一看,一劳永逸。

直接调用构造函数使用,一个可能含某种匹配模式的路径字符串作为它的必选参数,它返回一个正则对象
我们的请求路径与该正则匹配,匹配成功就是接上头了。

const pathToRegexp = require('path-to-regexp')
var regexp_1 = pathToRegexp('/foo/:bar')// /^\/foo\/([^\/]+?)(?:\/)?$/i
regexp_1.exec('/foo/barrrr')//匹配成功 =>RegExpExecArray [ '/foo/barrrr', 'barrrr', index: 0, input: '/foo/barrrr' ]
regexp_1.exec('/bazzzz')//匹配失败 => null

/foo/:bar中的/为分隔符,把多个匹配模式分隔开,这里就分成foo:bar。像foo这种不带:前缀的,我们请求的路径需要和它完全匹配,而:bar这种,叫命名参数,就像个函数形参,可以传递任何请求路径字串给它。

在命名参数上,我们可以使用参数修饰符作为其后缀,有?+*

var regexp_2 = pathToRegexp('/foo/:bar*')
regexp_2.exec('/foo/a/b/c')// => [ '/foo/a/b/c', 'a/b/c', index: 0, input: '/foo/a/b/c' ]
regexp_2.exec('/foo')// => [ '/foo', undefined, index: 0, input: '/foo' ]

*表示我这个命名参数:bar可以接收随意个匹配模式,就好像参数数组长度[0,+∞)

var regexp_3 = pathToRegexp('/foo/:bar+')
regexp_3.exec('/foo/a/b/c')// => [ '/foo/a/b/c', 'a/b/c', index: 0, input: '/foo/a/b/c' ]
regexp_3.exec('/foo')//匹配失败 =>  null

+ 表示命名参数可以接收至少一个匹配模式,一个都没就匹配失败,[1,+∞)

var regexp_4 = pathToRegexp('/foo/:bar?')
regexp_4.exec('/foo/a')// => [ '/foo/a', 'a', index: 0, input: '/foo/a' ]
regexp_4.exec('/foo/a/b/c')// => null
regexp_4.exec('/foo')// => [ '/foo', undefined, index: 0, input: '/foo' ]

? 表示命名参数可以接收0个或1个匹配模式,多个失败,[0,1]

我们还可以为命名参数加上自定义的正则匹配模式

var regexp_5 = pathToRegexp('/icon-:foo(\\d+).png')
regexp_5.exec('/icon-123.png')// => [ '/icon-123.png', '123', index: 0, input: '/icon-123.png' ]
regexp_5.exec('/icon-abc.png')// null

以上设置表示:foo只能是数字。

更牛X的是,某些时候不需要命名参数这个占位符,通过正则就能就能匹配。

var regexp_5 = pathToRegexp('/icon-(\\d+).png')
regexp_5.exec('/icon-123.png')// => [ '/icon-123.png', '123', index: 0, input: '/icon-123.png' ]
regexp_5.exec('/icon-abc.png')// null

以上就是这个lib包含的所有匹配形式了。

鸡肋部分

path-to-regexp还包含了没什么用的参数和方法。

构造函数上的可选参数keys

var regexp_6 = pathToRegexp('/:foo/icon-(\\d+).png',keys)
regexp_6.exec('/home/icon-123.png')// => [ '/icon-123.png', '123', index: 0, input: '/icon-123.png' ]
regexp_6.exec('/about/icon-abc.png')// null
console.log(keys) 
/**
keys output =>
[ { name: 'foo',
    prefix: '/',
    delimiter: '/',
    optional: false,
    repeat: false,
    partial: false,
    pattern: '[^\\/]+?' },
  { name: 0,
    prefix: '',
    delimiter: '/',
    optional: false,
    repeat: false,
    partial: false,
    pattern: '\\d+' } ]
*/

keys为一个数组,包含了所有参数的具体信息,看属性名就知道这些信息具体是干嘛的了。
注意: 未命名参数的keys.name0

方法pathToRegexp.parse(path),接收一个路径字符串参数

var tokens = pathToRegexp.parse('/foo/:baz/icon-(\\d+).png')
console.log(tokens)
/**
tokens output =>
[ '/foo',
  { name: 'baz',
    prefix: '/',
    delimiter: '/',
    optional: false,
    repeat: false,
    partial: false,
    pattern: '[^\\/]+?' },
  '/icon-',
  { name: 0,
    prefix: '',
    delimiter: '/',
    optional: false,
    repeat: false,
    partial: false,
    pattern: '\\d+' },
  '.png' ]
*/

该方法返回一个tokens数组,该数组与keys类似,不过它还包含路径中那些非参数部分,如tokens[0]/foo

我们可以不传具体的路径字符串,而使用tokens代替。

var regexp_7 = pathToRegexp.tokensToRegExp(tokens)
regexp_7.exec('/foo/bazzz/icon-123.png')//[ '/foo/bazzz/icon-123.png','bazzz','123',... ]
var toPathWithTokens = pathToRegexp.tokensToFunction(tokens)
toPathWithTokens({baz:'bazzz',0:'123'}) // => /foo/bazzz/icon-123.png

有两个方法:
pathToRegexp.tokensToRegExp(tokens) 返回一个正则对象,效果与调用构造函数一样
pathToRegexp.tokensToFunction(tokens) 返回一个函数,该函数与下面的compile(path)返回的函数功能一样

方法 pathToRegexp.compile(path),同样接收一个路径字符串。

var toPath = pathToRegexp.compile('/foo/:baz/icon-(\\d+).png')
toPath({baz:'bazzz',0:'123'})//=> /foo/bazzz/icon-123.png

该方法返回一个函数,该函数接收一个对象,以对象的形式传值给路径参数,返回请求路径。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值