寫爛 Code 是學程式必經之路

洧杰 已發佈 2019-10-16

在我進公司寫程式的時候,前幾年都覺得自己在產出一堆噁爛的 Code,業界還有一個術語叫做「義大利麵的程式碼」,意思就是你寫的 Code 就像是麵條雜亂交錯,完全無法看出你的程式脈絡。

尤其是網站要準備上線時我就會特別緊張,都會想拉同事幫忙看一下能不能這樣寫。

阿杜:「靠北只要可以動就好了,管那麼多幹嘛??」
我:「.....」

設計師同事:「嗯..你網頁跟我設計稿很一致啊,應該沒有什麼問題吧?」
我:「喔....」

於是乎網站上線三個月後相安無事還譏笑我顧慮太多!!!

可惡你們都不懂我內心的糾結,我裡面下的 CSS 程式碼都從網路上複製亂貼亂測試,網路上說這樣就能兼容 IE6、7、8 我就傻呼呼的貼上去也沒問題?那時候流行 table 排版,裡面的結構 table 包 table 包 table 巢狀到不行你們也覺得沒關係?我 jQuery 效果亂貼跑馬燈就出來,問我怎麼寫?我只會跟妳說就這六行 jQuery code 跟一個 CSS 載入就會動,你說原理哦?不好意思他 CSS 寫得很外星語言我完全看不懂欸。

以致於剛進公司前幾年的上線網站都不敢跟人說那些是我做的,深怕別人會打開原始碼,然後恥笑我的 Code,恥笑公司怎麼會請到這麼巢的人來做網頁排版。

相信各位在開始學寫程式的時候,也一定會有我以上的心路歷程,那麼到底該如何調整心態度過這段時期呢?就讓我娓娓道來吧。

自己要先寫出爛 Code 才知道要怎麼改進

寫程式同時也是培養邏輯的過程,以網頁排版來說你學了 HTML、CSS ,可能在網頁排版邏輯並沒有融會貫通,自己實作出個網站。JavaScript 學了一些流程控制、變數函數,自己硬幹出一個超陽春版的 [todolist](https://codepen.io/tag/to do list/) 代辦清單,雖然當下你都會覺得自己做得東西超爛,但你確實靠自己的想法做出一個「可以正常運作的東西」,更重要的是當東西做出來,才有辦法去優化,思考下一步要如何擴充功能,或做完後去搜尋其它人是怎麼寫的並加以練習。

所以我都會跟初學者說,你們就放心寫爛 Code 吧!一位成功的資深工程師的背後都有著一堆爛 Code,再從中去思考如何讓自己更好,沒有人天生就是天才,信手拈來就寫出一行行好 Code,所以拋棄你的羞恥心,初期先以「先求有再求好」的心態來學習程式吧!

不要還不會走就想學飛

比較常見的例子就是 HTML、CSS 還沒實際做出一個版型就想直接用 Bootstrap,或是 JavaScript 才剛會 變數、if、for 等基本語法,就想直接學 SPA 框架 ( Vue、React、Angular )。

以前我也會這樣,當社群上有人分享他開發的習慣與設計模式後,我就依樣畫葫蘆去模仿,然後還洋洋得意地以為自己功力大幅提昇。但實際用幾天後才發現,裡面有太多抽象的設計模式需要理解,或是你的專案根本不需要用到如此複雜的開發架構,導致自己痛不欲生。

所以會建議不要好高騖遠,好好地打穩基礎功才是王道,所以每當有人問我前端趨勢是哪些時,介紹完後我都還是會耳提面命地說,先把基礎功學好吧。要用 CSS 框架,至少底層的 CSS3 media queries 瞭解響應式原理,你才知道當版型有超出預期的調整時,自己也能寫 CSS 去客製,想學 JS SPA 框架,至少先把 AJAX 原理搞熟、知道網址 Router 邏輯、JS 執行生命週期再去碰才不會覺得各種觀念卡卡。

透過專案時程壓力來練功

當我培育線上學生投入到一個我認可的階段時,我都會建議他們盡快去就職將能力培養起來。

有時候透過自學你所能涉獵的範圍有限,例如一個專案從開始到結束的過程、跨部門溝通,更重要的是程式碼也會比較全面,在公司你要做的東西絕大部分都在做別人的產品服務,在功能邏輯也會比較複雜,吸收得東西也會比較多。

那在公司執行專案確保東西能如期交付,通常都會去壓時程,例如設計師要花二天設計與跟客戶確認,網頁切版 N 天,後端套程式 N 天。在時間有限的情況下,才能督促自己提升程式開發能力。

常常會有學生問說:「老師我想用 XX 框架,你覺得我可以在下個專案上用用看嗎?」

我都會建議說想試試看都 ok,但不要一口氣在一個專案用太多新技術,以免變數太多,像我在開發新專案時,至少七成是我有把握的東西,其中三成就會是最近我吸收的新技巧,想透過專案來使用他們提升我的程式功力。在時間壓力之下,學習效果自然會被逼得更好。

當然,你要全盤投入新技術在專案上也不是不行,個人覺得在開發程式時,也是在培養一種「我就是有辦法將這個系統依照我的技術觀打造起來」的自信,在決定導入前,先把一些重要的邏輯設計先設計出一個雛形 MVP,確認 ok 就放手去幹吧。

那時程被拖延到怎麼辦呢?當然是自己加班補起來啊,如果是你自己壓得時程但自己錯估時程,本來原本技術就可以做好的事情,因為你投入新技術導致時程延宕,那就是你自己的責任。但這也能讓你培養起「瞭解自己的學習投入狀況,並評估工作時程的能力」,這樣一來在專案跑個好幾輪樣流程後,功力絕對大增。

適時重構,重新檢視自身不足

在公司一定會遇到時間很趕,但又必須有產出的時候。以我來說,正常開發時程我就會用我自己擅長且又正規的寫法來寫,都會考慮到程式品質與未來靈活彈性的狀況。但當時間少時,你自然會以所有功能都先有,連命名都超懶、完全不管任何品質,反正可以跑就好。雖然在時間允許之下你還是會瞬間寫出正規的 Code,但絕大部分都還是相當的骯髒。

在這過程中也是對自己能力不足的照妖鏡,你可以發現自己在哪些細節上還有待加強的空間。例如對物件導向不熟悉、或是 CSS 模組設計上的脈絡,表示你對那些東西沒有真正內化到自己的心裡。

所以在公司沒有很忙得時候,我還是會自主研究自己已經上線的爛 Code,去思考我哪裡還有進步的空間。唯有自主發現自身不足之處,才有辦法讓自己更好。

關於筆者

暱稱:洧杰

介紹:六角學院校長,熱愛分享與交流的前端工程師,目前專注於兼容桌面/移動網頁前端開發,期間已協助數百位平面設計師,網頁設計師導入標準網頁設計。