《Electron實戰》中文版內容節選，私聊得電子書樣本。
2.4. UI實現
我們首先修改一下index.html文件，為UI添加一些必要的標籤。
代碼清單2.12 為應用程序UI添加標籤：./app/index.html
<code>Bookmarker
/
<button>Clear Storage/<button>
//<code>
我們有一個添加新鏈接的section，一個用於顯示所有鏈接的section，以及一個用於清除所有鏈接的按鈕。應用程序的
內容已經準備好了，現在將注意力轉向功能。讓我們清除app/renderer.js的所有內容，重新開始。在此過程中，我們需要處理添加的標記元素，因此讓我們首先通過選擇器查詢到這些元素，將他們緩存到變量中。將以下代碼添加到app/renderer.js文件。
代碼清單2.13 緩存DOM元素選擇器：./app/renderer.js
<code>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');/<code>如果你回顧一下代碼清單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
<code>newLinkUrl.addEventListener('keyup', () => {
newLinkSubmit.disabled = !newLinkUrl.validity.valid;
});/<code>趁現在還可以添加一個小輔助函數，用來清除URL輸入框內容。正常情況下，只要成功存儲了鏈接，就該調用它。
代碼清單2.15 添加一個幫助函數來清理輸入框：./app/renderer.js
<code>const clearForm= () => {
newLinkUrl.value = null;
};/<code>當用戶提交鏈接時，我們希望瀏覽器能向該URL發送一個請求，獲取響應內容後，進行解析，查找title元素並獲取標題文本，然後將書籤的標題和URL存儲到localStorage，最後更新書籤頁面。
《Electron實戰》中文版！
閱讀更多 吳大用 的文章
