蚊章汇 - SPA
type: channel
link: https://linuxcn.bwsl.wang/tag/SPA/
items: 使用 GNOME Web “安装”独立 Web 应用
items: JavaScript 路由器

使用 GNOME Web “安装”独立 Web 应用
type: item
date: 2018-12-06T22:43:09+08:00
description: 你是否经常使用单页 Web 应用（SPA），但失去了一些完整桌面应用的好处？ GNOME Web 浏览器，简称为 Web（又名 Epiphany）有一个非常棒的功能，它允许你“安装” 一个 Web 应用。安装完成后，Web 应用将显示在应用菜单、GNOME shell 搜索中，并且它在切换窗口时是一个单独的项目。这个简短的教程将引导你完成使用 GNOME Web “安装” Web 应用的步骤。安装 GNOME WebGNOME Web 未包含在默认的 Fedora 安装中。要安装它，请在软件中心搜索 “web”，然后安装。或者，在终端中使用以下命令：sudo dnf install epiphany安装为 Web 应用接下来，启动 GNOME Web，然后去浏览要安装的 Web 应用。使用浏览器连接到应用，然后从菜单中选择“将站点安装为 Web 应用”：GNOME Web 接下来会出现一个用于编辑应用名称的对话框。将其保留为默认值 （URL） 或更改为更具描述性的内容：最后，按下“创建”以 “安装” 你的新 Web 应用。创建 Web 应用后，关闭 GNOME Web。使用新的 Web 应用像使用任何典型的桌面应用一样启动 Web 应用。在 GNOME Shell Overview 中搜索它：此外，Web 应用将在 alt-tab 应用切换器中显示为单独的应用：另一个额外的功能是来自“已安装”的 Web 应用的所有 Web 通知都显示为常规 GNOME 通知。via: https://fedoramagazine.org/standalone-web-applications-gnome-web/作者：Ryan Lerch 选题：lujun9972 译者：geekpi 校对：wxy本文由 LCTT 原创编译，Linux中国 荣誉推出

JavaScript 路由器
type: item
date: 2018-07-07T22:46:17+08:00
description: 构建单页面应用（SPA）有许多的框架/库，但是我希望它们能少一些。我有一个解决方案，我想共享给大家。class Router { constructor() { this.routes = [] } handle(pattern, handler) { this.routes.push({ pattern, handler }) } exec(pathname) { for (const route of this.routes) { if (typeof route.pattern === 'string') { if (route.pattern === pathname) { return route.handler() } } else if (route.pattern instanceof RegExp) { const result = pathname.match(route.pattern) if (result !== null) { const params = result.slice(1).map(decodeURIComponent) return route.handler(...params) } } } } } const router = new Router() router.handle('/', homePage) router.handle(/^\/users\/([^\/]+)$/, userPage) router.handle(/^\//, notFoundPage) function homePage() { return 'home page' } function userPage(username) { return `${username}'s page` } function notFoundPage() { return 'not found page' } console.log(router.exec('/')) // home page console.log(router.exec('/users/john')) // john's page console.log(router.exec('/foo')) // not found page 使用它你可以为一个 URL 模式添加处理程序。这个模式可能是一个简单的字符串或一个正则表达式。使用一个字符串将精确匹配它，但是如果使用一个正则表达式将允许你做一些更复杂的事情，比如，从用户页面上看到的 URL 中获取其中的一部分，或者匹配任何没有找到页面的 URL。我将详细解释这个 exec 方法 … 正如我前面说的，URL 模式既有可能是一个字符串，也有可能是一个正则表达式，因此，我首先来检查它是否是一个字符串。如果模式与给定的路径名相同，它返回运行处理程序。如果是一个正则表达式，我们与给定的路径名进行匹配。如果匹配成功，它将获取的参数传递给处理程序，并返回运行这个处理程序。工作示例那个例子正好记录到了控制台。我们尝试将它整合到一个页面，看看它是什么样的。 Router Demo Home Profile 这是 index.html。对于单页面应用程序来说，你必须在服务器侧做一个特别的工作，因为所有未知的路径都将返回这个 index.html。在开发时，我们使用了一个 npm 工具调用了 serve。这个工具去提供静态内容。使用标志 -s/--single，你可以提供单页面应用程序。使用 Node.js 和安装的 npm（它与 Node 一起安装），运行：npm i -g serve serve -s 那个 HTML 文件将脚本 main.js 加载为一个模块。在我们渲染的相关页面中，它有一个简单的 和一个 元素。在 main.js 文件中：const main = document.querySelector('main') const result = router.exec(location.pathname) main.innerHTML = result 我们调用传递了当前路径名为参数的 router.exec()，然后将 result 设置为 main 元素的 HTML。如果你访问 localhost 并运行它，你将看到它能够正常工作，但不是预期中的来自一个单页面应用程序。当你点击链接时，单页面应用程序将不会被刷新。我们将在每个点击的链接的锚点上附加事件监听器，防止出现缺省行为，并做出正确的渲染。因为一个单页面应用程序是一个动态的东西，你预期要创建的锚点链接是动态的，因此要添加事件监听器，我使用的是一个叫 事件委托 的方法。我给整个文档附加一个点击事件监听器，然后去检查在锚点上（或内部）是否有点击事件。…