文 / 西打藍 Siddharam
前言
公司在軟體開發上，都會由資深工程師（簡稱資深）幫忙 code review，從最近一次的 code review 中，我領悟到一位好的工程師在開發時，對待 bug 應有的心態是什麼，下面會舉真實的例子作為分享。
veeValidate & vue i18n
週四下午，我提交了這周要完成的工作。資深看完後，提出要修改的部分：
「這部分元件重複用那麼多次，是可以抽出來共用的。」資深對我說。
「既然密碼的長度、數字驗證都用 veeValidate 來做提示了，二次驗證密碼的部分，應該也用 veeValidate 做驗證就好，而不是用 element 的 message。」資深。此外，還有一些待修改的小 bug。
程式開發就是這樣，功能沒問題，但寫法不好就是得改。這說明了程式界的一句名言：
「Any fool can write code that a computer can understand. Good programmers write code that humans can understand.」
因此，把 code 寫得別人看得懂，好維護是重要的事。
週五一早，我興致勃勃地修改昨天的 bug。
「真奇怪，雖然執行沒有問題，為什麼 console 會報錯呢？查一下 stackoverflow 好了...，OK 沒報錯了，呼！終於搞定，就這樣推上去吧！」我內心 murmur。
過了一陣子，資深看了我新推上去的 code 後問我：
「問一下，為什麼這裡加了段 pause 跟 reset？」
「因為如果沒有加的話，veeValidate 會報錯啊！實在不知道什麼原因，我的寫法和你某個驗證的寫法，基本上是一樣的說...」我回答。
兩個人開始查找原因，最後我一層層排除可能性後，發現在我在觸發其中一個 function 時，同時關閉 input block 子組件和清空裡頭的值（密碼填到一半關閉或填完關閉，都要清除 input 中的資料），就會報錯。但如果單獨做一件事情，就沒事。
我把觀察到的這個「現象」告訴資深，原本以為拆成兩個 function 應該就結束了吧，但資深要我搞清楚「為什麼發生」。
於是我看了一下組件中的行為，又多做一些嘗試後發現：原來在子組件關閉後，進行資料清洗時，會觸發 veeValidate 的驗證，但由於 callback 的關係，它會往下先關閉子組件後再做驗證，但在要驗證時，卻發現子組件已經消失了，所以才會報錯。
我把推論後的想法告訴資深後，他建議我使用 vue 的 nextTick，在關閉子組件後，也同時取消驗證機制，再把父組件的資料清空，就不會觸發到 veeValidate 了。
至此我才恍然大悟，原本一直以為是做密碼驗證的同時，也使用 vue i18n 去做語系切換，並傳入變數時才導致這個錯誤。幸好資深要我多想一點、理解原由，這才真正的解決問題。
醒悟
下班時，我回頭想了想這件事，發現在面對複合問題時，我常只做到解決問題，卻沒有確實做到理解問題。
這個不知不覺養成的習慣，確實在影響我進步，幸好資深讓我看到這一點，非常謝謝他。
閱讀量次
聯絡與合作
有文字採訪、網站開發，或是諮詢需求，皆可至個人網站參考作品，並聯繫 IG。
或是想分享心情、聊聊天、交朋友，可以來秘密通道找我唷。
Email: frank@siddharam.com
訂閱：