六角學院

JavaScript、軟體程式設計、前端開發、HTML、網頁設計專業人員

六角學院

關注

六角學院

老闆

2022/11/07

寫爛 Code 是學程式必經之路（上篇）

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

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

阿杜：「靠北只要可以動就好了，管那麼多幹嘛？？」

我：「…..」

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

我：「喔….」

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

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

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

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

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

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

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

💪不要還不會走就想學飛

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

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

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

（文章待續，請接看下篇）