變量定名範例

媒介

好的定名範例能夠讓你不必每天為取名字而苦惱、找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組件定名指南,不為取名而糾結