到職到現在也快一年,一位前輩說過大約一年就可以看清楚一間公司的全貌,趁著放假的時間好好的整理一下一年間所看到的東西,這並不是抱怨文或什麼,只是想紀錄也以此為借鏡避免自己犯下同樣的錯誤。有一位前輩說過到哪邊都有技術債只是看你能不能接受,一個大型的專案有技術債也是很正常的事情時間上的壓力、上頭主管的決策、技術力上的不足都是導致技術債的原因,還債的也不一定是你,搞不好是後續接手專案的人。

歷史悠久的專案

我參與的專案算是很大型的電商平台系統,看程式碼上的註解時間沒 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 插件開發技巧

重構?

該歸位的歸位,該分檔的分檔。

參考資料

技術債(Technical Debt)

Facebook 功能:

Summary
這一年來我所看見的技術債
Article Name
這一年來我所看見的技術債
Description
記錄了一年下來所看見的技術債,如果你正在開發專案請避免這些事情發生。到職到現在也快一年,一位前輩說過大約一年就可以看清楚一間公司的全貌,趁著放假的時間好好的整理一下一年間所看到的東西,這並不是抱怨文或什麼,只是想紀錄也以此為借鏡避免自己犯下同樣的錯誤。
Author
Publisher Name
bonze