雖然已經用Vue寫過一些小專案，但我知道自己原生JS的知識其實並不算足夠，因此趁著著手六角Vue最終作業前的一小段時間，開始上之前買的課程JavaScript Bootcamp，這堂課的後半段都是實作項目，其中有一項是製作一個簡單的計時器。原理並不複雜，在不斷驗證和調整的過程中，我想到一個詞－happy path。
起因
課程中的原始碼可以看這裡 => codepen
我個人的原始碼可以看這裡 => github
課程中的成品功能非常單純：使用者可以點擊中間的輸入框，輸入要設定的時間，按下開始鍵開始計時，按下暫停鍵暫停。
不過有以下幾個問題：
- 計時到一半按下暫停時，外圍的邊框就會重新來過，而不是從停下的地方開始。
- 沒有reset功能。
- 只能計算秒數。
本來想說只是個小作品就不管那麼多了，但想一想這些問題不解決心裡會很煩，就手賤的打開了VSCODE…..被迫捲入精神時光屋….
什麼是Happy path (滿意路徑)？
根據維基，所謂的滿意路徑就是你在設計一個功能時預設使用者會使用的方式，而不考慮任何極端或錯誤的狀況。以這個計時器來說，happy path可以是：
使用者會輸入數字 => 這些數字就會成為秒數／分鐘 => 使用者按下開始，計時器開始倒數 => 計時器在倒數時邊框會隨著遞減 => 邊框跟著時間一起歸零。
而既然有happy path，相反的就有unhappy path。
unhappy path (不滿意路徑)
一個計時器能夠有什麼好unhappy的？
以原版計時器來說，unhappy path可以有以下幾個：
- 使用者輸入非數字（文字／符號） => 計時器產生NaN
- 使用者輸入小數點 => 在運作上沒什麼問題，可是這好像太過極端
- 使用者在按下開始後，又誤按下開始 => 計時器的倒數莫名的加速
- 使用者在倒數開始後，沒有按下暫停就又直接編輯輸入框
解決
結合一開始提到的缺點，並考慮到不滿意路徑，我作了一些修正。
- 限制使用者輸入
這是一個很直觀的解法，就是從一開始就解決使用者可能亂輸入的問題。為了解決可能的NaN問題，我使用正則表達式禁止使用者輸入數字以外的字元（包括小數點），另外，由於我的版本新增分鐘，因此也在JS中限定輸入的邊界：若使用者輸入超過60秒，會自動轉為60秒。另外，若使用者沒有輸入值，或是輸入負數，會自動轉為0，避免任何不想要的值。
其實我一開始有考慮改用select，像ios的計時器一樣，但我總覺得直接輸入有一種說不出來的魅力……？
- 開始計時後，封鎖一些按鈕
計時開始後，我將開始鈕、重設鈕、時間輸入框這些我不希望使用者亂碰的區域都設為disabled，以避免任何因前述原因導致的錯誤。主動限定使用者在計時開始後只能按下暫停。
- 新增變數以及輸入框監測
在原版中只使用了一個變數來儲存時間，導致了計時器倒數中若按下暫停，再按下開始時邊框的錯誤。這個問題困擾我最久，最後的解法是：我使用兩個變數，一個儲存設定的時間，一個儲存剩下的時間。另外，不管有沒有按下重設，使用者編輯輸入框時，設定的時間都會重新計算。主要的目標就是：讓整個流程變得更嚴謹。
感想
我認為，嚴謹的定義每個流程，是解決不滿意路徑時的中心思想，在什麼時機，使用者要做什麼，這個「什麼」是否有一個清楚的答案？有了答案，才會知道錯誤是什麼。不過，在開始動手的時候我肯定是沒有想到這麼多的，最開始時我也只是想新增一些功能而已，這些都是不斷驗證不斷校正得出的理論。
我滿喜歡這堂課的，接下來還有很多實作項目，超級期待！