列表2.14 添加事件监听器以启用submit按钮
newLinkUrl.addEventListener('keyup', () => { newLinkSubmit.disabled = !newLinkUrl.validity.valid; <------+ }); 当用户在输入字段中敲入url时 | 通过使用Chromium ValidityState API | 来确定输入是不是有效,如果是这样，从 + submit按钮中移除disable属性
现在也是添加一个协助函数来清除URL字段内容的好时机。在理想的情况下，只要成功存储了链接，就会调用这个函数。
列表2.15 添加帮助函数来清除输入框: ./app/renderer.js
+ const clearForm= () => { |通过设置新连接输入框为空 newLinkUrl.value = null; <----+来清除该字段 }; | +
当用户提交一个链接,我们希望浏览器请求URL,然后把获取回复体,解析它,找到title元素,得到标题的文本元素,存储书签的标题和URL在localStorage,和then-finally-update书签的页面。
在Electron实现跨域请求
你可能感觉到，也可能没有感觉到，你脖子后面的一些毛发开始竖起来。你甚至可能对自己说:“这个计划不可能行得通。您不能向第三方服务器发出请求。浏览器不允许这样做。”
通常来说，你是对的。在传统的基于浏览器的应用程序中，不允许客户端代码向其他服务器发出请求。通常，客户端代码向服务器发出请求，然后将请求代理给第三方服务器。当它返回时，它将响应代理回客户机。我们在第一章中讨论了这背后的一些原因。
Electron具有Node服务器的所有功能，以及浏览器的所有功能。这意味着我们可以自由地发出跨源请求，而不需要服务器。
在Electron中编写应用程序的另一个好处是我们可以使用正在兴起的Fetch API来向远程服务器发出请求。Fetch API免去了手工设置XMLHttpRequest的麻烦，并为处理我们的请求提供了一个良好的、基于承诺的接口。在撰写本文时，主要浏览器对Fetch的支持有限。也就是说，它在当前版本的Chromium中有完整的支持，这意味着我们可以使用它。
我们向表单添加一个事件侦听器，以便在表单有动作时，立即执行提交。我们没有服务器，所以需要确保避免发出请求的默认操作。我们通过防止默认操作来做到这一点。我们还缓存URL输入字段的值，以便将来使用。
列表2.16 向submit按钮添加事件侦听器: ./app/renderer.js
newLinkForm.addEventListener('submit', (event) => { event.preventDefault(); <-----+告诉Chromium不要触发HTTP请求, |这是表单提交的默认操作 const url = newLinkUrl.value; <--+ | | + // More code to come... |获取新链接输入框中的URL字段， }); +我们很块就会用到这个值。
Fetch API作为全局可用的fetch变量。抓取的URL返回一个promise对象，该对象将在浏览器完成时被实现 获取远程资源。使用这个promise对象，我们可以根据是否获取网页、图像或其他类型的内容来处理不同的响应。在本例中，我们正在获取一个网页，因此我们将响应转换为文本。我们从事件监听器中的以下代码开始。
列表2.17 使用Fetch API请求远程资源./app/renderer.js
fetch(url) //使用Fetch API获取提供的URL的内容 .then(response => response.text()); //将响应解析为纯文本
Promises是链式的，我们可以使用先前承诺的返回值，并将另一个调用附加到then。此外，response.text()本身返回一个promise。我们的下一步将是获取接收到的大块标记，并解析它来遍历它并找到title元素。
解析回复报文Chromium提供了一个解析器，它将为我们做这件事，但是我们需要实例化它。在app/renderer的顶部。我们创建了一个DOMParser实例，并将其存储起来供以后使用。
列表2.18 实例化一个DOMParser: ./app/renderer.js
const parser = new DOMParser(); //创建一个DOMParser实例。我们将在获取所提供URL的文本内容后使用此方法。
让我们设置一对帮助函数来解析响应并为我们找到标题。