构建原生JavaScript路由的方法

前端小工
82 阅读2分钟

我们可以在JavaScript中更新URL。我们已经有了这些API。

// Adds to browser history
history.pushState({}, "About Page", "/about");

// Doesn't
history.replaceState({}, "About Page", "/about");

JavaScript还能够替换DOM中的任何内容。

// Hardcore
document.body.innerHTML = `
  <div>New body who dis.</div>
`;

因此，结合这些力量，我们可以建立一个网站，我们可以导航到不同的 "页面"，但浏览器永远不会刷新。这就是 "单页应用程序"（SPA）的字面意思。

但路由可能会变得有点复杂。在这些有点低级的API之外，我们真的要靠自己来实现它。我最熟悉的是达到像React Router这样的东西，它允许在JSX中表达路由。像这样的东西。

<Router>
  <Switch>
    <Route path="/about">
      <About />
    </Route>
    <Route path="/users">
      <Users />
    </Route>
    <Route path="/user/:id">
      <User id={id} />
    </Route>
    <Route path="/">
      <Home />
    </Route>
  </Switch>
</Router>

文档中对这一点的描述是这样的。

一个<Switch> ，通过它的子女<Route> ，并渲染第一个与当前URL匹配的。

因此，它有点像带有API特性的RegEx匹配器，比如用类似:id 的东西做一个 "标记 "的能力，作为一个通配符，你可以传递给组件在查询中使用，等等。

这就是工作!因此，我们有库来帮助我们的原因。但是，看起来网络平台正在做它最擅长的事情，并在它能做的地方介入帮助。在谷歌webdev博客上，对这一点的解释大致相同。

路由是每个网络应用的一个关键部分。就其核心而言，路由涉及获取一个URL，对其应用一些模式匹配或其他特定的应用逻辑，然后，通常，根据结果显示网页内容。路由可能以多种方式实现：它有时是运行在服务器上的代码，将路径映射到磁盘上的文件，或者是单页应用中的逻辑，等待当前位置的变化并创建相应的DOM片段来显示。

虽然没有一个明确的标准，但网络开发者已经倾向于使用一种表达URL路由模式的通用语法，它与正则表达式有很多共同之处，但也有一些特定领域的补充，如匹配路径段的标记。

Jeff Posnick，"URLPattern把路由带到网络平台上"

新技术!

const p = new URLPattern({
  pathname: '/foo/:image.jpg',
  baseURL: 'https://example.com',
});

我们可以设置一个这样的模式，然后通过向它发送一个URL（可能是当前导航到的那个）来针对它运行测试。

let result = p.test('https://example.com/foo/cat.jpg');
// true

result = p.exec('https://imagecdn1.example.com/foo/cat.jpg');
// result.hostname.groups.subdomain will be 'imagecdn1'
// result.pathname.groups[0] will be 'foo', corresponding to *
// result.pathname.groups.image will be 'cat'

我认为这一切的重点也许是能够在SPA中建立路由，而不需要去找库，从而使网站更轻/更快。或者说，帮助我们进行路由选择的库可以利用它，使库更小，最终使网站更轻更快。

avatar
文章
阅读
粉丝