學習程式設計有些日子了，照著樣例寫一些花瓶demo著實無聊，最想做的就是用程式碼實現實際中的需求，讓程式碼真正有價值。

千山導航

千山導航是一個簡潔優雅的導航站，我一直將其設為我的瀏覽器首頁。千山導航有預設的網站分類，也可以自定義設定，不過清除瀏覽器資料時，會一併刪除。第一次遇見千山時，滿心歡喜地配置好了，結果在一次清理之後，一切都回到了預設配置，後來，我就再也沒有自定義過了。這時候，我有了想法，想為千山導航做點什麼。千山助手是一個使用者指令碼，依託於拓展Greasemonkey或者Tampermonkey，它為千山導航補充了幾個實用功能。千山導航站點在實現中使用了Bootstrap和jQuery，所以這個指令碼也相應使用了這兩種技術。

阻止事件傳播

千山導航有一個快捷鍵功能，按下快捷鍵開啟相應的網站，不過在Firefox中並沒有用，這應該是網站的遺留bug。此指令碼往千山導航加上一個搜尋框，但當搜尋框輸入時也會觸發快捷鍵。一開始，我以為這會是指令碼開發過程中最大的挑戰，後來，一個阻止keydown事件傳播的簡單操作就完美解決搜尋框和千山導航的相容問題。

實現檔案下載

匯出備份需要將配置檔案下載至本地，解決方案是利用<a>標籤，先將配置字串通過Blob物件轉換成二進位制資料，後使用URL.createObjectURL()方法將其作為標籤<a>的href屬性，使用download屬性設定檔名，實現檔案下載。

實現檔案選擇框

匯入備份的時候，需要一個檔案選擇框，瀏覽本地檔案進行選擇，最直接的做法是使用type="file"，但是樣式和千山導航的畫風格格不入。一個優雅的解決方案是將type="file"框隱藏，在檔案選擇框所在位置使用一個普通的type="text"文字輸入框冒充，同時繫結事件，當文字輸入框被點選時觸發隱藏的type="file"框的點選事件。如此這般偷樑換柱，既實現了功能，又美觀了樣式。

讀取本地檔案

讀取選中的本地檔案時，我使用了FileReader物件。FileReader物件讀取檔案的方式是非同步的，一開始，處理本地檔案的函式都是返回空字串，這是由於程式碼執行至return語句時，讀取檔案的非同步操作還沒有完成。後來，使用Promise

Bootstrap版本差異

我是在本地除錯程式碼的，一點一點修改樣式，當一個個功能實現了之後，最後一步，我將千山助手的程式碼插入至千山導航。執行後發現，一些除錯好的樣式亂了。這時才發現，千山導航使用的是Bootstrap3，而指令碼用的是Bootstrap4，沒有辦法，樣式錯亂的部分都得改寫。

一點一點，最終還是實現了這個指令碼，第一次實現具體功能，還是很開心的。想一睹芳容的話，悄悄地戳這。其實，幾個月前，我用JS實現過插入一個搜尋框的功能，樣式很醜，並且只能在Firefox中使用，這段時間學習了jQuery和Bootstrap，就拿起這個專案練手了。

參考資料