變量命名規範

變量命名規範

前言

好的命名規範可讓你不用每天爲取名字而苦惱、找bug時，更快的定位到bug在哪一個位置

1. 組件的命名和它的功能相配套
2. 不與其餘業務組件重名,讓人一眼就區分
3. 不必定要好聽酷炫,可是實用.讓開發者產生條件反射,看到命名就會想到這個組件的實用場景
4. 易寫易記,短小卻精煉,不繁瑣

BEM

.nav某一塊展現/功能區域 (div)
.nav__item這塊展現/功能區域（div）裏面的某個元素，好比: nav__item
.nav__item--hide/ .nav__item--open 某個元素或者某個塊的狀態

不要加敏感詞彙

我曾經給一個元素取了個class爲advertisement，後來測試人員發現頁面上這塊元素不見了。後來發現360瀏覽器開啓去廣告模式，直接把這個div給刪了。

函數的命名規範

• 拼寫準確 好比個人confirm與confrim 把函數未執行歸咎於代碼邏輯問題

• 使用正常的時態

  • 特別是代碼中狀態的變量或者函數的命名，好比 onXxxxStarted 表示xxx已經啓動了，isConnecting表示正在鏈接。正確的時態能夠給使用者傳遞準確的信息。

• 函數和屬性的命名是有區別的

  • 若是是函數，建議使用動賓結構

動賓結構就是 doSomething，這樣的函數命名含義明確
好比： openFile, setName, addNumber...

- **若是是屬性命名，建議使用定語+名詞**

好比 fileName, maxLength, textSize

• 不要單詞+拼音混合使用
  好比：useJiFen，huKouNumber.. 缺少美感不說，可讀性大幅度下降。
• 謹慎使用縮寫
  除非是約定俗成已經被普遍使用的縮寫，不然老老實實用完整拼寫。典型的反面例子: count->cnt, manager->mgr password->pwd button->btn不管咱們使用eclipse 或者intellij, 都有很好的自動完成功能，名字長一點不要緊的，可讀性更重要。

命名的語義話（動詞、名詞的區分）

Vue 組件命名

Ant.design 的 React 組件是下面這樣的時候，我感受到一種自由的味道。首先，組件名可使用原生 HTML 標籤名，意味着不再用較勁腦汁去規避原生 HTML 標籤了。另外，這些組件都使用了首字母大寫標籤名，使它們很容易地與原生小寫的 HTML 標籤區分。

ReactDOM.render(
  <div>
    <Button type="primary">Primary</Button>
    <Input placeholder="Basic usage" />
    <Select defaultValue=".com" style={{ width: 70 }}>
      <Option value=".com">.com</Option>
      <Option value=".jp">.jp</Option>
      <Option value=".cn">.cn</Option>
      <Option value=".org">.org</Option>
    </Select>
  </div>,
  mountNode
);

基礎組件命名

應用特定樣式和約定的基礎組件 (也就是展現類的、無邏輯的或無狀態的組件) 應該所有以一個特定的前綴開頭，好比 Base、App 或 V。

**反例**
    components/
    |- button.vue
    |- loading.vue
    |- slide.vue
**正例**
    components/
    |- BaseButton.vue
    |- BaseLoading.vue
    |- BaseSlide.vue

單個活躍實例的組件

單個活躍實例的組件應該以 The 前綴命名,以示其惟一性
這不意味着組件只可用於一個單頁面，而是每一個頁面只使用一次。這些組件永遠不接受任何 prop，由於它們是爲你的應用定製的，而不是它們在你的應用中的上下文。若是你發現有必要添加 prop，那就代表這其實是一個可複用的組件，只是目前在每一個頁面裏只使用一次。

**反例**
    components/
    |- SaleManage.vue
    |- ImportExcel.vue
**正例**
    components/
    |- TheSaleManage.vue
    |- TheImportExcel.vue

緊密耦合的組件名

和父組件緊密耦合的子組件應該以父組件的命名爲前綴.若是一個組件只在其父組件某個場景下有意義,這層關係應該體如今組件名上,由於編輯器一般按照首字母順序組織文件.

**反例**
    components/
    |- SearchBox.vue
    |- SearchItem.vue
    |- SearchButton.vue
**正例**
    components/
    |- SearchBox.vue
    |- SearchBoxItem.vue
    |- SearchBoxButton.vue

組件命中的單詞順序

組件名應該以高級別的 (一般是通常化描述的) 單詞開頭，以描述性的修飾詞結尾。

**反例**
    components/
    |- ClearSearchButton.vue
    |- ExcludeFromSearchInput.vue
    |- LaunchOnStartupCheckbox.vue
    |- RunSearchButton.vue
    |- SearchInput.vue
    |- TermsCheckbox.vue
**正例**
    components/
    |- SearchButtonClear.vue
    |- SearchButtonRun.vue
    |- SearchInputQuery.vue
    |- SearchInputExcludeGlob.vue
    |- SettingsCheckboxTerms.vue
    |- SettingsCheckboxLaunchOnStartup.vue

完整單詞的組件名

編輯器中的自動補全已經至關友好,讓書寫長的組件名的代價已經能夠微乎其微,一樣的效率更易於理解,何樂而不爲?

**反例**
    components/
    |- soManage.vue
    |- woManage.vue
**正例**
    components/
    |- SaleOrderManage.vue
    |- WorkOrderManage.vue

prop的大小寫

在聲明時始終採用(camelCase),在模板和 JSX 中應該始終使用( kebab-case)。
單純的遵循每一個語言的約定。在 JavaScript 中更天然的是 camelCase。而在 HTML 中則是 kebab-case。

**反例**
props: {
  'greeting-text': String
}
<WelcomeMessage greetingText="hi"/>
**正例**
props: {
  greetingText: String
}
<WelcomeMessage greeting-text="hi"/>

vue中變量命名規範

變量命名使用主要集中在data和methods中

data中更多的是名詞與狀態布爾類型

名詞：名詞太多，大體分爲複數、後綴加Arr、加Obj之類做爲約定規則
狀態布爾型：

1.表示是否是，用is+ ：如 isEmpty

1. 表示有沒有，用has+... ： 如 hasClass
2. 表示能不能，用can+... ：如 canSubmit
3. 單詞自己的形式（過去式、進行時、未來時）：had開頭、ing、ed結尾等

methods中handle+如下：

dd/remove，添加/移除
add/delete，添加/刪除
insert/delete，插入/刪除
start/stop，開始/中止
begin/end，開始/結束
send/receive，發送/接收
get/set，取出/設置
get/release，獲取/釋放
put/get，放入/取出
up/down，向上/向下
show/hide，顯示/隱藏
open/close，打開/關閉
increment/decrement，增長/減小
lock/unlock，鎖/解鎖
next/previous，下一個/前一個
create/destroy，建立/銷燬
min/max，最小/最大
visible/invisible，可見/不可見
pop/push，出棧/入棧
store/query，存儲/查詢

結合業務：
表單提交：submit、send
表單增刪改查：add、delete、update、search、reset
上傳附件：upload
關閉打開彈窗：open/close
檢查：check

參考連接

CSS命名方式=》BEM
如何定義一個好的變量名
理解CSS命名規範--BEM
聊聊 Vue 組件命名那些事
談談函數的命名規範
vue組件命名指南,不爲取名而糾結