npm 包 destinations-matching 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

destinations-matching是一个npm包，可以将一个url与多个目标url进行匹配，并且可以在匹配过程中提供一些自定义的策略。在前端开发中，经常会遇到类似的需求，例如路由匹配、页面跳转等场景，使用destinations-matching可以更加方便地实现这些功能。

安装

在使用destinations-matching之前，首先需要在项目中安装该npm包，可以使用以下命令进行安装：

npm install destinations-matching

使用

基本用法

在安装完成之后，我们可以在代码中引入destinations-matching，例如：

import createMatcher from 'destinations-matching';

接下来，我们创建一个matcher对象，并且添加一些目标url，例如：

const matcher = createMatcher();
matcher.add('/home');
matcher.add('/about');
matcher.add('/user/:id');

此时，matcher已经有了三个目标url，分别是‘/home’、‘/about’和‘/user/:id’。我们可以使用matcher对象的match方法进行匹配，例如：

const result = matcher.match('/user/123');
console.log(result);

在上面的代码中，我们将‘/user/123’传入match方法中，方法会返回一个结果对象，其中包含了与该url匹配的目标url信息。输出的结果如下所示：

{ 
  route: '/user/:id',
  params: { id: '123' },
  query: {}
}

在输出结果中，’route’属性表示匹配的目标url，params属性表示匹配到的路由参数，query属性表示url中的query信息。

自定义匹配策略

除了上面的基本用法之外，destinations-matching还支持一些自定义的匹配策略。例如，我们可以自定义一个策略来匹配以下两个url：‘/items/:id’和‘/products/:id’，并且要求在匹配到目标url时，参数值为数字。

-- -------------------- ---- -------
----- ------- - ---------------
  --------------- -
    -
      ----- ------------------------------
      ----- -------- ------
      --------- -- -- -- -- -------------------
      --------- -- ----- -- -- -- ----- - --- - ---
    -
  -
---

--------------------------
-----------------------------

上面的代码中，我们首先在创建matcher对象时传入一个自定义的匹配策略。自定义匹配策略可以是一个数组，每个元素是一个对象，表示一个自定义规则。这个规则包含了三个属性：test、keys和validate（generate属性用于生成目标url，我们这里不进行讲解）。

在上面的规则中，我们使用test属性对url进行了正则匹配，如果url符合正则表达式，则表示匹配成功，并且在目标url匹配时，会将url中的参数与keys数组一一对应，即‘/item/123’的params属性为{type: ‘items’, id: ‘123’}。validate属性表示在匹配后，需要校验给定的匹配参数是否合法。

结论

destinations-matching是一个非常有用的npm包，可以方便地匹配url并进行参数提取。使用它可以大大简化前端开发中的一些任务，例如路由匹配、页面跳转等。上面的教程只是介绍了destinations-matching的一部分功能，如果想要进行更加深入的学习，可以参考官方文档。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600568e281e8991b448e49fb

npm 包 destinations-matching 使用教程

简介

安装

使用

基本用法

自定义匹配策略

更多功能

结论

纠错反馈