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

一、前言

  在平時工做開發中，大部分開發人員都花費大量的時間在維護其餘人員的代碼。很難從頭開始開發新代碼，不少狀況下都是以他人成果爲基礎的，或者新增修改需求，本身寫的代碼也會被其餘開發人員調用，因此寫好一份高質量可維護的代碼就顯得十分重要。

二、什麼是可維護代碼

可維護代碼須要遵循如下幾個特色。

1.可理解性-其餘人能夠接手代碼並理解它的意圖和通常途徑。
2.直觀性-代碼中的東西一看就明白，無論其操做過程有多複雜。
3.可適應性-代碼以一種數據變化不要求徹底重寫的方法撰寫。
4.可擴展性-在代碼架構上已考慮在將來容許對核心功能進行擴展。
5.可調試性-當有地方出錯時，代碼能夠給你足夠的信息快速直接找出問題的所在。

三、代碼約定

  一種讓代碼變得可維護的簡單途徑是造成一套JavaScript代碼的書寫約定。因爲JavaScript的可適應性，代碼約定對它很重要。如下小節討論代碼約定的概論。

1.可讀性

  要讓代碼可維護，首先它必須可讀。可讀性的大部份內容和代碼縮進相關的，代碼整齊的縮進能一眼看出代碼塊是屬於那個功能的，很常見的縮進大小爲4個空格，如今大部分編輯器也支持一件格式化代碼。可讀性另外一方面是註釋，通常來講，有以下一些地方須要進行註釋。

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

2.變量和函數的命名

  話說在平時開發中最讓人頭疼的事莫過於命名了，不管是class的命名仍是一些變量與方法的命名，因此有時候不得不靠一些翻譯軟件來幫助命名。適當給變量和函數起名字對於增長代碼的可理解性和可維護性是很是重要的。命名規則通常以下：

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

3.變量類型透明

  因爲在JavaScript中變量是鬆散類型的，很容易忘記變量所包含的數據類型。合適的命名方式在必定程度上能夠緩解這個問題，可是放到全部的狀況下看還不夠，還有三種變量數據來表示數據類型的方式。

3.3.一、初始化

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

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

3.3.二、使用匈牙利標記法指定變量類型

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

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

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

3.3.三、使用類型註釋

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

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

缺點：多行註釋會與代碼塊衝突

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

四、鬆散耦合

  只要應用的某個部分過度依賴另外一部分，代碼就是偶爾過緊，難以維護。由於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 對象中所需的數據；
• 任何能夠在應用層面的動做都應該能夠在不執行任何事件處理程序的狀況下進行；
• 任何事件處理程序都應該處理事件，而後將處理轉交給應用邏輯。

牢記這幾條能夠在任何代碼中都得到極大的可維護性的改進，而且爲進一步的測試和開發製造了不少可能。

五、編程實踐

  書寫可維護的 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高級教程》