《JS高程》-教你如何寫出可維護的程式碼

  • 2019 年 11 月 13 日
  • 筆記

1、前言

  在平時工作開發中，大部分開發人員都花費大量的時間在維護其他人員的程式碼。很難從頭開始開發新程式碼，很多情況下都是以他人成果為基礎的，或者新增修改需求，自己寫的程式碼也會被其他開發人員調用，所以寫好一份高品質可維護的程式碼就顯得十分重要。

2、什麼是可維護程式碼

可維護程式碼需要遵循以下幾個特點。

1.可理解性-其他人可以接手程式碼並理解它的意圖和一般途徑。
2.直觀性-程式碼中的東西一看就明白，不管其操作過程有多複雜。
3.可適應性-程式碼以一種數據變化不要求完全重寫的方法撰寫。
4.可擴展性-在程式碼架構上已考慮在未來允許對核心功能進行擴展。
5.可調試性-當有地方出錯時，程式碼可以給你足夠的資訊快速直接找出問題的所在。

3、程式碼約定

  一種讓程式碼變得可維護的簡單途徑是形成一套JavaScript程式碼的書寫約定。由於JavaScript的可適應性，程式碼約定對它很重要。以下小節討論程式碼約定的概論。

1.可讀性

  要讓程式碼可維護，首先它必須可讀。可讀性的大部分內容和程式碼縮進相關的，程式碼整齊的縮進能一眼看出程式碼塊是屬於那個功能的，很常見的縮進大小為4個空格，現在大部分編輯器也支援一件格式化程式碼。可讀性另一方面是注釋，一般來說，有如下一些地方需要進行注釋。

  • 函數和方法-每個方法或注釋都應該包含一個注釋，用於描述其目的和用於完成任務所可能使用的演算法。
  • 大段程式碼-用於完成單個任務的多行程式碼應該在前面放一個描述任務的注釋。
  • 複雜的演算法-使用獨特的方式來解決某個問題加以注釋來解釋如何做的。
  • Hack-瀏覽器兼容性處理。

2.變數和函數的命名

  話說在平時開發中最讓人頭疼的事莫過於命名了，無論是class的命名還是一些變數與方法的命名，所以有時候不得不靠一些翻譯軟體來幫助命名。適當給變數和函數起名字對於增加程式碼的可理解性和可維護性是非常重要的。命名規則一般如下：

  • 變數名應為名詞如car或person。
  • 函數名應以動詞開始，如getName()。
  • 返回布爾類型的函數一般用is開頭，如isEnable()。
  • 常量應該用全部大寫表示，如MAX_LENGTH。

3.變數類型透明

  由於在JavaScript中變數是鬆散類型的，很容易忘記變數所包含的數據類型。合適的命名方式在一定程度上可以緩解這個問題，但是放到所有的情況下看還不夠，還有三種變數數據來表示數據類型的方式。

3.3.1、初始化

  當定義一個變數後，它應該被初始化一個值，來暗示它將來應該如何應用。

// 通過初始化指定變數類型  var found=false; //布爾型  var count=-1; //數字型  var name=""; //字元串  var person=null; //對象

3.3.2、使用匈牙利標記法指定變數類型

  匈牙利標記法在變數名之前加上一個或多個字元來表示數據類型。JS中最傳統的匈牙利標記法是用單個字元來表示基本類型：0-對象，s-字元串，i-整數，f-浮點數，b-布爾類型。

// 用於指定數據類型的匈牙利命名法  var bFound //布爾型  var iCount; //數字型  var sName; //字元串  var oPerson; //對象

匈牙利命名法好處是函數參數也一樣可以使用，但它缺點是讓程式碼在某種程度上那一閱讀。

3.3.3、使用類型注釋

  最後一種指定變數類型的方式是使用類型注釋。類型注釋放在變數名右邊，但是在初始化前面。

// 用於指定類型的類型注釋  var found /*Boolean*/ = false;  var count /*int*/ = 10;  var name /*String*/ = "Tom";  var person /*Object*/ = null;

缺點：多行注釋會與程式碼塊衝突

這三種常見的指定變數數據類型的方法，各有優勢與劣勢，根據自己項目加以評估再進行使用，也可以學習使用下TypeScript。

4、鬆散耦合

  只要應用的某個部分過分依賴另一部分，程式碼就是偶爾過緊，難以維護。因為Web應用技術，有多種情況回使它變得耦合過緊，因此應該避免這些情況，並儘可能維護弱耦合程式碼。

1.解耦HTML/JavaScript

  直接在HTML中的javaScript,使用包含內聯程式碼的<script>元素或者是使用HTML屬性來分配事件處理順序，都是過於緊密耦合。
看看以下的程式碼

<button onclick="doSomeThing()">Click Me</button>

  在這個例子中，可能在doSomeThing()函數可用之前，就已經按下按鈕，導致js錯誤，因為任何對按鈕行為的更改要同時觸及HTML和js,影響可維護性。

同理js中包含大量的HTML

// 將HTML緊密耦合到js中  function insertMessage(){    document.getElementById('container').innerHTML='<div>Hello World</div>'  }

這段程式碼的方法會動態生成一段程式碼塊插入到頁面中，當程式碼很多時候難以定位到錯誤。

將 HTML 和 JavaScript 解耦可以在調試過程中節省時間，更加容易確定錯誤的來源，也減輕維護的難度：更改行為只需要在 JavaScript 文件中進行，而更改標記則只要在渲染文件中

2.解耦CSS/JavaScript

  另一個 Web 層則是 CSS，它主要負責頁面的顯示。JavaScript 和 CSS 也是非常緊密相關的：他們都是 HTML 之上的層次，因此常常一起使用。但是，和 HTML 與 JavaScript 的情況一樣，CSS 和 JavaScript也可能會過於緊密地耦合在一起。最常見的緊密耦合的例子是使用 JavaScript 來更改某些樣式，如下所示：

//CSS 對 JavaScript 的緊密耦合  element.style.color = "red";  element.style.backgroundColor = "blue";

遇到這種直接修改css樣式的，我們直接可以通過修改元素標籤class類名來控制樣式更方便。

3.解耦應用邏輯/事件處理程式

  每個 Web 應用一般都有相當多的事件處理程式，監聽著無數不同的事件。然而，很少有能仔細得將應用邏輯從事件處理程式中分離的。請看以下例子：

function handleKeyPress(event) {          event = EventUtil.getEvent(event);          if (event.keyCode == 13) {              var target = EventUtil.getTarget(event);              var value = 5 * parseInt(target.value);              if (value > 10) {                  document.getElementById("error-msg").style.display = "block";              }          }      }

  這個事件處理程式除了包含了應用邏輯，還進行了事件的處理。這種方式的問題有其雙重性。首先，除了通過事件之外就再沒有方法執行應用邏輯，這讓調試變得困難。如果沒有發生預想的結果怎麼辦？是不是表示事件處理程式沒有被調用還是指應用邏輯失敗？其次，如果一個後續的事件引發同樣的應用邏輯，那就必須複製功能程式碼或者將程式碼抽取到一個單獨的函數中。無論何種方式，都要作比實際所需更多的改動。

  較好的方法是將應用邏輯和事件處理程式相分離，這樣兩者分別處理各自的東西。一個事件處理程式應該從事件對象中提取相關資訊，並將這些資訊傳送到處理應用邏輯的某個方法中。例如，前面的程式碼可以被重寫為：

 function validateValue(value) {          value = 5 * parseInt(value);          if (value > 10) {              document.getElementById("error-msg").style.display = "block";          }      }        function handleKeyPress(event) {          event = EventUtil.getEvent(event);          if (event.keyCode == 13) {              var target = EventUtil.getTarget(event);              validateValue(target.value);          }      }

應用和業務邏輯之間鬆散耦合的幾條原則：

  • 勿將 event 對象傳給其他方法；只傳來自 event 對象中所需的數據；
  • 任何可以在應用層面的動作都應該可以在不執行任何事件處理程式的情況下進行；
  • 任何事件處理程式都應該處理事件，然後將處理轉交給應用邏輯。

牢記這幾條可以在任何程式碼中都獲得極大的可維護性的改進，並且為進一步的測試和開發製造了很多可能。

5、編程實踐

  書寫可維護的 JavaScript 並不僅僅是關於如何格式化程式碼；它還關係到程式碼做什麼的問題。在企業環境中創建的 Web 應用往往同時由大量人員一同創作。這種情況下的目標是確保每個人所使用的瀏覽器環境都有一致和不變的規則。因此，最好堅持以下一些編程實踐。

1.尊重對象所有權

  JavaScript 的動態性質使得幾乎任何東西在任何時間都可以修改。也許在企業環境中最重要的編程實踐就是尊重對象所有權，它的意思是你不能修改不屬於你的對象。簡單地說，如果你不負責創建或維護某個對象、它的對象或者它的方法，那麼你就不能對它們進行修改。更具體地說：

  • 不要為實例或原型添加屬性；
  • 不要為實例或原型添加方法；
  • 不要重定義已存在的方法。

2.避免全局變數

  與尊重對象所有權密切相關的是儘可能避免全局變數和函數。這也關係到創建一個腳本執行的一致的和可維護的環境。最多創建一個全局變數，讓其他對象和函數存在其中。請看以下例子：

// 兩個全局量——避免！！  var name = "Nicholas";  function sayName(){   alert(name);  }

這段程式碼包含了兩個全局量：變數 name 和函數 sayName()。其實可以創建一個包含兩者的對象，如下例所示：

// 一個全局量——推薦  var MyApplication = {   name: "Nicholas",   sayName: function(){   alert(this.name);   }  };

  這段重寫的程式碼引入了一個單一的全局對象 MyApplication，name 和 sayName()都附加到其上。這樣做消除了一些存在於前一段程式碼中的一些問題。首先，變數 name 覆蓋了 window.name 屬性，可能會與其他功能產生衝突；其次，它有助消除功能作用域之間的混淆。調用 MyApplication.sayName()在邏輯上暗示了程式碼的任何問題都可以通過檢查定義 MyApplication 的程式碼來確定。

3.使用常量

以下一些類型的值適合使用常量來定義：

  • 重複值——任何在多處用到的值都應抽取為一個常量。這就限制了當一個值變了而另一個沒變的時候會造成的錯誤。這也包含了 CSS 類名。
  • 用戶介面字元串 —— 任何用於顯示給用戶的字元串，都應被抽取出來以方便國際化。
  • URLs ——在 Web 應用中，資源位置很容易變更，所以推薦用一個公共地方存放所有的URL。
  • 任意可能會更改的值 —— 每當你在用到字面量值的時候，你都要問一下自己這個值在未來是不是會變化。如果答案是「是」，那麼這個值就應該被提取出來作為一個常量。

以上是閱讀《JS高程》一些筆記，同時也反思一下自己在平時項目開發中存在的問題。看來提高一些基本編碼小技巧，編寫出可維護的程式碼還是很有必要的。

參考資料：
《JavaScript高級教程》

VirMach 便宜 VPS

QNews

QNews