November 16, 2019

工程師看待 bug 的方式大不同

好的工程師與中庸工程師差異


文 / 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 去做語系切換,並傳入變數時才導致這個錯誤。幸好資深要我多想一點、理解原由,這才真正的解決問題。

醒悟


下班時,我回頭想了想這件事,發現在面對複合問題時,我常只做到解決問題,卻沒有確實做到理解問題。

這個不知不覺養成的習慣,確實在影響我進步,幸好資深讓我看到這一點,非常謝謝他。




閱讀量




技術文章與合作


寫這些技術分享文,筆者是沒有額外收入的,但每年還是要付域名費用,如果你喜歡我的文章,歡迎 自由贊助 唷!也期待收到你的 回饋

有網站設計(UI/UX)、平面設計、網站工程外包需求,皆可以來信詢問,在 關於下方 有參考作品。

想定期收到技術文章,或想一起探討前後端程式的朋友,建議加入 line 群組,或是官方帳號,大家可以互相交流,一起學程式,歡迎加入:

Email: aaa24295234@gmail.com

Line 群組:入群組表單邀請

群組為了防止假帳號,不開放用 QR Code 掃描入群,如有需要,可以填寫表單,註記 line ID 告訴我,謝謝。

Line 官方帳號:@184railx

Line 官方帳號 QR Code: