這一年來我所看見的技術債
到職到現在也快一年，一位前輩說過大約一年就可以看清楚一間公司的全貌，趁著放假的時間好好的整理一下一年間所看到的東西，這並不是抱怨文或什麼，只是想紀錄也以此為借鏡避免自己犯下同樣的錯誤。有一位前輩說過到哪邊都有技術債只是看你能不能接受，一個大型的專案有技術債也是很正常的事情時間上的壓力、上頭主管的決策、技術力上的不足都是導致技術債的原因，還債的也不一定是你，搞不好是後續接手專案的人。
歷史悠久的專案
我參與的專案算是很大型的電商平台系統，看程式碼上的註解時間沒 10 年有也有 5 年。既然這麼久的專案一定埋藏著許多技術債，經常你解決一個問題會延伸出兩個以上的問題。
沒有技術文件
恩對，整個專案都沒有技術文件，功能壞了要問誰？沒人知道他是幹嘛的這些事情很常發生，畢竟沒有技術文件留下來，全都是口頭的傳承或是當事人明瞭，隨著人員流動知識也消失了。
義大利麵程式碼
這個專案是：後端 Java 搭配 Oracle 資料庫、前端模板則是 jsp 可能當時這樣算是標配吧？ 一個 jsp 檔案內有許多程式碼存在
<head>
<style>
// css cdoe
</style>
<script>
// js code
</script>
</head>
<body>
<div style="text-align: center;" onclick="myFunction()"><%= // java code %></div>
</body>
幾乎在我們接手這個專案前每一個檔案都是這樣，這樣維護起來真的是非常痛苦一個檔案都千行起跳。
能跑就好
這個就有趣了，如何判斷程式碼的好壞？就是你看了之後罵髒話的次數 不看不知道看了嚇一跳，每開一個檔案真的是跟健達出奇蛋一樣驚奇。
- 使用不嚴謹的判斷
if(a==b) - 判斷使用者是否登入
if(userID < 0) - 三層以上的條件判斷
if(a){
// code...
if(b){
// code...
if(c){
// code...
}
}
}
- 複製貼上的程式碼
- 無意義的操作
var $value = $('#el').val()
$('#el').val('')
$('#el').val($value)
無意義的註解或 log
好的註解可以更加幫助開發者快速了解程式碼，不過有很多都是以下情境
// xxx modify 2014-09-26 start
var a = ''
// xxx modify end
if(a==0){ // 如果 a 為 0
}
// function 37
function fn_37(){}
// 20161111 活動
// code
// code
// code
console.log('如果你看見這個代表功能壞了，請 XXX 修正')
不按照目錄結構
整個專案其實是有使用 gulp 來編譯前端檔案資料夾配置大約如下
|-- src
|-- sass
|-- app
|-- html
|-- images
|-- dest
|-- css
|-- js
|-- html
|-- images
|-- static
|-- css
|-- js
|-- html
|-- images
全部的前端靜態檔案都是讀取 static 資料夾內的檔案 gulp 會有一個 build 指令將檔案編譯至 static 資料夾，可是有許多的程式碼並沒有在 src 資料夾內，而是直接丟在 static 資料夾內，又或是後端工程師不會寫 sass 直接去 static 撰寫 css，使用別人的套件也是直接丟進 static 資料夾內，整個檔案樹就會變成下面這樣。
|-- static
|-- js
|-- product
|-- a.js
|-- a.min.js
|-- search
|-- b.js
|-- b.min.js
|-- vendor
|-- infinite-scroll.pkgd.min.js
|-- css
|-- product1.css
|-- product2.css
整個 static 資料夾內會有 編譯前、編譯後、別人開源的程式碼、不存在於 src 的程式碼
檔案內程式碼互相引用
應該是說檔案之間的耦合非常的高，兩個檔案會互相引用檔案內的 function，然後你也不知道該不該拔或是更改會引響到哪個檔案。
艱困的開發環境
這個…不好說。Chrome Resource Override 插件開發技巧
重構？
該歸位的歸位，該分檔的分檔。