前端優(yōu)秀實(shí)踐之可維護(hù)性

 
 
 

  
  
  
// 通過初始化表明變量類型 
  
  
  
let found = false; // Boolean 
  
  
  
let count = -1; // number 
  
  
  
let name = ""; // string 
  
  
  
let person = null; // object 
 
 
 

 
 
 

  
  
  
// 使用匈牙利表示法標(biāo)明數(shù)據(jù)類型 
  
  
  
let bFound; // Boolean 
  
  
  
let iCount; // integer 
  
  
  
let sName; // string 
  
  
  
let oPerson; // object 
 
 
 

 
 
 

  
  
  
// 使用類型注釋標(biāo)明數(shù)據(jù)類型 
  
  
  
let found /*:Boolean*/ = false; 
  
  
  
let count /*:int*/ = 10; 
  
  
  
let name /*:String*/ = "Nicholas"; 
  
  
  
let person /*:Object*/ = null; 
 
 
 

 
 
 

  
  
  
// 這樣多行注釋不會(huì)生效 
  
  
  
/* 
  
  
  
let found /*:Boolean*/ = false; 
  
  
  
let count /*:int*/ = 10; 
  
  
  
let name /*:String*/ = "Nicholas"; 
  
  
  
let person /*:Object*/ = null; 
  
  
  
*/ 
 
 
 

 
 
 

  
  
  
// HTML緊耦合到了JavaScript 
  
  
  
function insertMessage(msg) { 
  
  
  
  let container = document.getElementById("container"); 
  
  
  
    container.innerHTML = ` 
  
  
  
      
 class="post">${msg}
 
  
  
  
      
Latest message above.
 
  
  
  
    

一般來說，應(yīng)該避免在JavaScript中創(chuàng)建大量HTML。同樣，這主要是為了做到數(shù)據(jù)層和行為層各司其職，在出錯(cuò)時(shí)更容易定位問題所在。如果使用上面的代碼示例，那么如果動(dòng)態(tài)插入的HTML格式不對(duì)，就會(huì)造成頁面布局出錯(cuò)。但在這種情況下定位錯(cuò)誤就更困難了。因?yàn)檫@時(shí)候通常首先會(huì)去找頁面中出錯(cuò)的HTML源代碼，但又找不到，因?yàn)樗莿?dòng)態(tài)生成的。而且修改數(shù)據(jù)或頁面，還需要修改JavaScript，這說明兩層是緊密耦合的。

HTML渲染應(yīng)該盡可能與JavaScript分開。在使用JavaScript插入數(shù)據(jù)時(shí)，應(yīng)該盡可能不要插入標(biāo)記。相應(yīng)的標(biāo)記可以包含并隱藏在頁面中，在需要的時(shí)候JavaScript可以直接用它來顯示，而不需要?jiǎng)討B(tài)生成。另一個(gè)辦法是通過Ajax請(qǐng)求獲取要顯示的HTML，這樣也可以保證同一個(gè)渲染層(PHP、JSP、Ruby等)負(fù)責(zé)輸出標(biāo)記，而不是把標(biāo)記嵌在JavaScript中。

解耦HTML和JavaScript可以節(jié)省排錯(cuò)時(shí)間，因?yàn)楦菀锥ㄎ诲e(cuò)誤來源。同樣解耦也有助于保證可維護(hù)性，對(duì)行為的修改只涉及JavaScript，而對(duì)標(biāo)記的修改則只涉及要渲染的文件。

3.2 解耦CSS/JavaScript

Web應(yīng)用的另一層是CSS，主要負(fù)責(zé)頁面的外觀。JavaScript和CSS是緊密相關(guān)的，它們都是建構(gòu)在HTML之上的，因此也經(jīng)常一起使用。與HTML和JavaScript的情況類似，CSS也可能與JavaScript產(chǎn)生強(qiáng)耦合。最常見的例子就是使用JavaScript修改個(gè)別樣式，比如：

 
 
 

  
  
  
// CSS緊耦合到了JavaScript 
  
  
  
element.style.color = "red"; 
  
  
  
element.style.backgroundColor = "blue"; 
 
 
 

因?yàn)镃SS負(fù)責(zé)頁面外觀，任何樣式的問題都應(yīng)該通過CSS文件解決?？墒?，如果JavaScript直接修改個(gè)別樣式(比如顏色)，就會(huì)增加一個(gè)排錯(cuò)時(shí)要考慮甚至要修改的因素。結(jié)果是JavaScript某種程度上承擔(dān)了頁面顯示的任務(wù)，與CSS搞成了緊密耦合。如果將來有一天要修改樣式，那么CSS和JavaScript都需要修改。這對(duì)負(fù)責(zé)維護(hù)的開發(fā)者來說是一個(gè)惡夢(mèng)。層與層的清晰解耦是必需的。

現(xiàn)代Web應(yīng)用經(jīng)常使用JavaScript改變樣式，因此雖然不太可能完全解耦CSS和JavaScript，但可以讓這種耦合變成更松散。這主要可以通過動(dòng)態(tài)修改類名而不是樣式來實(shí)現(xiàn)，比如：

 
 
 

  
  
  
// CSS與JavaScript松散耦合 
  
  
  
element.className = "edit"; 
 
 
 

通過修改元素的CSS類名，可以把大部分樣式限制在CSS文件里。JavaScript只負(fù)責(zé)修改應(yīng)用樣式的類名，而不直接影響元素的樣式。只要應(yīng)用的類名沒錯(cuò)，那么外觀的問題就只跟CSS有關(guān)，而跟JavaScript無關(guān)。

同樣，保證層與層之間的適當(dāng)分離是至關(guān)重要的。顯示出問題就只應(yīng)該去CSS里解決，行為出問題就只應(yīng)該找JavaScript的問題。這些層之間的松散耦合可以提升整個(gè)應(yīng)用的可維護(hù)性。

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

每個(gè)Web應(yīng)用中都會(huì)有大量事件處理程序在監(jiān)聽各種事件?？墒牵渲泻苌儆姓嬲龅綉?yīng)用邏輯與事件處理程序分離的。來看下面的例子：

 
 
 

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

這個(gè)事件處理程序除了處理事件，還包含了應(yīng)用邏輯。這樣做的問題是雙重的。首先，除了事件沒有辦法觸發(fā)應(yīng)用邏輯，結(jié)果造成調(diào)試?yán)щy。如果沒有發(fā)生預(yù)期的結(jié)果怎么辦?是因?yàn)闆]有調(diào)用事件處理程序，還是因?yàn)閼?yīng)用邏輯有錯(cuò)誤?其次，如果后續(xù)事件也會(huì)對(duì)應(yīng)相同的應(yīng)用邏輯，就會(huì)導(dǎo)致代碼重復(fù)，否則就要把它提取到一個(gè)函數(shù)中。無論如何，都會(huì)導(dǎo)致原本不必要的多余工作。

更好的做法是將應(yīng)用邏輯與事件處理程序分開，各自只負(fù)責(zé)處理各自的事情。事件處理程序應(yīng)該專注于event對(duì)象的相關(guān)信息，然后把這些信息傳給處理應(yīng)用邏輯的某些方法。例如，前面的例子可以重寫成這樣：

 
 
 

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

這樣修改之后，應(yīng)用邏輯跟事件處理程序就分開了。handleKeyPress()函數(shù)只負(fù)責(zé)檢查用戶是不是按下了回車鍵(event.keyCode等于13)，如果是則取得事件目標(biāo)，并把目標(biāo)的值傳給validateValue()函數(shù)，由該函數(shù)處理應(yīng)用邏輯。注意，validateValue()函數(shù)中不包含任何依賴事件處理程序的代碼。這個(gè)函數(shù)只負(fù)責(zé)接收一個(gè)值，然后可以對(duì)這個(gè)值做任何處理。

把應(yīng)用邏輯從事件處理程序中分離出來有很多好處。首先，可以方便地修改觸發(fā)某個(gè)流程的事件。如果原來是通過鼠標(biāo)單擊觸發(fā)流程，而現(xiàn)在又想增加鍵盤操作來觸發(fā)，那么修改起來也很簡(jiǎn)單。其次，可以在不用添加事件的情況下測(cè)試代碼，這樣創(chuàng)建單元測(cè)試甚至與應(yīng)用自動(dòng)化整合都會(huì)更簡(jiǎn)單。

以下是在解耦應(yīng)用和業(yè)務(wù)邏輯時(shí)應(yīng)該注意的幾點(diǎn)。

• 不要把event對(duì)象傳給其他方法，而是只傳遞event對(duì)象中必要的數(shù)據(jù)。
• 應(yīng)用中每個(gè)可能的操作都應(yīng)該無需事件處理程序就可以執(zhí)行。
• 事件處理程序應(yīng)該處理事件，而把后續(xù)處理交給應(yīng)用邏輯。

做到上述幾點(diǎn)能夠給任何代碼的可維護(hù)性帶來巨大的提升，同時(shí)也能為將來的測(cè)試和開發(fā)提供很多可能性。

4. 編碼慣例

編寫可維護(hù)的JavaScript不僅僅涉及代碼格式和規(guī)范，也涉及代碼做什么。大企業(yè)開發(fā)Web應(yīng)用通常需要很多人協(xié)同工作。這時(shí)候就需要保證每個(gè)人的瀏覽器環(huán)境都有恒定不變的規(guī)則。為此，開發(fā)者應(yīng)該遵守某些編碼慣例。

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

JavaScript的動(dòng)態(tài)天性意味著幾乎可以在任何時(shí)候修改任何東西。過去有人說，JavaScript中沒有什么是神圣不可侵犯的，因?yàn)椴荒馨讶魏螙|西標(biāo)記為最終結(jié)果或者恒定不變。但ECMAScript 5引入防篡改對(duì)象之后，情況不同了。當(dāng)然，對(duì)象默認(rèn)還是可以修改的。在其他語言中，在沒有源代碼的情況下對(duì)象和類都是不可修改的。JavaScript則允許在任何時(shí)候修改任何對(duì)象，因此就可能導(dǎo)致意外地覆蓋默認(rèn)行為。既然這門語言沒有什么限制，那就需要開發(fā)者自己限制自己。

在企業(yè)開發(fā)中，可能最最重的編碼慣例就是尊重對(duì)象所有權(quán)，這意味著不要修改不屬于你的對(duì)象。簡(jiǎn)單地講，如果你不負(fù)責(zé)創(chuàng)建和維護(hù)某個(gè)對(duì)象，包括它的構(gòu)造函數(shù)或它的方法，就不應(yīng)該對(duì)它進(jìn)行任何修改。更具體一點(diǎn)說，就是：

• 不要給實(shí)例或原型添加屬性
• 不要給實(shí)例或原型添加方法
• 不要重定義已有的方法

問題在于，開發(fā)者會(huì)假設(shè)瀏覽器環(huán)境以某種方式運(yùn)行。修改了多個(gè)人使用的對(duì)象也就意味著會(huì)有錯(cuò)誤發(fā)生。如果有人希望某個(gè)函數(shù)叫stopEvent()，用于取消某個(gè)事件的默認(rèn)行為。然后，你把它給改了，除了取消事件的默認(rèn)行為，又添加了其他事件處理程序?？上攵瑔栴}肯定會(huì)接踵而至。別人還會(huì)認(rèn)為這個(gè)函數(shù)只做最開始的那點(diǎn)事，由于對(duì)它后來添加的副作用并不知情，很可能會(huì)用錯(cuò)或者造成損失。

以上規(guī)則不僅適用于自定義類型和對(duì)象，同樣適用于原生類型和對(duì)象，比如Object、String、document、window，等等。考慮到瀏覽器廠商也有可能會(huì)在不宣布的情況下以非預(yù)期方式修改這些對(duì)象，那么潛在的風(fēng)險(xiǎn)就更大了。

以前有一個(gè)流行的Prototype庫就發(fā)生過類似事件。當(dāng)時(shí)，這個(gè)庫在document對(duì)象上實(shí)現(xiàn)了getElementsByClassName()方法，返回一個(gè)Array的實(shí)例，而這個(gè)實(shí)例上還增加了each()方法。jQuery的作者John Resig后來在自己的博客上分析了這個(gè)問題造成的影響。他在博客中(https://johnresig.com/blog/getelementsbyclassname-pre-prototype-16/)指出這個(gè)問題是由于瀏覽器也原生實(shí)現(xiàn)了相同的getElementsByClassName()方法造成的。但Prototype的同名方法返回的是Array而非NodeList，后者沒有each()方法。使用這個(gè)庫的開發(fā)者之前會(huì)寫這樣的代碼：

 
 
 

  
  
  
document.getElementsByClassName("selected").each(Element.hide); 
 
 
 

盡管這樣寫在沒有原生實(shí)現(xiàn)getElementsByClassName()方法的瀏覽器里沒有問題，但在實(shí)現(xiàn)它的瀏覽器里就會(huì)出問題。因?yàn)閮蓚€(gè)同名方法返回的結(jié)果不一樣。我們不能預(yù)見瀏覽器廠商將來會(huì)怎么修改原生對(duì)象，因此不管怎么修改它們都可能在將來某個(gè)時(shí)刻出現(xiàn)沖突時(shí)導(dǎo)致問題。

為此，最好的方法是永遠(yuǎn)不要修改不屬于你的對(duì)象。只有你自己創(chuàng)建的才是你的對(duì)象，包括自定義類型和對(duì)象字面量。Array、document等這些都不是你的，因?yàn)樵谀愕拇a執(zhí)行之前它們已經(jīng)存在了?？梢赃@樣為對(duì)象添加新功能：

• 創(chuàng)建包含想要功能的新對(duì)象，通過它與別人的對(duì)象交互。
• 創(chuàng)建新自定義類型繼承本來想要修改的類型，給自定義類型添加新功能。

很多JavaScript庫目前都贊同這個(gè)開發(fā)理念，這樣無論瀏覽器怎樣改變都可以發(fā)展和適應(yīng)。

4.2 不聲明全局變量

與尊重對(duì)象所有權(quán)密切相關(guān)的是盡可能不聲明全局變量和函數(shù)。同樣，這也關(guān)系到創(chuàng)建一致和可維護(hù)的腳本運(yùn)行環(huán)境。最多可以創(chuàng)建一個(gè)全局變量，作為其他對(duì)象和函數(shù)的命名空間。來看下面的例子：

 
 
 

  
  
  
// 兩個(gè)全局變量——不要！ 
  
  
  
var name = "Nicholas"; 
  
  
  
function sayName() { 
  
  
  
  console.log(name); 
  
  
  
} 
 
 
 

以上代碼聲明了兩個(gè)全局變量：name和sayName()?？梢韵裣旅孢@樣把它們包含在一個(gè)對(duì)象中：

 
 
 

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

這個(gè)重寫后的版本只聲明了一個(gè)全局對(duì)象MyApplication。在這個(gè)對(duì)象內(nèi)部，又包含name和sayName()。這樣可以避免之前版本的幾個(gè)問題。首先，變量name會(huì)覆蓋window.name屬性，而這可能會(huì)影響其他功能。其次，有助于分清功能都集中在哪里。調(diào)用MyApplication.sayName()從邏輯上就會(huì)暗示出現(xiàn)任何問題，都可以在MyApplication的代碼中找原因。

這樣一個(gè)全局對(duì)象可以擴(kuò)展為命名空間的概念。命名空間涉及創(chuàng)建一個(gè)對(duì)象，然后通過這個(gè)對(duì)象來暴露能力。比如，Google Closure庫就利用了這樣的命名空間來組織其代碼。下面是幾個(gè)例子：

• goog.string：用于操作字符串的方法。
• goog.html.utils：與HTML相關(guān)的方法。
• goog.i18n：與國(guó)際化(i18n)相關(guān)的方法。

對(duì)象goog就相當(dāng)于一個(gè)容器，其他對(duì)象都包含在這里面。只要使用對(duì)象以這種方式來組織功能，就可以稱該對(duì)象為命名空間。整個(gè)Google Closure庫都構(gòu)建在這個(gè)概念之上，能夠在同一個(gè)頁面上與其他JavaScript庫共存。

關(guān)于命名空間，最重要的是確定一個(gè)所有人都同意的全局對(duì)象名稱。這個(gè)名稱要足夠獨(dú)特，不可能與其他人的沖突。多數(shù)情況下，可以使用開發(fā)者所在的公司名，例如goog或Wrox。下面的例子演示了使用Wrox作為命名空間來組織功能：

 
 
 

  
  
  
// 創(chuàng)建全局對(duì)象 
  
  
  
var Wrox = {}; 
  
  
  
 
  
  
  
// 為本書（Professional JavaScript）創(chuàng)建命名空間 
  
  
  
Wrox.ProJS = {}; 
  
  
  
 
  
  
  
// 添加本書用到的其他對(duì)象 
  
  
  
Wrox.ProJS.EventUtil = { ... }; 
  
  
  
Wrox.ProJS.CookieUtil = { ... }; 
 
 
 

在這個(gè)例子中，Wrox是全局變量，然后在它的下面又創(chuàng)建了命名空間。如果本書所有代碼都保存在Wrox.ProJS命名空間中，那么其他作者的代碼就可以使用自己的對(duì)象來保存。只要每個(gè)人都遵循這個(gè)模式，就不必?fù)?dān)心有人會(huì)覆蓋這里的EventUtil或CookieUtil，因?yàn)榧词怪孛鼈円仓粫?huì)出現(xiàn)在不同的命名空間中。比如下面的例子：

 
 
 

  
  
  
// 為另一本書（Professional Ajax）創(chuàng)建命名空間 
  
  
  
Wrox.ProAjax = {}; 
  
  
  
 
  
  
  
// 添加其他對(duì)象 
  
  
  
Wrox.ProAjax.EventUtil = { ... }; 
  
  
  
Wrox.ProAjax.CookieUtil = { ... }; 
  
  
  
 
  
  
  
// 可以照常使用ProJS下面的對(duì)象 
  
  
  
Wrox.ProJS.EventUtil.addHandler( ... ); 
  
  
  
 
  
  
  
// 以及ProAjax下面的對(duì)象 
  
  
  
Wrox.ProAjax.EventUtil.addHandler( ... ); 
 
 
 

雖然命名空間需要多寫一點(diǎn)代碼，但從可維護(hù)性角度看，這個(gè)代價(jià)還是非常值得的。命名空間可以確保代碼與頁面上的其他代碼互不干擾。

4.3 不要比較null

JavaScript不會(huì)自動(dòng)做任何類型檢查，因此就需要開發(fā)者擔(dān)起這個(gè)責(zé)任。結(jié)果，很多JavaScript代碼都不會(huì)做類型檢查。最常見的類型檢查是看一個(gè)值是不是null。然而，與null進(jìn)行比較的代碼太多了，其中很多都因?yàn)轭愋蜋z查不夠而頻繁引發(fā)錯(cuò)誤。比如下面的例子：

 
 
 

  
  
  
function sortArray(values) { 
  
  
  
  if (values != null) { // 不要這樣比較！ 
  
  
  
    values.sort(comparator); 
  
  
  
  } 
  
  
  
} 
 
 
 

這個(gè)函數(shù)的目的是使用給定的比較函數(shù)對(duì)數(shù)組進(jìn)行排序。為保證函數(shù)正常執(zhí)行，values參數(shù)必須是數(shù)組。但是，if語句在這里只簡(jiǎn)單地檢查了這個(gè)值不是null。實(shí)際上，字符串、數(shù)值還有其他很多值都可以通過這里的檢查，結(jié)果就會(huì)導(dǎo)致錯(cuò)誤。

現(xiàn)實(shí)當(dāng)中，單純比較null通常是不夠的。檢查值的類型就要真的檢查類型，而不是檢查它不能是什么。例如，在前面的代碼中，values參數(shù)應(yīng)該是數(shù)組。為此，應(yīng)該檢查它到底是不是數(shù)組，而不是檢查它不是null。可以像下面這樣重寫那個(gè)函數(shù)：

 
 
 

  
  
  
function sortArray(values) { 
  
  
  
  if (values instanceof Array) { // 推薦 
  
  
  
    values.sort(comparator); 
  
  
  
  } 
  
  
  
} 
 
 
 

這個(gè)函數(shù)的這個(gè)版本可以過濾所有無效的值，根本不需要使用null。

• 如果看到比較null的代碼，可以使用下列某種技術(shù)替換它。
• 如果值應(yīng)該是引用類型，使用instanceof操作符檢查其構(gòu)造函數(shù)。
• 如果值應(yīng)該是原始類型，使用typeof檢查其類型。
• 如果希望值是有特定方法名的對(duì)象，使用typeof操作符確保對(duì)象上存在給定名字的對(duì)象。

代碼中比較null的地方越少，就越容易明確類型檢查的目的，從而消除不必要的錯(cuò)誤。

4.4 使用常量

依賴常量的目標(biāo)是從應(yīng)用邏輯中分離數(shù)據(jù)，以便修改數(shù)據(jù)時(shí)不會(huì)引發(fā)錯(cuò)誤。顯示在用戶界面上的字符串就應(yīng)該以這種方式提取出來，可以方便實(shí)現(xiàn)國(guó)際化。URL也應(yīng)該這樣提取出來，因?yàn)殡S著應(yīng)用越來越復(fù)雜，URL也極有可能變化?；旧希襁@種地方因?yàn)檫@種或那種原因?qū)硇枰薷臅r(shí)，可能就要找到某個(gè)函數(shù)，然后修改其中的代碼。而每次像這樣修改應(yīng)用邏輯，都可能引入新錯(cuò)誤。為此，可以把這些可能會(huì)修改的數(shù)據(jù)提取出來，放在單獨(dú)定義的常量中，以實(shí)現(xiàn)數(shù)據(jù)與邏輯分離。

關(guān)鍵在于把數(shù)據(jù)從使用它們的邏輯中分離出來?？梢允褂靡韵聵?biāo)準(zhǔn)檢查哪些數(shù)據(jù)需要提取。

• 重復(fù)出現(xiàn)的值。任何使用超過一次的值都應(yīng)該提取到常量中。這樣可以消除一個(gè)值改了而另一個(gè)值沒改造成的錯(cuò)誤。這里也包括CSS的類名。
• 用戶界面字符串。任何會(huì)顯示給用戶的字符串都應(yīng)該提取出來，以方便實(shí)現(xiàn)國(guó)際化。
• URL：Web應(yīng)用中資源的地址經(jīng)常會(huì)發(fā)生變化，因此建議把所有URL集中放在一個(gè)地方管理。
• 任何可能變化的值。任何時(shí)候，只要在代碼中使用字面值，就問問自己這個(gè)值將來有沒有可能會(huì)變。如果答案是有可能，那么就應(yīng)該把它提取到常量中。

使用常量是企業(yè)級(jí)JavaScript的重要技術(shù)，因?yàn)樗梢宰尨a更容易維護(hù)，同時(shí)可以讓代碼免受數(shù)據(jù)變化的影響。