构建单页面应用(SPA)有许多的框架/库,但是我希望它们能少一些。我有一个解决方案,我想共享给大家。
-- Nicolás Parada
致谢
编译自 |
https://nicolasparada.netlify.com/posts/js-router/
作者 | Nicolás Parada
译者 | qhwdw 共计翻译:129篇 贡献时间:249 天
构建单页面应用(SPA)有许多的框架/库,但是我希望它们能少一些。我有一个解决方案,我想共享给大家。
使用它你可以为一个 URL 模式添加处理程序。这个模式可能是一个简单的字符串或一个正则表达式。使用一个字符串将精确匹配它,但是如果使用一个正则表达式将允许你做一些更复杂的事情,比如,从用户页面上看到的 URL 中获取其中的一部分,或者匹配任何没有找到页面的 URL。
我将详细解释这个 方法 … 正如我前面说的,URL 模式既有可能是一个字符串,也有可能是一个正则表达式,因此,我首先来检查它是否是一个字符串。如果模式与给定的路径名相同,它返回运行处理程序。如果是一个正则表达式,我们与给定的路径名进行匹配。如果匹配成功,它将获取的参数传递给处理程序,并返回运行这个处理程序。
工作示例
那个例子正好记录到了控制台。我们尝试将它整合到一个页面,看看它是什么样的。
这是 。对于单页面应用程序来说,你必须在服务器侧做一个特别的工作,因为所有未知的路径都将返回这个 。在开发时,我们使用了一个 npm 工具调用了serve
[1]
。这个工具去提供静态内容。使用标志 /,你可以提供单页面应用程序。
使用Node.js
[2]
和安装的 npm(它与 Node 一起安装),运行:
那个 HTML 文件将脚本 加载为一个模块。在我们渲染的相关页面中,它有一个简单的 和一个 元素。
在 文件中:
我们调用传递了当前路径名为参数的 ,然后将 设置为 元素的 HTML。
我们将在每个点击的链接的锚点上附加事件监听器,防止出现缺省行为,并做出正确的渲染。因为一个单页面应用程序是一个动态的东西,你预期要创建的锚点链接是动态的,因此要添加事件监听器,我使用的是一个叫事件委托
[3]
的方法。
我给整个文档附加一个点击事件监听器,然后去检查在锚点上(或内部)是否有点击事件。
在 类中,我有一个注册回调的方法,在我们每次点击一个链接或者一个 事件发生时,这个方法将被运行。每次你使用浏览器的返回或者前进按钮时, 事件将被发送。
为了方便其见,我们给回调传递与 相同的参数。
对于链接的点击事件,除调用了回调之外,我们还使用 去更新 URL。
我们将前面的 元素中的渲染移动到 回调中。
DOM
你传递给路由器的这些处理程序并不需要返回一个字符串。如果你需要更多的东西,你可以返回实际的 DOM。如:
现在,在 回调中,你可以去检查 是一个 还是一个 。
这些就是基本的功能。我希望将它共享出来,因为我将在下篇文章中使用到这个路由器。
我已经以一个npm 包
[4]
的形式将它发布了。
via:https://nicolasparada.netlify.com/posts/js-router/
作者:Nicolás Parada
[6]
选题:lujun9972译者:qhwdw校对:wxy
本文由LCTT原创编译,Linux中国荣誉推出
领取专属 10元无门槛券
私享最新 技术干货