3.5 規(guī)范化命名，提升可讀性

我們開始進一步了解業(yè)務(wù)邏輯、閱讀項目的代碼和函數(shù)。于是，我們又進一步將注意力放到命名上。

命名，對于程序員來說是一件相當頭疼的事，對于英語不是母語的開發(fā)人員來說更是如此。為了取一個變量名，我們需要打開翻譯軟件、網(wǎng)站，輸入對應(yīng)的中文名，以獲取可能的英語單詞。再按自己的經(jīng)驗來決定使用哪個單詞。即便如此，一個英文單詞又可能擁有多個中文含義，我們又需要進一步翻譯成中文。即便最后我們決定使用這個單詞，在和其他程序員討論代碼的時候，可能還會對這些代碼有一定的爭議。

這個頭疼的問題不是我們使用規(guī)范能解決的，但是我們可以通過制定命名規(guī)則來統(tǒng)一命名方法。

3.5.1 命名法

對于閱讀代碼來說，一個簡單有效的函數(shù)名、變量名，遠遠比冗長的注釋來得更加有用。而這些函數(shù)名、變量名本身應(yīng)該也是容易閱讀的，比如gettypebyid這種全小寫的方式，對于開發(fā)人員來說相當不友好。如果讀者也接觸過不同的語言就會發(fā)現(xiàn)，語言間的差距不僅體現(xiàn)在使用上，還會體現(xiàn)在函數(shù)、變量的命名上。下面是幾種常用的命名規(guī)則：

◎ 駝峰命名法，譯自CamelCase，類似于駱駝的后背形狀一樣高低起伏。這個命名法來源于Perl語言，其展現(xiàn)形式是在單字之間通過首字母大寫來展現(xiàn)，如“getTypeById”。在前端開發(fā)中，這種命名規(guī)則較為常見。

◎ 下畫線命名法，即通過下畫線來分割單詞，如“get_type_by_id”就是采用這種命名方法。下畫線（_）的分割方式非常顯眼，它也更容易讓開發(fā)人員區(qū)別單詞。在Python語言中，這種命名方式特別流行。

◎ 匈牙利命名法，最初是由一個匈牙利程序員Charles Simonyi發(fā)明的，其命名規(guī)則是：屬性+類型+對象描述。如“strFirstName”便是這樣的形式，變量中的“str”表示這個變量的類型是string，再比如“iAge”中的“i”表示這個變量的類型是int。

上述幾種方式都是為了提升代碼的可讀性而出現(xiàn)的，并不存在哪種命名方式更好，都是隨習慣而來的。

不同語言之間存在一些不同的文化，在使用其他語言的時候，這些文化會體現(xiàn)出來。比如在JavaScript里，通常會使用that = this來解決this作用域的問題，而對于一些程序員（如Ruby語言的使用者）來說，他們會將它寫成self = this——這種方式對他們來說更好理解。

對于前端團隊來說，我們需要統(tǒng)一項目的命名規(guī)則，以降低項目的成本。

3.5.2 CSS及其預(yù)處理器命名規(guī)則

除了代碼，CSS的命名規(guī)則也是值得進行規(guī)范的。它存在于HTML文件和JavaScript代碼中，以及自身的CSS文件中。

在前端技術(shù)快速發(fā)展的今天，我們已經(jīng)不再直接編寫CSS文件，而是通過CSS預(yù)處理器將LESS、SCSS等新增了很多編程特性的語言轉(zhuǎn)換為CSS。對CSS進行命名規(guī)范的主要原因是，如果不同頁面、組件中定義的樣式發(fā)生沖突，就會導(dǎo)致頁面UI受到影響。而在諸如Angular這樣的Web Components框架里，它會將一個組件內(nèi)的CSS代碼進行編譯，使它只在自己的組件里生效。

同樣，在規(guī)模比較大、技術(shù)棧統(tǒng)一的前端團隊里，會開發(fā)一套統(tǒng)一的編碼規(guī)范。比如“Airbnb CSS/Sass指南”，它里面會定義一些常見風格的寫法，并且會編寫CSS Lint工具。

下面是在上述的指南中提到的CSS命名示例：

        .ListingCard { }
        .ListingCard--featured { }
        .ListingCard__title { }
        .ListingCard__content { }

下面是一些對應(yīng)的解釋：

◎ .ListingCard是一個塊（Block），表示高層次的組件。

◎ .ListingCard__title是一個元素（Element），它屬于．ListingCard的一部分，因此塊是由元素組成的。

◎ .ListingCard--featured是一個修飾符（Modifier），表示這個塊與．ListingCard有著不同的狀態(tài)。

需要注意的是，原版的Airbnb寫法中，“ListingCard”采用全小寫的形式，“l(fā)isting-card”在使用React的JSX語法的時候，變成了駝峰式寫法。

3.5.3 組件命名規(guī)則

同樣，對于團隊而言，組件的命名規(guī)則也需要規(guī)范，特別是對于使用組件化框架的項目而言，有如下幾種不同的命名方式：

◎ 按照功能來命名，比如SideBar就是一個側(cè)邊欄功能的組件。

◎ 按頁面來切分組件，比如NewsItem就是用于展示新聞的組件，它既用于列表頁，又用于相關(guān)新聞頁。

◎ 按上下文來命名組件，如NewsChildItem就是按需要將上一個組件的某個共用元素拆分出來。

不過這些命名方式并不是對立的，它們可能同時存在于一個項目中。