怎么寫出可維護(hù)的JS代碼

這篇文章主要介紹了怎么寫出可維護(hù)的JS代碼，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

JavaScript是什么

JavaScript是一種直譯式的腳本語(yǔ)言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，JavaScript是被廣泛用于客戶端的腳本語(yǔ)言，最早是在HTML網(wǎng)頁(yè)上使用，用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能。

什么是可維護(hù)代碼

可維護(hù)代碼需要遵循以下幾個(gè)特點(diǎn)。

1.可理解性-其他人可以接手代碼并理解它的意圖和一般途徑。
2.直觀性-代碼中的東西一看就明白，不管其操作過(guò)程有多復(fù)雜。
3.可適應(yīng)性-代碼以一種數(shù)據(jù)變化不要求完全重寫的方法撰寫。
4.可擴(kuò)展性-在代碼架構(gòu)上已考慮在未來(lái)允許對(duì)核心功能進(jìn)行擴(kuò)展。
5.可調(diào)試性-當(dāng)有地方出錯(cuò)時(shí)，代碼可以給你足夠的信息快速直接找出問(wèn)題的所在。

代碼約定

一種讓代碼變得可維護(hù)的簡(jiǎn)單途徑是形成一套JavaScript代碼的書寫約定。由于JavaScript的可適應(yīng)性，代碼約定對(duì)它很重要。以下小節(jié)討論代碼約定的概論。

1.可讀性

要讓代碼可維護(hù)，首先它必須可讀?？勺x性的大部分內(nèi)容和代碼縮進(jìn)相關(guān)的，代碼整齊的縮進(jìn)能一眼看出代碼塊是屬于那個(gè)功能的，很常見(jiàn)的縮進(jìn)大小為4個(gè)空格，現(xiàn)在大部分編輯器也支持一件格式化代碼?？勺x性另一方面是注釋，一般來(lái)說(shuō)，有如下一些地方需要進(jìn)行注釋。

• 函數(shù)和方法-每個(gè)方法或注釋都應(yīng)該包含一個(gè)注釋，用于描述其目的和用于完成任務(wù)所可能使用的算法。

• 大段代碼-用于完成單個(gè)任務(wù)的多行代碼應(yīng)該在前面放一個(gè)描述任務(wù)的注釋。

• 復(fù)雜的算法-使用獨(dú)特的方式來(lái)解決某個(gè)問(wèn)題加以注釋來(lái)解釋如何做的。

• Hack-瀏覽器兼容性處理。

2.變量和函數(shù)的命名

話說(shuō)在平時(shí)開發(fā)中最讓人頭疼的事莫過(guò)于命名了，無(wú)論是class的命名還是一些變量與方法的命名，所以有時(shí)候不得不靠一些翻譯軟件來(lái)幫助命名。適當(dāng)給變量和函數(shù)起名字對(duì)于增加代碼的可理解性和可維護(hù)性是非常重要的。命名規(guī)則一般如下：

• 變量名應(yīng)為名詞如car或person。

• 函數(shù)名應(yīng)以動(dòng)詞開始，如getName()。

• 返回布爾類型的函數(shù)一般用is開頭，如isEnable()。

• 常量應(yīng)該用全部大寫表示，如MAX_LENGTH。

3.變量類型透明

由于在JavaScript中變量是松散類型的，很容易忘記變量所包含的數(shù)據(jù)類型。合適的命名方式在一定程度上可以緩解這個(gè)問(wèn)題，但是放到所有的情況下看還不夠，還有三種變量數(shù)據(jù)來(lái)表示數(shù)據(jù)類型的方式。

3.3.1、初始化

當(dāng)定義一個(gè)變量后，它應(yīng)該被初始化一個(gè)值，來(lái)暗示它將來(lái)應(yīng)該如何應(yīng)用。

// 通過(guò)初始化指定變量類型
var found=false; //布爾型
var count=-1; //數(shù)字型
var name=""; //字符串
var person=null; //對(duì)象

3.3.2、使用匈牙利標(biāo)記法指定變量類型

匈牙利標(biāo)記法在變量名之前加上一個(gè)或多個(gè)字符來(lái)表示數(shù)據(jù)類型。js中最傳統(tǒng)的匈牙利標(biāo)記法是用單個(gè)字符來(lái)表示基本類型：0-對(duì)象，s-字符串，i-整數(shù)，f-浮點(diǎn)數(shù)，b-布爾類型。

// 用于指定數(shù)據(jù)類型的匈牙利命名法
var bFound //布爾型
var iCount; //數(shù)字型
var sName; //字符串
var oPerson; //對(duì)象

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

3.3.3、使用類型注釋

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

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

缺點(diǎn)：多行注釋會(huì)與代碼塊沖突

這三種常見(jiàn)的指定變量數(shù)據(jù)類型的方法，各有優(yōu)勢(shì)與劣勢(shì)，根據(jù)自己項(xiàng)目加以評(píng)估再進(jìn)行使用，也可以學(xué)習(xí)使用下TypeScript。

松散耦合

只要應(yīng)用的某個(gè)部分過(guò)分依賴另一部分，代碼就是偶爾過(guò)緊，難以維護(hù)。因?yàn)閃eb應(yīng)用技術(shù)，有多種情況回使它變得耦合過(guò)緊，因此應(yīng)該避免這些情況，并盡可能維護(hù)弱耦合代碼。

1.解耦html/JavaScript

直接在html中的javaScript,使用包含內(nèi)聯(lián)代碼的<script>元素或者是使用HTML屬性來(lái)分配事件處理順序，都是過(guò)于緊密耦合。

看看以下的代碼

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

在這個(gè)例子中，可能在doSomeThing()函數(shù)可用之前，就已經(jīng)按下按鈕，導(dǎo)致js錯(cuò)誤，因?yàn)槿魏螌?duì)按鈕行為的更改要同時(shí)觸及HTML和js,影響可維護(hù)性。

同理js中包含大量的HTML

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

這段代碼的方法會(huì)動(dòng)態(tài)生成一段代碼塊插入到頁(yè)面中，當(dāng)代碼很多時(shí)候難以定位到錯(cuò)誤。

將 HTML 和 JavaScript 解耦可以在調(diào)試過(guò)程中節(jié)省時(shí)間，更加容易確定錯(cuò)誤的來(lái)源，也減輕維護(hù)的難度：更改行為只需要在 JavaScript 文件中進(jìn)行，而更改標(biāo)記則只要在渲染文件中

2.解耦css/JavaScript

另一個(gè) Web 層則是css，它主要負(fù)責(zé)頁(yè)面的顯示。JavaScript 和 CSS 也是非常緊密相關(guān)的：他們都是 HTML 之上的層次，因此常常一起使用。但是，和 HTML 與 JavaScript 的情況一樣，CSS 和 JavaScript也可能會(huì)過(guò)于緊密地耦合在一起。最常見(jiàn)的緊密耦合的例子是使用 JavaScript 來(lái)更改某些樣式，如下所示：

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

遇到這種直接修改css樣式的，我們直接可以通過(guò)修改元素標(biāo)簽class類名來(lái)控制樣式更方便。

3.解耦應(yīng)用邏輯/事件處理程序

每個(gè) Web 應(yīng)用一般都有相當(dāng)多的事件處理程序，監(jiān)聽(tīng)著無(wú)數(shù)不同的事件。然而，很少有能仔細(xì)得將應(yīng)用邏輯從事件處理程序中分離的。請(qǐng)看以下例子：

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";
            }
        }
    }

這個(gè)事件處理程序除了包含了應(yīng)用邏輯，還進(jìn)行了事件的處理。這種方式的問(wèn)題有其雙重性。首先，除了通過(guò)事件之外就再?zèng)]有方法執(zhí)行應(yīng)用邏輯，這讓調(diào)試變得困難。如果沒(méi)有發(fā)生預(yù)想的結(jié)果怎么辦？是不是表示事件處理程序沒(méi)有被調(diào)用還是指應(yīng)用邏輯失敗？其次，如果一個(gè)后續(xù)的事件引發(fā)同樣的應(yīng)用邏輯，那就必須復(fù)制功能代碼或者將代碼抽取到一個(gè)單獨(dú)的函數(shù)中。無(wú)論何種方式，都要作比實(shí)際所需更多的改動(dòng)。

較好的方法是將應(yīng)用邏輯和事件處理程序相分離，這樣兩者分別處理各自的東西。一個(gè)事件處理程序應(yīng)該從事件對(duì)象中提取相關(guān)信息，并將這些信息傳送到處理應(yīng)用邏輯的某個(gè)方法中。例如，前面的代碼可以被重寫為：

 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);
        }
    }

應(yīng)用和業(yè)務(wù)邏輯之間松散耦合的幾條原則：

• 勿將 event 對(duì)象傳給其他方法；只傳來(lái)自 event 對(duì)象中所需的數(shù)據(jù)；

• 任何可以在應(yīng)用層面的動(dòng)作都應(yīng)該可以在不執(zhí)行任何事件處理程序的情況下進(jìn)行；

• 任何事件處理程序都應(yīng)該處理事件，然后將處理轉(zhuǎn)交給應(yīng)用邏輯。

牢記這幾條可以在任何代碼中都獲得極大的可維護(hù)性的改進(jìn)，并且為進(jìn)一步的測(cè)試和開發(fā)制造了很多可能。

編程實(shí)踐

書寫可維護(hù)的 JavaScript 并不僅僅是關(guān)于如何格式化代碼；它還關(guān)系到代碼做什么的問(wèn)題。在企業(yè)環(huán)境中創(chuàng)建的 Web 應(yīng)用往往同時(shí)由大量人員一同創(chuàng)作。這種情況下的目標(biāo)是確保每個(gè)人所使用的瀏覽器環(huán)境都有一致和不變的規(guī)則。因此，最好堅(jiān)持以下一些編程實(shí)踐。

1.尊重對(duì)象所有權(quán)

JavaScript 的動(dòng)態(tài)性質(zhì)使得幾乎任何東西在任何時(shí)間都可以修改。也許在企業(yè)環(huán)境中最重要的編程實(shí)踐就是尊重對(duì)象所有權(quán)，它的意思是你不能修改不屬于你的對(duì)象。簡(jiǎn)單地說(shuō)，如果你不負(fù)責(zé)創(chuàng)建或維護(hù)某個(gè)對(duì)象、它的對(duì)象或者它的方法，那么你就不能對(duì)它們進(jìn)行修改。更具體地說(shuō)：

• 不要為實(shí)例或原型添加屬性；

• 不要為實(shí)例或原型添加方法；

• 不要重定義已存在的方法。

2.避免全局變量

與尊重對(duì)象所有權(quán)密切相關(guān)的是盡可能避免全局變量和函數(shù)。這也關(guān)系到創(chuàng)建一個(gè)腳本執(zhí)行的一致的和可維護(hù)的環(huán)境。最多創(chuàng)建一個(gè)全局變量，讓其他對(duì)象和函數(shù)存在其中。請(qǐng)看以下例子：

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

這段代碼包含了兩個(gè)全局量：變量 name 和函數(shù) sayName()。其實(shí)可以創(chuàng)建一個(gè)包含兩者的對(duì)象，如下例所示：

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

這段重寫的代碼引入了一個(gè)單一的全局對(duì)象 MyApplication，name 和 sayName()都附加到其上。這樣做消除了一些存在于前一段代碼中的一些問(wèn)題。首先，變量 name 覆蓋了 window.name 屬性，可能會(huì)與其他功能產(chǎn)生沖突；其次，它有助消除功能作用域之間的混淆。調(diào)用 MyApplication.sayName()在邏輯上暗示了代碼的任何問(wèn)題都可以通過(guò)檢查定義 MyApplication 的代碼來(lái)確定。

3.使用常量

以下一些類型的值適合使用常量來(lái)定義：

• 重復(fù)值——任何在多處用到的值都應(yīng)抽取為一個(gè)常量。這就限制了當(dāng)一個(gè)值變了而另一個(gè)沒(méi)變的時(shí)候會(huì)造成的錯(cuò)誤。這也包含了 CSS 類名。

• 用戶界面字符串 —— 任何用于顯示給用戶的字符串，都應(yīng)被抽取出來(lái)以方便國(guó)際化。

• URLs ——在 Web 應(yīng)用中，資源位置很容易變更，所以推薦用一個(gè)公共地方存放所有的URL。

• 任意可能會(huì)更改的值 —— 每當(dāng)你在用到字面量值的時(shí)候，你都要問(wèn)一下自己這個(gè)值在未來(lái)是不是會(huì)變化。如果答案是“是”，那么這個(gè)值就應(yīng)該被提取出來(lái)作為一個(gè)常量。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么寫出可維護(hù)的JS代碼”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!