《Electron實戰》中文版內容節選，私聊得電子書樣本。
2.4. UI實現
我們首先修改一下index.html檔案，為UI新增一些必要的標籤。
程式碼清單2.12 為應用程式UI新增標籤：./app/index.html
<h1>Bookmarker</h1><div class="error-message"></div><section class="add-new-link"> <form class="new-link-form"> <input type="url" class="new-link-url" placeholder="URL"size="100" required> <input type="submit" class="new-link-submit" value="Submit" disabled> </form></section><section class="links"></section><section class="controls"> <button class="clear-storage">Clear Storage</button></section>我們有一個新增新連結的section，一個用於顯示所有連結的section，以及一個用於清除所有連結的按鈕。應用程式的<script>標籤內容應該與本章前面留下的一樣，以防萬一，這裡也提供一下：
<script> require('./renderer');</script>內容已經準備好了，現在將注意力轉向功能。讓我們清除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。
newLinkUrl.addEventListener('keyup', () => { newLinkSubmit.disabled = !newLinkUrl.validity.valid;});趁現在還可以新增一個小輔助函式，用來清除URL輸入框內容。正常情況下，只要成功儲存了連結，就該呼叫它。
程式碼清單2.15 新增一個幫助函式來清理輸入框：./app/renderer.js
const clearForm= () => { newLinkUrl.value = null;};當用戶提交連結時，我們希望瀏覽器能向該URL傳送一個請求，獲取響應內容後，進行解析，查詢title元素並獲取標題文字，然後將書籤的標題和URL儲存到localStorage，最後更新書籤頁面。
《Electron實戰》中文版！