《Electron实战》中文版内容节选，私聊得电子书样本。

2.4. UI实现

我们首先修改一下index.html文件，为UI添加一些必要的标签。

代码清单2.12 为应用程序UI添加标签：./app/index.html

Bookmarker

我们有一个添加新链接的section，一个用于显示所有链接的section，以及一个用于清除所有链接的按钮。应用程序的

内容已经准备好了，现在将注意力转向功能。让我们清除app/renderer.js的所有内容，重新开始。在此过程中，我们需要处理添加的标记元素，因此让我们首先通过选择器查询到这些元素，将他们缓存到变量中。将以下代码添加到app/renderer.js文件。

代码清单2.13 缓存DOM元素选择器：./app/renderer.js

const linksSection = document.querySelector('.links');const errorMessage = document.querySelector('.error-message');const newLinkForm = document.querySelector('.new-link-form');const newLinkUrl = document.querySelector('.new-link-url');const newLinkSubmit = document.querySelector('.new-link-submit');const clearStorageButton= document.querySelector('.clear-storage');

如果你回顾一下代码清单2.12，你会注意到我们将标记中的input元素的type属性设置为了“url”。如果它的内容不是有效的URL，Chromium会将该元素标记为无效。我们可以给元素添加有效和无效状态的样式，甚至可以通过JavaScript来检测它的状态。不幸的是，我们无法访问Chrome或Firefox内置的错误消息弹出窗，这些弹出窗不属于Chromium Content Module，因此也不是Electron的一部分。此时，我们在默认情况下禁用提交按钮，然后用户每次输入URL时，再检查其内容是否是有效的URL。

只有当用户输入了有效的URL，我们才启用提交按钮，允许他们提交URL。向app/renderer.js文件添加以下代码。

代码清单2.14 添加一个事件监听来启用提交按钮：./app/renderer.js

newLinkUrl.addEventListener('keyup', () => {    newLinkSubmit.disabled = !newLinkUrl.validity.valid;});

趁现在还可以添加一个小辅助函数，用来清除URL输入框内容。正常情况下，只要成功存储了链接，就该调用它。

代码清单2.15 添加一个帮助函数来清理输入框：./app/renderer.js

const clearForm= () => {    newLinkUrl.value = null;};

当用户提交链接时，我们希望浏览器能向该URL发送一个请求，获取响应内容后，进行解析，查找title元素并获取标题文本，然后将书签的标题和URL存储到localStorage，最后更新书签页面。

《Electron实战》中文版！

《Electron实战》中文版：Electron实现UI界面

2.4. UI实现

Bookmarker