背景

在編碼的過程中變量命名是一個容易忽略因痛，又容易犯頭疼的問題。例如在復(fù)雜的頁面布局中 Class 的命名岸更，同樣一個結(jié)構(gòu)在不同的上下文要表達(dá)的意思不一樣鸵膏，是采用通用命名呢？還是采用更具有描述性的業(yè)務(wù)相關(guān)詞匯怎炊？但是呢還需要考慮到樣式的復(fù)用谭企、是否會沖突廓译、被覆蓋、組合命名的長度是否太長等問題债查。

在實際工作中非区，每個人都有自己命名風(fēng)格和慣用詞匯，有的喜歡使用英文簡寫攀操、有的喜歡使用中英文結(jié)合院仿、有的喜歡給變量加數(shù)據(jù)類型前綴秸抚、有的喜歡亂造詞匯速和、有的甚至單詞都拼寫不正確。在看別人代碼的過程中你是否像我一樣無語剥汤，但也只能截圖指出并吐槽二下颠放，有些時候?qū)Ψ讲⒉毁I單，改正吭敢。

每次到換工作的時候就更新博客碰凶，7 月下旬的高溫天氣就適合在家里碼字，這次選擇這個話題的原因是目前在網(wǎng)上還沒有相關(guān)的文章來系統(tǒng)全面的論述有前端關(guān)代碼變量命名的資料鹿驼。Java 有《碼出高效 - 阿里巴巴 Java 開發(fā)手冊 終級版》欲低，而前端這方面目前還是一個空白，雖然有很多代碼規(guī)范畜晰，但是很少有人愿意在這方面去花心思砾莱，更多的是研究框架的源碼、數(shù)據(jù)結(jié)構(gòu)與算法和嘗試新的技術(shù)凄鼻，本人由于大腦開發(fā)有限腊瑟、沒有能力去啃這些骨頭，只好撿一些很少有人去碰觸的簡單不費腦的知識點來考究一二块蚌，希望也能為前端的生態(tài)做出一點小貢獻(xiàn)闰非。

命名規(guī)則

目前流行的經(jīng)典命名規(guī)則有：駝峰命名法、匈牙利命名法峭范、下劃線命名法财松、**帕斯卡命名法**

相關(guān)命名的具體規(guī)則請另行查閱。前端主要涉及到駝峰命名法纱控，React 組件會用到帕斯卡命名法游岳。

然后是變量命名規(guī)則：

• 變量名首字母必須為字母(a-z A-Z)，下劃線(_)其徙，或者美元符號($)開始
• 變量名只能是字母(a-z A-Z)胚迫，數(shù)字(0-9)，下劃線(_)的組合唾那，并且之間不能包含空格访锻，數(shù)字不能放在變量名首位褪尝。
• 變量名不能使用編程語言的保留字。比如在 javascript 中不能使用 true, false, while, case, break 保留字等等期犬。

命名風(fēng)格

這里給出一些在開發(fā)過程中約定成俗的通用規(guī)則河哑，涉及 JavaScript, Typescript, 框架組件, 樣式及目錄。在文章中將使用【強制】來表示必須嚴(yán)格遵守龟虎，【推薦】來表示建議璃谨，【參考】來給出多種命名方式的一種。

1. 【強制】在 JavaScript 中使用駝峰命名法來表示變量鲤妥，不能以下劃線或美元符號作為開始和結(jié)束佳吞。

// 反例
_name
__name
name_
$name
name$

補充：由于受框架和第三方庫及語言限制，不可能完全避免棉安。例如：在 RxJs 中通常命名流的時候是以 變量名 + $ 的形式底扳，在 Class 中定義私有變量時通常以 _ + 變量名 的方式來表示，在 Vue 中內(nèi)部實例方法全部以 $ 開始贡耽，在 AngularJs 中內(nèi)部方法以 $$ 開始衷模，而 lodash 直接使用 _ 作為其別名。

2. 【強制】在代碼中嚴(yán)禁使用拼音與中英文混合的方式阱冶，更不允許直接使用中文的方式。除了一些國際通用的中文名稱滥嘴，要視為英文外木蹬，其它禁止使用。

// 正例
taobao
tmall
shanghai
coupons

// 反例
yhq [優(yōu)惠券]

3. 【強制】類名使用大寫駝峰命名法來表示氏涩，Typescript 中枚舉值使用大寫駝峰命名法表示届囚。

// 正例
class User {}
enum Color {Red = 1, Green, Blue}

class user {}

4. 【強制】常量名全部大寫，單詞間使用下劃線隔開是尖，力求表達(dá)完整清楚意系，不要嫌名字長。
// 正例

GOOGLE_MAP_TOKEN

// 反例

TOKEN

5. 【建議】Typescript 中抽象類使用 Abstract 或 Base 開頭饺汹；異常類使用 Exception 結(jié)尾蛔添。

abstract class BaseDepartment {}

6. 【建議】在 TypeScript 中，類型使用 Type 作后綴兜辞，接口使用 I 作為前綴迎瞧。

type PropsType = {}
interface ILoginProps {}

7. 【建議】 采用有意義的命名，在項目中堅持使用一種變量命名方式逸吵。不要 usr 與 user 混用

// 正例

users
getUserByUid()

// 反例

registerUsr()
copyUserInfo()

8. 【建議】方法名必須準(zhǔn)確表達(dá)該方法的行為凶硅，在多數(shù)情況下以動詞開頭

// 正例

fetchCoupons()
updateToken()
createAccount()
generateUniqueId()

// 反例

getData()

9.【建議】可以使用單詞簡寫，但是只局限于常用詞匯扫皱，注意不同詞匯的簡寫有可能沖突
// 正例

setProps() [props -> property]
selectCouponsDlg() [dlg -> dialog]
readPkg() [pkg -> package]
previewTpl [tpl -> template]

// 反例

vehicleDesc [desc -> description]
vehicleDesc [desc -> descending]
vehicleAesc [aesc -> aescending]
fetchUsr() [usr -> user]

10. 【建議】在 Vue 和 Angular 中足绅，模板語法中所有組件名使用中線命名法捷绑，在 React 中使用大寫駝峰命名法來表示

// Vue
<el-button type="text" @click="toDetail">詳情</el-button>
<custom-component a-prop="prop" />

// Angular
<nz-sider [nzWidth]="200" style="background:#fff"></nz-sider>

// React
<SelectPicture data={this.images} />

11. 【推薦】統(tǒng)一使用中線命名法來命名目錄。

|-- page-header |  |-- PageHeader.vue

12. 【參考】在 Vue 模板語法中組件屬性使用連字符命名法氢妈，在 Vue 中使用 JSX 則屬性使用駝峰命名法粹污，并且文件文以”.jsx”為文件類型。

<Thumbnail
  withHeadPicture={true}
  data={this.selectedImages[0]}
  withDetail={this.enabledDetail}
/>

13. 【強制】在服務(wù)名上使用 Service 后綴

class UserService {}

14. 【建議】在 Vue 中組件文件名采用大寫駝峰命名方式首量，React 同樣如此壮吩，在 Angular 中以使用點和橫杠來分隔文件名，并且符號名后面追加約定的類型后綴加缘。

// Vue
User.vue

// Angular
app.component.ts
hero-list.component.ts
validation.directive.ts
app.module.ts
user-profile.service.ts

// React
User.jsx

15. 【參考】在 React 中使用目錄名稱作為組件名鸭叙，在目錄內(nèi)容直接使用index作為入口，在 Vue 中不可以生百，在 Angular 中可以將index作為模塊的入口递雀，當(dāng)然也可以直接作為組件的入口柄延，但這樣和其整個命名風(fēng)格有所背離蚀浆。**

// Vue
|-- user-info |  |-- UserInfo.vue

// Angular |-- user-info |  |-- user-info.component.ts |  |-- index.ts

// React |-- user-info |  |-- index.jsx

16. 【建議】在工程中文檔使用全大寫命名

README.md
CONTRIBUTORS.md
CHANGELOG.md

17. 【建議】在 Vue 中指令命名使用 filter 作為結(jié)束。所有引用命名使用 ref 作為后綴

formatCouponsFilter
inputRef
selectRef

18. 【強制】測試文件以 .spec 或者 .test 作為命名的一部分搜吧。

selectPicture.spec.js
pageHeader.test.js

19. 【建議】復(fù)數(shù)化變量名稱市俊，而不是命名中包含集合類型名稱。

// 正例
hosts
users
validUsers
hostText
hostJson
portNumber

// 反例
hostList
userList
hostStr
intPort

20. 【建議】在 for 循環(huán)中使用 i, j, k 來作為索引滤奈，使用 n 表示數(shù)量/次數(shù)/限制摆昧，使用 e 表示異常, 使用 evt 表示事件對象, 使用 cb 表示回調(diào)函數(shù)。

for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    for (let k = 0; k < 10; k++) {
      // do something
    }
  }
}

21. 【強制】在解構(gòu)時使用 const 來聲明蜒程。

const [ foo, bar ] = { foo: 1, bar: 2 }

22. 【建議】在樣式中 Class 命名可以使用一些常用簡寫來減少長度绅你。

hd -> head
hdr -> header
ft -> foot
ftr -> footer
pg -> page
btn -> button
txt -> text
el -> element
opt -> option
bd -> border
cl -> clearfix
p -> padding
m -> margin
l -> left
r -> right
t -> top
b -> bottom
x -> horizontal
y -> vertical
px -> padding-left, padding-right
py -> padding-top, padding-bottom
pl -> padding-left
m -> margin
dlg -> dialog
sel -> select
img -> image
lbl -> label
chk -> checkbox
tpl -> template
tbl -> table
hoz -> horizontal
vert -> vertical
ref -> reference
wiz -> wizard
oh -> overflow: hidden

補充：有些簡寫不能單獨使用，終須組合才能使用昭躺，例如: p, m, x, y等單個詞匯忌锯。

23. 【建議】在命名時采用 BEM 的方式，并適當(dāng)變化领炫，具體參見后續(xù)文章偶垮。

.page-header__main
.dialog__content
.gallery-list--wrap
.thumbnail-image--info
.action__btn-group

24. 【建議】樣式 Class 命名使用中線連接，ID 命名采用下劃線連接帝洪。Class 可以同時采用中線和下劃線似舵，但要遵循一定的規(guī)則。

.thumbnail-item-image
#page_header

25. 【參考】樣式 Class 采用組合方式葱峡，通過外層 Class 名來限制作用范圍砚哗。

// 正例
<div class="page-header">
  <div class="page-header__wrap common"></div>
  <div class="page-header__wrap tab"></div>
</div>

// 反例
<div class="page-header">
  <div class="page-header__wrap page-header--common"></div>
  <div class="page-header__wrap page-header--tab"></div>
</div>

補充：這種方式的目的在于減少長度，通過 "主體 + 分類名詞" 的方式砰奕，可以解釋為 “帶分類的主體”蛛芥，但是有一個問題是全局樣式要注意不要使用通用的詞匯來定義樣式泌参，比如 title, action, header, footer, left, right等，不然會引起樣式覆蓋常空。

avaScript 作為前端開發(fā)從業(yè)人員必須掌握的 3 大基礎(chǔ)知識中最重要的一環(huán)沽一，也是平是接觸時間最長、寫得最多的漓糙。在開發(fā)過程中必然會遇到命名的問題铣缠，你會詞窮、糾結(jié)昆禽、惆悵嗎蝗蛙？本文的出現(xiàn)相信能夠解決大部分煩惱，讓你輕松寫出符合規(guī)范醉鳖、易讀捡硅、簡短的代碼。

本文將通過大量的實例來試圖自圓其說盗棵，形成一套系統(tǒng)化壮韭、實用的變量命名理化體系。通過按 JavaScript 的數(shù)據(jù)類型分類著手纹因、細(xì)到一個函數(shù)的參數(shù)命名喷屋，并提供眾多可選方案，并盡量給出其適用范圍和利弊瞭恰。

需要注意的是由于個人寫作水平屯曹、和知識有限，很多方面敘述上有些生硬惊畏，在分類上也沒有什么特別的依據(jù)恶耽，文章也沒有人審稿，所以有什么紕漏還請留言告知颜启。由于寫作倉促偷俭，內(nèi)容可能不全，后續(xù)會隨著工作和學(xué)習(xí)的深入而不斷地調(diào)整和更新农曲。

布爾值(Boolean)命名

Boolean 值是兩種邏輯狀態(tài)的變量社搅，它包含兩個值：真和假。在 JavaScript 中對應(yīng) true 和 false乳规，在實踐中通常使用數(shù)字1表示真值形葬，0來表示假值。

雖然 Boolean 的狀態(tài)只有兩種但是在命名時可以進一步分類暮的，這里給出幾種場景：

場景一：表示可見性笙以、進行中的狀態(tài)

解釋：可見性在通常指頁面中的元素活烙、組件是否顯示（或者組件掛載到 DOM 上溉知，但并不可見）驱显。進行中主要是說明某種狀態(tài)是處于持續(xù)進行中硼瓣。

推薦命名方式為 is + 動詞（現(xiàn)在進行時）/形容詞，同時這種方式也可以直接不寫 is倘感，但是為了更好的作區(qū)分放坏，建議還是加上。

{
  isShow: '是否顯示',
  isVisible: '是否可見',
  isLoading: '是否處于加載中',
  isConnecting: '是否處于連接中',
  isValidating: '正在驗證中',
  isRunning: '正在運行中',
  isListening: '正在監(jiān)聽中'
}

注意： 在 Java 中使用這種方式是有一定副作用的老玛，為什么請移步：為什么阿里巴巴禁止開發(fā)人員使用 “isSuccess” 作為變量名淤年？

場景二：屬性狀態(tài)類

解釋：通常用來描述實體（例如：HTML 標(biāo)簽、組件蜡豹、對象）的功能屬性麸粮，而且定法比較固定。

{
  disabled: '是否禁用',
  editable: '是否可編輯',
  clearable: '是否可清除',
  readonly: '只讀',
  expandable: '是否可展開',
  checked: '是否選中',
  enumberable: '是否可枚舉',
  iterable: '是否可迭代',
  clickable: '是否可點擊',
  draggable: '是否可拖拽'
}

場景三：配置類镜廉、選項類

解釋：主要是指組件功能的開啟與關(guān)閉弄诲，功能屬性的配置。

這是一種比較常見的情景娇唯，目前命名方式也有很多種齐遵，但是歸納起來也不多。推薦使用 withXx 來表示組件在基本功能形態(tài)外的其它功能视乐，比如組件的基礎(chǔ)功能到高級功能的開啟洛搀；使用 enableXx 來表示組件某些功能的開啟敢茁；使用 allowXx 來表示功能屬性的配置佑淀；使用 noXx 用于建議功能使用者這個不建議開啟。

{
  withTab: '是否帶選項卡',
  withoutTab: '不帶選項卡',
  enableFilter: '開啟過濾',
  allownCustomScale: '允許自定義縮放',
  shouldClear: '是否清除',
  canSelectItem: '是否能選中元素',
  noColon: '不顯示label后面的冒號',
  checkJs: '檢查Js',
  emitBOM: 'Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files.'
}

注意：如果嫌分類太多彰檬，可以只使用其中一種方式伸刃，比如在 Typescript 中使用了 allownXx 和 noXx。

除了上面這些帶有特定的前置介詞逢倍、動詞方式外還有一些在語義上帶有疑問性質(zhì)的組合通常也是作為 Boolean 命名的一種參考捧颅。

{
  virtualScroll: '是否啟用虛擬滾動模式',
  unlinkPanels: '在范圍選擇器里取消兩個日期面板之間的聯(lián)動',
  validateEvent: '輸入時是否觸發(fā)表單的校驗'
}

函數(shù)命名

函數(shù)在不同的上下文中的叫法也不一樣，在對象中稱為方法较雕，在類中有構(gòu)造函數(shù)碉哑、在異步處理時有回調(diào)函數(shù)，還有立即執(zhí)行函數(shù)亮蒋、箭頭函數(shù)扣典、柯里函數(shù)等。

函數(shù)命名的方式常常是和業(yè)務(wù)邏輯耦合在一起的慎玖，但是在命名規(guī)則上也有一些常見的模式可以遵循贮尖。

場景一：事件處理

事件處理函數(shù)是前端平時用到最多的，包括瀏覽器原生事件趁怔、異步事件和組件自定義事件湿硝。在寫法上最常見的兩種命名分別為 onXx薪前、onXxClick和handleXx、handleXxChange关斜。

這里如何在二者之間選擇示括，可以從二方面來歸類。一是痢畜，原生事件采用 onXx例诀，而自定義事件使用 handleXx。二是裁着，事件主動監(jiān)聽采用 onXx繁涂，被動處理使用 handleXx。

從實踐及三大主流框架的文檔關(guān)于事件部分的內(nèi)容來看二驰，推薦使用 handleXx 這種方式扔罪，而在表單提交的時候通常采用 onSubmit 函數(shù)。

其實桶雀，在實際項目中很少嚴(yán)格這樣來命名事件處理函數(shù)矿酵，因為這種方式有一定的局限性，比如點擊按鈕打開一個對話框矗积，使用 handleOpenDlg 和 onOpenDlg 都沒有直接寫 openDlg 方便全肮，如果頁面有多個不同功能的對話框采用這種方式會顯得變量名過長，而 handle 和 on 就顯得沒有必要了棘捣，比如 hanldeOpenCommentDlg 就沒有 openCommentDlg 直白辜腺。

下面列出了一些約定成俗的適用例子：

{
  onSubmit: '提交表單',
  handleSizeChange: '處理分頁頁數(shù)改變',
  handlePageChange: '處理分頁每頁大小改變',
  onKeydown: '按下鍵'
}

場景二：異步處理

這里主要是指在寫數(shù)據(jù)層服務(wù)、狀態(tài)管理中的 Action 命名乍恐，以及 Ajax 回調(diào)的命名規(guī)則评疗。

{
  getUsers: '獲取用戶列表',
  fetchToken: '取得Token',
  deleteUser: '刪除用戶',
  removeTag: '移除標(biāo)簽',
  updateUsrInfo: '更新用戶信息',
  addUsr: '添加用戶',
  createAccount: '創(chuàng)建賬戶'
}

命名主要圍繞數(shù)據(jù)的增刪查找來劃分，獲取數(shù)據(jù)通常是 getXx 和 fetchXx茵烈，在作者看來兩者在使用上的區(qū)分在于 getXx 的數(shù)據(jù)來源不一定直接取自異步的原始數(shù)據(jù)百匆，可能是加工處理后的，而 fetchXx 是直接拿的原始數(shù)據(jù)呜投。當(dāng)然在實際項目中并沒有區(qū)分加匈，看個人喜好。

deleteXx 主要用于數(shù)據(jù)刪除仑荐，而 removeXx 在語義上是移除數(shù)據(jù)雕拼，通常情況數(shù)據(jù)是還存在的，只是沒有顯示或數(shù)據(jù)假刪除释漆。updateXx 是指數(shù)據(jù)更新操作悲没，addXx 是在已有列表數(shù)據(jù)中添加新的子項、而createXx 主要是創(chuàng)建新的實例，比如新建一個賬戶示姿。

場景三： 跳轉(zhuǎn)路由

在實際開發(fā)過種中甜橱，比如在使用 react-router/vue-router 時，在模板或者 JSX 中可以直接在標(biāo)簽中寫上目標(biāo)地址栈戳，但有些時候跳轉(zhuǎn)的目標(biāo)地址是經(jīng)過判斷或者組合后的岂傲，并且通過事件觸發(fā)跳轉(zhuǎn)的，這個時候就需要一個函數(shù)來處理子檀，那么在函數(shù)命名的時候可以考慮使用

{
  toTplDetail: '跳轉(zhuǎn)到模板詳情頁面',
  navigateToHome: '導(dǎo)航到首頁',
  jumpHome: '跳轉(zhuǎn)首頁',
  goHome: '跳轉(zhuǎn)首頁',
  redirectToLogin: '重定向到登錄頁',
  switchTab: '切換Tab選項卡',
  backHome: '回到主頁'
}

推薦使用 toXx 和 goXx 這兩種方式镊掖，如果不是在當(dāng)前頁面打開/跳轉(zhuǎn)頁面，可以使用 toBlankTplDetail 或者 goBlankHome 這種方式來進一步語義化褂痰。如果前端頁面是位于 Webview 中亩进，也可以考慮采用 toNativeShare 這種方式來命名。

場景四：框架相關(guān)特定方法

這里主要是針對前端 3 大主流流行框架缩歪，有一些命名是帶有特定標(biāo)識符的归薛，還有就是一些生命周期的命名方式。

{
  formatTimeFilter: '在AngularJs和Vue中匪蝙，通常用于過濾器命名',
  storeCtrl: '用于AngularJs定義控制器方法',
  formatPipe: '用于Angular中主籍，標(biāo)識管道方法',
  $emit: 'Vue中的實例方法',
  $$formatters: 'AngularJs中的內(nèi)置方法',
  beforeCreate: 'Vue的生命周期命名',
  componentWillMount: 'React生命周期命名',
  componentDidMount: 'React生命周期命名',
  afterContentInit: 'Anuglar生命周期命名',
  afterViewChecked: 'Angula生命周期命名',
  httpProvider: 'AngularJs服務(wù)',
  userFactory: '工廠函數(shù)',
  useCallback: 'React鉤子函數(shù)'
}

場景五：數(shù)據(jù)的加工

這類場景在處理列表的時候經(jīng)常會碰到，比如排序逛球、過濾千元、添加額外的字段、根據(jù) ID 和索引獲取特定數(shù)據(jù)等颤绕。

情形一：根據(jù)特定屬性獲取屬性

這里可以參考 DOM 方法的命名幸海，比如：getElememtById()、getElementsByTagName()屋厘、getElementsByClassName() 和 getElementsByName()涕烧，然后提煉出一個比較實用的模板：getXxByYy()。其中 Xx 可以是：element, item, option, data, selection, list, options 以及一些特定上下文的名字汗洒，比如：user(s), menu(s) 等。Yy 相對來說比較固定父款，經(jīng)常用到的就是 id, index, key, value, selected, actived 等溢谤。

除了使用 get，還可以使用 query 和 fetch憨攒，但是需要注意和上面提到的異步數(shù)據(jù)處理作一個區(qū)分世杀。

{
  getItemById: '根據(jù)ID獲取數(shù)據(jù)元素',
  getItemsBySelected: '根據(jù)傳入的已選列表ID來獲取列表全部數(shù)據(jù)',
  queryUserByUid: '根據(jù)UID查詢用戶'
}

注意：在 getItemsBySelected 這種情形下直接寫成 getItemsSelected 更好，但只適用于 Yy 為形容詞的場景

情形二：格式化數(shù)據(jù)

這里的格式化操作包括排序肝集、調(diào)整數(shù)據(jù)結(jié)構(gòu)瞻坝、過濾數(shù)據(jù)、添加屬性杏瞻。命名通常使用 formatXx, convertXx, inverseXx, toggleXx, parseXx, flatXx, 也可以結(jié)合數(shù)組的一些操作方法來命名所刀，比如 sliceXx, substrXx, spliceXx, sortXx, joinXx 等來命名衙荐。

{
  formatDate: '格式化日期',
  convertCurrency: '轉(zhuǎn)換貨幣單位',
  inverseList: '反轉(zhuǎn)數(shù)據(jù)列表',
  toggleAllSelected: '切換所有已選擇數(shù)據(jù)狀態(tài)',
  parseXml: '解析XML數(shù)據(jù)',
  flatSelect: '展開選擇數(shù)據(jù)',
  sortByDesc: '按降序排序'
}

數(shù)組命名

數(shù)組的命名推薦使用復(fù)數(shù)形式來命名，還有就是名詞和具有列表意思的單詞組合浮创。常見的詞匯有 options, list, maps, nodes, entities, collection 等忧吟。

{
  users: '用戶列表',
  userList: '用戶列表',
  tabOptions: '選項卡選項',
  stateMaps: '狀態(tài)映射表',
  selectedNodes: '選中的節(jié)點',
  btnGroup: '按鈕組',
  userEntities: '用戶實體'
}

選項元素、下拉元素命名

主要針對的是在下拉選擇框斩披、選項卡元素溜族、Radio、Checkbox 等數(shù)據(jù)源每個選項數(shù)據(jù)的命名垦沉。常見的詞匯有：title, name, key, label, field, value, id, children, index, nodes 等煌抒。

基中 title/name/key/label/field 作為選項顯示名, value/id 用于唯一標(biāo)識選項，children/nodes 用于包含子節(jié)點內(nèi)容厕倍。如果選項元素的語義很明確的情況下也可以直接使用特定單詞來代替提到的這些泛指的詞匯摧玫，例如菜單列表就可以使用 menu 來作為顯示名。

// 最常見組合

{
  title: '標(biāo)題',
  value: 'ID值'
}

// 組合二
{
  label: '標(biāo)簽名',
  value: 'ID值'
}

// 組合三
{
  name: '元素名',
  id: 'ID值'
}

// 組合四
{
  field: '字段',
  value: '標(biāo)識',
  index: '索引'
}

當(dāng)前選項绑青、激活項命名

適用列表的選中項诬像、菜單選中項、步驟操作的當(dāng)前進行步驟闸婴、頁面路由當(dāng)前路由等的命名坏挠。

{
  activeTab: '當(dāng)前選中選項卡',
  currentPage: '當(dāng)前頁',
  selectedData: '當(dāng)前選項中數(shù)據(jù)',
}

臨時數(shù)據(jù)、比對數(shù)據(jù)命名

針對在代碼中有時會使用一些臨時的變量來存儲數(shù)據(jù)邪乍、保存數(shù)據(jù)快照的場景下的命名降狠。

{
  swapData: '臨時交換數(shù)據(jù)',
  tempData: '臨時數(shù)據(jù)',
  dataSnapshot: '數(shù)據(jù)快照'
}

數(shù)據(jù)循環(huán)語句中變量命名

在使用 for 循環(huán)時，多層嵌套請依次使用 i/j/k庇楞，超過 3 層可以使用 x/y/z榜配，m/n 來命名。使用 forEach, map, filter 等方法時吕晌，每一個元素命名可以根據(jù)不同語境下的特殊名字來命名蛋褥，比如遍歷 menus，那么每個元素可以命名為 menu睛驳，不然則使用上下文無關(guān)的詞匯烙心，比如：item, option, data, key, object 等。至于索引通常使用 index乏沸，如果多層可以使用 index + 數(shù)字 的形式淫茵，也可以直接使用 i/j/k 來作為索引，甚至還可以使用 subIndex/grandIndex 這種方式來命名蹬跃。

對于在使用 for 循環(huán)時數(shù)組長度如果需要單獨命名的話匙瘪，可以使用 xxlength/xxLens，或者 xxCount。

在循環(huán)的過程中通常還會統(tǒng)計某個條件下數(shù)據(jù)匹配的次數(shù)丹喻、重復(fù)元素數(shù)量薄货、記錄中間結(jié)果等情況。這里推薦使用 count 表示次數(shù)驻啤，skipped 表示跳過的數(shù)量菲驴，result 表示結(jié)果。

// for 循環(huán)
for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    for (let k = 0; k < 10; k++) {
      // do something
    }
  }
}

for (let i = 0, lens = this.options.length; i < lens; i++) {
  // do something
}

// forEach
users.forEach((item, index) => {
  // do something
})

menus.forEach((menu, index) => {
  if (menu.children) {
    menu.children.forEach((subMenu, subIndex) => {
      if (subMenu.children) {
        subMenu.children.forEach((grandMenu, grandIndex) => {
          // 一個不常用的示例
        })
      }
    })
  }
})

方法參數(shù)命名

方法的參數(shù)名稱和數(shù)量在不同的方法中各不相同骑冗，但是還是有一些固定的模式可以參考赊瞬，比如在 Vue 中監(jiān)聽屬性變化的新值和舊值；reduce 方法的上一個值贼涩，當(dāng)前值巧涧；回調(diào)函數(shù)的命名、剩余參數(shù)的命名等遥倦。

情形一：新值谤绳、舊值

常見于 Vue 中watch 對像中的屬性監(jiān)聽回調(diào)函數(shù)，推薦使用

{
  oldVal: '舊值',
  newVal: '新值'
}

情形二：上一個值袒哥、下一個值和當(dāng)前值

這種情形見于路由的鉤子方法缩筛，Object.assign 數(shù)據(jù)拷貝的參數(shù)。

// 組合一
{
  from: '從...',
  to: '到...'
}

// 組合二
{
  prev: '上一個...',
  next: '下一個...',
  cur: '當(dāng)前'
}

// 組合三
{
  source: '源',
  target: '目標(biāo)'
}

// 組合四
{
  start: '開始',
  end: '結(jié)束'
}

情形三：異步數(shù)據(jù)返回

用于 Promise 的then方法參數(shù)堡称，await 的返回的 Promise 等瞎抛。可選擇的詞匯有：res, data, json, entity却紧，推薦使用 res桐臊。

demoPromise.then(res => {
  // do something
})

情形四：其它情況

一些使用不多，但是在編程時約定成俗的命名方式晓殊。例如 ch 表示單個字符断凶，str 表示字符串, n 代表次數(shù), reg 表示正則, expr 表示表達(dá)式, lens 表示數(shù)組長度, count 表示數(shù)量, p 表示數(shù)據(jù)的精度, q 表示查詢(query), src 表示數(shù)據(jù)源(source), no 表示數(shù)字(number), rate 表示比率, status 表示狀態(tài), bool 表示布爾值, arr 表示數(shù)組值, obj 表示對象值, x 和 y 表示坐標(biāo)兩軸, func 表示函數(shù), ua表示 User Agent, size 表示大小, unit 表示單位, hoz 表示水平方向, vert 表示垂直方向, radix 表示基數(shù)，根

// 傳入單個字符
function upper(ch) {}

// 數(shù)量重復(fù)
function repeat(str, n)

// 正則
'abab'.replace(reg, 'bb')

事件命名

這里根據(jù) DOM巫俺、nodejs 和一些框架和 UI 組件的事件進行歸納

DOM 事件

這里列舉 DOM 中常見的事件命名

{
  load: '已完成加載',
  unload: '資源正在被卸載',
  beforeunload: '資源即將被卸載',
  error: '失敗時',
  abort: '中止時',
  focus: '元素獲得焦點',
  blur: '元素失去焦點',
  cut: '已經(jīng)剪貼選中的文本內(nèi)容并且復(fù)制到了剪貼板',
  copy: '已經(jīng)把選中的文本內(nèi)容復(fù)制到了剪貼板',
  paste: '從剪貼板復(fù)制的文本內(nèi)容被粘貼',
  resize: '元素重置大小',
  scroll: '滾動事件',
  reset: '重置',
  submit: '表單提交',
  online: '在線',
  offline: '離線',
  open: '打開',
  close: '關(guān)閉',
  connect: '連接',
  start: '開始',
  end: '結(jié)束',
  print: '打印',
  afterprint: '打印機關(guān)閉時觸發(fā)',
  click: '點擊',
  dblclick: '雙擊',
  change: '變動',
  select: '文本被選中被選中',
  keydown/keypress/keyup: '按鍵事件',
  mousemove/mousedown/mouseup/mouseleave/mouseout: '鼠標(biāo)事件',
  touch: '輕按',
  contextmenu: '右鍵點擊 (右鍵菜單顯示前)',
  wheel: '滾輪向任意方向滾動',
  pointer: '指針事件',
  drag/dragstart/dragend/dragenter/dragover/dragleave: '拖放事件',
  drop: '元素在有效釋放目標(biāo)區(qū)上釋放',
  play: '播放',
  pause: '暫停',
  suspend: '掛起',
  complete: '完成',
  seek: '搜索',
  install: '安裝',
  progress: '進行',
  broadcast: '廣播',
  input: '輸入',
  message: '消息',
  valid: '有效',
  zoom: '放大',
  rotate: '旋轉(zhuǎn)',
  scale: '縮放',
  upgrade: '更新',
  ready: '準(zhǔn)備好',
  active: '激活'
}

自定義事件

在封裝組件時提供的事件名除了參考 DOM 事件外认烁，在命名上也可以參考 Github Api 采用 動詞過去時 + Event 的方式, Visual Studio Code Api 的 `on +

{
  assignedEvent: '分配事件',
  closedEvent: '關(guān)閉事件',
  labeledEvent: '標(biāo)簽事件',
  lockedEvent: '鎖事件',
  deployedEvent: '部署事件'
}

此外，很多命名方式可以根據(jù)場景使用 元素 + click 识藤、元素 + change 砚著、select + 范圍等方式靈活運用

{
  selectAll: '選擇所有',
  cellClick: '當(dāng)某個單元格被點擊時會觸發(fā)該事件',
  sortChange: '當(dāng)表格的排序條件發(fā)生變化的時候會觸發(fā)該事件'
}

狀態(tài)管理命名

如果在項目中用到了狀態(tài)管理(redux/vuex/ngrx)，下面給出一些 ActionType痴昧，Mutation, Action 的命名參考。

// Redux 的 actionType
LOAD_SUCCESS
LOAD_FAIL
TOGGLE_SHOW_HISTORY
ON_PLAY
ON_LOAD_START
FETCH_SONGS_REQUEST
RECEIVE_PRODUCTS

// ngrx
const SET_CURRENT_USER = '[User] Set current';
const ADD_THREAD = '[Thread] Add';
const UPDATE_TRIP_SUCCESS = 'Update [Trip] Success';

其它命名

// 日期冠王、時間
// --------------------------------------------------------
sentAt: '發(fā)送時間'
addAt: '添加時間'
updateAt: '更新時間'
startDate: '開始日期'
endDate: '結(jié)束日期'
startTime: '開時時間'
endTime: '結(jié)束時間'

本文主要為廣大前端開發(fā)人員提供一個英文詞匯參考赶撰，便于記憶和查閱。文中內(nèi)容按照特定的方式進行分類便于讀者關(guān)注感興趣的部分。

文中的單詞并沒有給出其詞性豪娜，很多詞性的變化需要讀者具備一定的英語語法知識餐胀，以便在特定情況下靈活運用。

數(shù)字

數(shù)字部分包含英文的數(shù)字表示瘤载、數(shù)字運算符否灾、數(shù)字單位

infinite: 無限的

英文數(shù)字

zero: 零
one: 一
two: 二
three: 三
four: 四
five: 五
six: 六
seven: 七
eight: 八
nine: 九
ten: 十
eleven: 十一
twelve: 十二
thirteen: 十三
fourteen: 十四
fifteen: 十五
sixteen: 十六
seventeen: 十七
eighteen: 十八
nineteen: 十九
twenty: 二十
thirty: 三十
forty: 四十
fifty: 五十
eighty: 八十
ninety: 九十
hundred: 百
thousand: 千
million: 百萬
billion: 十億

計數(shù)單位

pixel: 像素
percent: 百分比

// 中文數(shù)字

ten: 十
hundred: 百
thousand: 千
ten thousand: 萬
billion: 億
trillion: 兆

// 存儲容量

byte: 字節(jié) B
kilobyte: 千字節(jié) KB
megabyte 兆字節(jié) MB
gigabyte 吉字節(jié) GB
trillionbyte 太字節(jié) TB

進制

decimal: 十進制
hex: 十六進制
binary: 二進制
octal: 八進制

運算符

add: 加
subtract: 減
multiply: 乘
divide: 除
and: 與
or: 或
not: 非
intersection: 交集
compose: 并集

鍵盤符號

punctuator: 標(biāo)點符號
identifier: 標(biāo)識符

// Unique graphic character allocations
// 獨特的圖形字符分配
// --------------------------------------------------------
exclamation mark: ! 感嘆號
quotation mark: " 雙引號
percent sign: % 百分號
ampersand: & and符號
apostrophe: ' 撇號
ellipse/apostrophe: …… 省略號
left parenthesis: ( 左括號
right parenthesis: ) 右括號
asterisk: * 星號
plus sign: + 加號
comma: , 逗號
slight-pause mark: 、 頓號
hyphen-minus: - 連字符(-) 或者 減號(-)
full stop: . 句號
middle dot: ? 中間點
interpunct: · 間隔號
hyphenation point: · 連字點
solidus: / 斜線
colon: : 冒號
semicolon: ; 分號
less-than sign: < 小于符號
equals sign: = 等于符號
greater-than sign: > 大于符號
question mark: ? 問號
low line: _ 下劃線
digital 0: 0 數(shù)字 0
latin capital letter A:  A 大寫拉丁字母
latin small letter A: A 小寫拉丁字母

// Alternative graphic character allocations
// 可選的圖形字符分配
// --------------------------------------------------------
number sign: # 數(shù)字符號
pound sign: ￡ 英鎊符號
dollar sign: $ 美元符號
currency sign: ? 貨幣符

// IRV(International Reference Version) graphic character allocations
// IRV圖形字符分配
// --------------------------------------------------------
number sign: # 數(shù)字符號
dollar sign: $ 美元符號
commercial at: @
left square bracket: [ 左方括號
reverse solidus:  反斜線
right square bracket: ] 右方括號
circumflex accent: ^ 抑揚音符號
grave accent: ` 沉音符
left curly bracket: { 左花括號
vertical line: | 垂直線
right curly bracked: } 右花括號
tilde: ~ 波浪符

說明：由于標(biāo)點符號中英文語言環(huán)境同一個符號也不同叫法別名鸣奔，因此上面列舉的詞匯只能說涉及到了部分墨技，并沒有把所有 Dialect(方言) 包含進來。

注：· 符號在不同的上下文中有不同的叫法挎狸，比如“間隔號”扣汪、“中間點”、“項目符號”锨匆、“連子點”等崭别，雖然肉眼看起來沒有什么大的區(qū)別，但是在計算機中的 Unicode 編碼是不一樣的恐锣，更多參見間隔符

時間茅主、日期

下面雖然列舉了很多時間相關(guān)的詞匯，但是在實際前端開發(fā)過程中用到的就年土榴、月诀姚、日和時、分鞭衩、秒学搜、毫秒。

time: 時間
date: 日期
workday: 工作日
weekend: 周末
season: 季節(jié)
anniversary: 周年
century: 世紀(jì)论衍；百年
quarter: 一刻鐘
holiday: 節(jié)日瑞佩；假日
morning: 上午
noon/midday: 中午
afternoon: 下午
night: 晚上
midnight: 半夜
yesterday: 昨天
today: 今天
tomorrow: 明天
clock: 時鐘
now: 現(xiàn)在；如今坯台；立刻
nowadays: 現(xiàn)今炬丸；時下
present: 現(xiàn)在（的）
former: 從前的；前任的
before: 在...之前
after: 在...之后
future: 將來
permanent: 永久的蜒蕾；不變的
period: 周期稠炬；期間；一段時間
during: 在...的期間咪啡；在...期間的某個時候
term: 學(xué)期首启；期限
early: 早期的，提早撤摸；在初期
ahead: 在前的毅桃；領(lǐng)先的褒纲；提前的
later: 后來；稍后钥飞；隨后
start/begin: 開始
end: 結(jié)束
pause: 暫停
suspend: 推遲莺掠；使暫停
timeout: 超時；暫時休息读宙；工間休息
interval: 間隔
overtime: 超時的彻秆；加班的，加班時間

時間

year: 年
month: 月
day: 日
week: 周
hour: 小時
minute: 分
seconds: 秒
millisecond: 毫秒

星期

Monday: 星期一
Tuesday: 星期二
Wednesday: 星期三
Thursday: 星期四
Friday: 星期五
Saturday: 星期六
Sunday: 星期日

月份

January: 一月
February: 二月
March: 三月
April: 四月
May: 五月
June: 六月
July: 七月
August: 八月
September: 九月
October: 十月
November: 十一月
December: 十二月

季節(jié)

spring: 春季
summer: 夏季
autumn: 秋季
winter: 冬季

地理位置

map: 地圖
location: 地理位置
place: 地方
earth: 地球
province: 省
city: 市
district: 區(qū)
area: 區(qū)域结闸、范圍
region: 地區(qū)唇兑、范圍、部位
address: 地址
edges: 邊界
boundary: 邊界膀估；范圍幔亥；分界線
coordinate: 坐標(biāo)
east: 東
south: 南
west: 西
north: 北

方位

direction: 方向
position: 位置
top: 上
right: 右
bottom: 下
left: 左
opposite: 對面的
center: 中間（水平）
middle: 中間（垂直）

排版

abstract: 摘要
annex: 附錄
suffix: 后綴；詞尾
prefix: 前綴
titl: 標(biāo)題
summary: 總結(jié)察纯；概要
specifications: 規(guī)范
headline: 大標(biāo)題帕棉；內(nèi)容提要；欄外標(biāo)題
preface: 前言饼记；引語香伴；序言
chapter: 章；篇具则；回
section: 章節(jié)即纲；部分
abbreviation: 縮寫；縮寫詞

font: 字體
color: 顏色
heading: 標(biāo)題
align: 對齊
align left/align center/align right: 左對齊/居中對齊/右對齊
align top/align middle/align bottom: 頂對齊/垂直居中/底部對齊
text: 文本
zoom: 放大
size: 大小
opacity: 透明度
position: 位置
rotation: 旋轉(zhuǎn)
fill: 填充
shadow: 陰影
blur: 模糊
filter: 濾鏡
radius: 圓角
unite: 合并
subtract: 差集
intersect: 交集
exclude: 排除
join: 合并
insert image: 插入圖片
code: 插入代碼
highlight: 高亮
strikethrough: 刪除線
underscore: 下劃線
italic: 斜體
bold: 粗體
horizontal line: 水平分隔線
attach file: 附加文件
checklist: 清單列表
bullet: 項目符號
indention: 縮進

形狀

figure: 圖形
stroke: 描邊
fill: 填充
border: 邊框
line: 線
rectangle: 矩形
ellipse: 橢圓
sphere: 球
triangle: 三角形
sector: 扇形
annulus: 圓環(huán)
trapezium: 梯形
polygon: 多邊形
arch: 弓形
circle: 圓博肋、循環(huán)低斋、周期
star: 星形、評分
cylinder: 圓柱
circle cone: 圓錐
love: 愛心

語法

grammar: 語法
syntax: 句法
morphology: 詞法
structure: 結(jié)構(gòu)
sentence: 句子
clause: 從句
phrase: 詞組
word: 單詞
adjective: 形容詞
verb: 動詞
noun: 名詞
abstract noun: 抽象名詞
pronouns: 代詞
determiner: 限定詞
conjunction: 連詞
interjection: 感嘆詞
adverb: 副詞
preposition: 介詞匪凡；前置詞
derivative: 派生詞
numeral: 數(shù)詞
auxiliary: 助動詞
tense: 時態(tài)
passive: 被動語態(tài)
gerund: 動名詞
antonym: 反義詞
article: 冠詞
antecedent: 先行詞
regular/irregular verbs: 規(guī)則╱不規(guī)則動詞
transitive/intransitive verbs: 及物╱不及物動詞
subject: 主語
object: 賓語
predicate: 謂語膊畴；表語
adverbial: 狀語
complement: 補語
appositive: 同位語
adjunct: 修飾語
affix: 詞綴
acronym: 首字母縮略詞
abbreviation: 縮寫詞

常用顏色

pink: 粉紅
violet: 紫羅蘭
magenta: 洋紅(玫瑰紅)
purple: 紫色
blue: 純藍(lán)
azure: 蔚藍(lán)色
cyan: 青色
green: 純綠
lime: 閃光綠
ivory: 象牙色
yellow: 純黃
olive: 橄欖
gold: 金色
orange: 橙色
snow: 雪白色
red: 純紅
brown: 棕色
white: 純白
sliver: 銀灰色
gray: 灰色
black: 純黑

JavaScript 語言相關(guān)

type: 數(shù)據(jù)類型
primitive type: 原始類型
object: 對象
array: 數(shù)組
string: 字符串
boolean: 布爾值
symbol: 符號
undefined: 未定義
null: 空
function: 函數(shù)
array function: 箭頭函數(shù)
curried function: 柯里函數(shù)
callback: 回調(diào)函數(shù)
class: 類
module: 模塊
import: 導(dǎo)入
export: 導(dǎo)出
constructor: 構(gòu)造函數(shù)
prototype: 原型
reference: 引用
closure: 閉包
destructure: 解構(gòu)
variable: 變量
property: 屬性
attribute: 特性
iterator: 迭代器
generator: 生成器
yield: 產(chǎn)出
observable: 可觀賽的
hosit: 提升
operator: 運算符
equal: 相等
statement: 語句
block: 塊
comment: 注釋
whitespace: 空格
event: 事件
listener: 監(jiān)聽器
accessor: 訪問器
decorator: 裝飾器
proxy: 代理
reflect: 反射
promise: 承諾
test: 測試
fetch: 拿；取
descriptor: 描述符號
sync: 同步
async: 異步
await: 等候
find: 查找
every: 所有
some: 部分
foreach: 為每一個
map: 遍歷
filter: 過濾
pad: 填充
index: 索引
data: 數(shù)據(jù)
slice: 把...分成部分
splice: 拼接病游，接合
reduce: 歸納
push: 推
pull: 拉
pop: 彈出
split: 分離
join: 連接
flatten: 變平
replace: 替換
search: 搜索
scope: 作用域
timeout: 超時
interval: 間隔
value: 值
define: 定義
math: 數(shù)學(xué)
sum: 求和
configurable: 可配置
enumerable: 可枚舉
writable: 可寫
local: 局部的
global: 全局的
not: 非
or: 或
xor: 異或
and: 且
regexp: 正則表達(dá)式
match: 匹配
pattern: 模式
greed: 貪婪
color: 顏色
rest: 剩余
assign: 賦值
tag: 標(biāo)簽
buffer: 緩沖區(qū)
super: 極好的
extend: 擴展
readonly: 只讀
override: 重寫
dynamic: 動態(tài)的唇跨；多態(tài)
default: 默認(rèn)的
implement: 實現(xiàn)；執(zhí)行
strict: 嚴(yán)格的
deprecate: 不推薦衬衬；反對
tab: 制表符
space: 空格
indentation: 縮進
public: 公共的
private: 私有的
namespace: 命名空間
member: 成員
method: 方法
parameter/argument: 參數(shù)
instance: 實例
ternary: 三目運算
literary: 字面量
template: 模板
character: 字符
markup: 標(biāo)記
syntax: 語法
equality: 相等
conditional statements: 條件判斷語句
true: 是
false: 否
type-checker: 類型檢查
compile-time: 編譯時
lexical scope: 詞法作用域
static scope: 靜態(tài)作用域
loop: 循環(huán)
notation: 符號
operand: 操作數(shù)买猖；運算對象
ordinary object: 普通對象
standard object: 標(biāo)準(zhǔn)對象
built-in object: 內(nèi)置對象
exotic object: 外來對象
last-in/first-out manner: 后進先出的方式
reserved word: 保留單詞
signature: 簽名
enumerable: 可枚舉的
iterable: 可迭代的

常用簡寫

簡寫后面用 ”*“ 號標(biāo)注的為推薦使用簡寫，可以放心大膽在項目中使用滋尉。

hd -> head
hdr -> header
bd -> body
ft -> foot
ftr -> footer
tbl -> table
el -> element **
cnt -> content
cmp -> component
btn -> button **
sel -> select *
opt -> option *
chk -> checkbox
lbl -> label
wiz -> wizard *
bg -> background **
cur -> current **
prev -> previous **
idx -> index
len -> length **
pg -> page
vm -> view page
repo -> repository *
org -> organization *
ref -> reference *
res -> response **
req -> request **
msg -> message **
str -> string **
ch -> chracter *
lbl -> label
img -> image **
buf -> buffer *
usr -> user
args -> arguments *
no -> number
err -> error *
tmp/temp -> temporary **
rst -> result
bdr -> border
fn/func -> function **
nav -> navigator *
val -> value
params -> parameter *
dev -> development *
prod -> product *
util -> utility *
hoc -> high order component *
cb -> callback *
lib -> library *
prop(s) -> property(ies) *
attr(s) -> attribute(s) *
arr -> array *
conf -> config *
dlg -> dialog
e/ev/evt -> event **
pkg -> package *
tpl -> template *
addr -> address
desc -> descending
aesc -> aescending
expr -> expression **
src -> source **
hoz -> horizontal
vert -> vertical
abbr -> abbreviate
env -> envirnment **
sec -> seconds *
ms -> millisecond **
bool -> boolean *
dbl -> double

常用詞匯及其變體

active -> inactive -> deactive
load -> preload -> unload
coming -> incoming
with -> without
sync -> async
allowed -> unallowed
going -> ingoing -> ongoing
online -> offline
visible -> invisible
finite -> infinite
able -> enabled -> unable -> disabled
login -> logout
singin -> signout
check -> uncheck
select -> unselect
inlet -> outlet
regular -> irregular
implicit -> explicit
import -> export
micro -> macro

專用名詞縮寫

GUI -> Graphical User Interface 圖形用戶界面
OEM -> Original Equipment manufacturer 原始設(shè)備制造商
CMS -> Content Manager System 內(nèi)容管理系統(tǒng)
PWA -> Progressive Web App 漸近式Web應(yīng)用
SDK -> Software Development Kit 軟件開發(fā)工具包
IDE -> Integrated Development Envirnment 集成開發(fā)環(huán)境
SOA -> Service-Oriented Architecture 面向服務(wù)架構(gòu)
ORM -> Object Relation Mapping 對象關(guān)系映射
MVC -> Model View Controller
OOP -> Object Oriented programing 面向?qū)ο缶幊?BEM -> Block Element Modifier 塊-元素-修飾符
BFC -> Block Format Context
SKU -> Stock Keeping Unit 庫存單位
AJAX -> Asynchronous JavaScript and
HOC -> High Order Component 高階組件
I18N -> Internationalization 國際化
GUID -> Globally Unique Identifier 全球唯一標(biāo)識符

UI 組件相關(guān)

參考 Element玉控、Antd、Bootstrap 和 Material Design

// 通用

Head: 標(biāo)題
Label: 標(biāo)簽
Button: 按鈕
Icon: 圖標(biāo)
Link: 文字鏈接
Input: 輸入框
Checkbox: 篩選框
Radio: 單選框
Select: 下拉選擇框
Switch: 開關(guān)
Upload: 文件上傳
Form: 表單
Radio: 音頻
Video: 視頻
Canvas: 畫布

// 布局

Layout: 布局
Grid: 網(wǎng)格狮惜；柵格
Container: 布局容器

// 導(dǎo)航

Affix: 固釘
Breadcrumb: 面包屑
Dropdown: 下拉菜單
Menu: 導(dǎo)航菜單
Pagination: 分頁
PageHeader: 頁頭
Steps: 步驟條
NavMenu: 導(dǎo)航菜單
Minimap: 小地圖

// 數(shù)據(jù)錄入

AutoComplete: 自動完成
Cascader: 級聯(lián)選擇框
DatePicker: 日期選擇框
TimePicker: 時間選擇框
DateRangePicker: 日期區(qū)間選擇框
ColorPicker: 顏色選擇框
InputNumber: 數(shù)字輸入框
Mentions: 提及
Rate: 評分
Slider: 滑動輸入條奸远；滑塊
TreeSelect: 樹選擇器
Transfer: 穿梭框
Wizard: 向?qū)?

// 數(shù)據(jù)展示

Avatar: 頭像
Badge: 徽標(biāo)數(shù)
Comment: 評論
Collapse: 折疊面板
Carousel: 走馬燈既棺；輪播
Card: 卡片
Panel: 面板
Calender: 日歷
Descriptions: 描述列表
Empty: 空狀態(tài)
List: 列表
Popover: 氣泡卡片
Statistic: 統(tǒng)計數(shù)值
Tree: 樹形控件
Tooltip: 文字提示
Timeline: 時間軸
Tag: 標(biāo)簽
Tabs: 標(biāo)簽頁
InfiniteScroll: 無限滾動
Chips: 芯片
Dialog: 對話框

// 反饋

Alert: 警告提示
Drawer: 抽屜
Modal: 對話框
Message: 全局提示
MessageBox: 彈框
Notification: 通知提醒框
Progress: 進度條
Popconfirm: 氣泡確認(rèn)框
Result: 結(jié)果
Spin: 加載中
Skeleton: 骨架屏

// 其它

Anchor: 錨點
BackTop: 回到頂部
Divider: 分隔線
ConfigProvider: 全局化配置

// Button 尺寸

// --------------------------------------------------------
mini: 微型的讽挟；袖珍的
tiny: 微小的懒叛；很少的
micro: 極小的；基本的耽梅；微小的薛窥；微觀的
small: 小
medium: 中等
large: 大
fixed: 固定寬度的

// Button 外觀

// --------------------------------------------------------
default: 默認(rèn)的
plain: 樸素的
primary: 主要的
info: 信息的
warning: 警告的
error: 錯誤的
danger: 危險的
gray: 灰色的
link: 帶鏈接的
outline: 帶輪廓的
dashed: 帶虛線的
round: 帶圓角的
circle: 圓形的
ghost: 幽靈的

// 表單控件驗證狀態(tài)

// --------------------------------------------------------
valid: 有效的
invalid: 無效的
pending: 驗證中
required: 必填的
dirty: 臟的
pristine: 干凈的

代碼常用詞匯

下面列出開發(fā)過種中經(jīng)常使用的動詞、名詞眼姐、介詞诅迷、形容詞。這些詞匯通持谄欤可以相互組合在特定上下文中適當(dāng)變動可以覆蓋工作中的絕大多數(shù)場景罢杉。

// 動詞

on: 監(jiān)聽、正在進行中
get: 取
set: 設(shè)置
fetch: 獲取
find: 查找
add: 添加
create: 創(chuàng)建
remove: 移除
delete: 刪除
update: 更新
upgrade: 升級
downgrade: 使降級
sync: 同步
toggle: 切換
pull: 拉
push: 推
show: 顯示
hide: 隱藏
resolve: 解析贡歧；分解
parse: 解析
lock: 鎖定
link: 連接
merge: 合并
close: 關(guān)閉
clone: 克隆
clear: 清除
format: 格式化
convert: 轉(zhuǎn)變
cancel: 取消
accept: 承認(rèn)滩租；同意
check: 檢查，核對
concat: 合并數(shù)組利朵、字符串
join: 合并
split: 分開
spread: 展開
search: 搜索
sort: 排序
assign: 分配律想，指定
handle: 處理
trigger: 觸發(fā)
login: 登入
logout: 登出
register: 注冊
sign: 簽名
throw: 拋出
load: 加載
preload: 加載
copy: 復(fù)制
paste: 粘貼
connect: 連接
change: 改變
select: 選擇
validate: 驗證
submit: 表單提交
commit: 提交
match: 匹配
scroll: 滾動
write: 寫
read: 讀
enable: 啟用
disable: 禁用
limit: 限制
bootstrap: 啟動
init: 初始化
install: 加載
upload: 上傳
inject: 注入
provide: 提供
exit: 退出
access: 訪問
flush: 刷新/使暴露
refresh: 刷新
release: 發(fā)布
preview: 預(yù)覽；試映
publish: 出版绍弟；發(fā)行
navigate: 導(dǎo)航技即；瀏覽
redirect: 重定向
back: 返回
switch: 切換
launch: 加載
browse/visit: 瀏覽
append: 追加
insert: 插入
swap: 交換
map: 遍歷
extract: 提取樟遣；選取
provide: 提供
inject: 注入
observe: 觀察
render: 渲染
debug: 調(diào)試
align: 對齊
popup: 彈出
transfer: 轉(zhuǎn)讓而叼、遷移
attach: 附加
build: 構(gòu)建
diagnose: 診斷，斷定
ignore: 忽略
deploy: 部署豹悬；展開
send/sent: 送葵陵；寄出
defer: 推遲
delegate: 委托
destroy: 銷毀
dispatch: 派發(fā)；分派
trace: 追蹤

// 名詞

avatar: 頭像
brand: 品牌
record: 記錄
issue: 問題
project: 項目
repo(repository): 倉庫屿衅；知識庫
ecosystem: 生態(tài)系統(tǒng)
assets: 資產(chǎn)
resource: 資源
toolkit: 工具包埃难、工具箱
workbench: 工作臺
item: 項目；條款
option: 選項
field: 字段
type: 類型
status: 狀態(tài)
property: 屬性
attribute: 特性
parameter/argument: 參數(shù)
length: 長度
size: 尺寸
shape: 形狀
label: 標(biāo)簽
value: 值
view: 視圖
page: 頁面
env(envirnment): 環(huán)境
context: 上下文
count: 總數(shù)涤久；計數(shù)
amount: 數(shù)量涡尘；數(shù)額
sum: 合計；金額
num(number): 號碼
total: 總數(shù)
money: 錢响迂；貨幣
filter: 過濾器
pipe: 管道
stream: 流
buffer: 緩沖器
comment: 評論
ref(reference): 引用
res(response): 響應(yīng)
req(request): 請求
entity: 實體
event: 事件
setup 設(shè)置
prefix 前綴
suffix 后綴
wizard 小部件
model 模型
flag 標(biāo)志
factory 工廠
service 服務(wù)
constant: 常量
var(iable): 變量
collection: 集合
array: 數(shù)組
raw: 原始值
platform 平臺
capital: 大寫字母
uppercase/lowercase: 大/小寫
letter: 字母
entrance: 入口
path: 路徑
route: 路由
router: 路由器
config: 配置
middleware: 中間件
success: 成功
error: 錯誤
fail(ure): 失敗
frontend: 前端
backend: 后端
local: 本地
sever: 服務(wù)器
production: 線上考抄；產(chǎn)品
border: 邊框
outline: 輪廓
precision: 精度
separator: 分隔符
mask: 遮罩
metadata: 元數(shù)據(jù)
location: 位置
sandbox: 沙箱
scope: 作用域
queue: 隊列
heap: 堆
notice: 通知
bubble: 氣泡
hooks: 鉤子
cell: 單元格
row: 行
column: 列
group: 組
cursor: 游標(biāo)
pattern: 模式
abstract: 抽象
compose: 復(fù)合；并集
callback: 回調(diào)函數(shù)
priority: 優(yōu)先級
grade/rank/hierarchy 等級蔗彤、層級
table,chart, graph, diagram: 表格川梅，圖表疯兼，曲線圖，圖表
system: 系統(tǒng)贫途、體系
guards: 保障吧彪、守衛(wèi)
segment/fragment: 片段、碎片
shaking: 抖動
mix: 混淆
dependence: 依賴
injection: 注入
markup: 標(biāo)記
email: 電子郵件
version: 版本
detail: 詳情
stub: 存根
score: 成績
breakpoint: 斷點
record: 記錄
pointer: 指針
thumbnail: 縮略圖
gallery: 畫廊
viewport: 視口
strategy: 策略
outlet: 出口
inlet: 入口
gist: 主旨丢早；要點姨裸；依據(jù)
licence: 許可證
copyright: 版權(quán)
order: 命令
input: 輸入
output: 輸出
effect: 影響；效果怨酝；作用
position: 位置
corner: 角落
animation: 動畫
dot: 點
palette: 調(diào)色板傀缩；顏料
album: 相冊
photo: 照片
host: 主機
session: 會話
cookie: 餅干；小甜點
domain: 域名
certificates: 證書
coercion: 強制
payload: 載物
thread: 線程
process: 進程
timestamp: 時間綴
conflicts: 沖突
terminal: 終端
portrait: 肖像
auxiliary: 附屬物
backup: 備份
bitmap: 位圖
breakpoint: 斷點
concurrency: 并發(fā)
lock: 鎖
digest: 摘要
exception: 異常
genericity: 泛型
handle: 句柄
macro: 宏
manifest: 清單
modifier: 修飾字农猬；修飾符
override: 覆寫
overload: 重載
procedure: 過程
protocol: 協(xié)議
recursion: 遞歸
marquee: 跑馬燈

// 形容詞
native: 原生的
hybrid: 混合的
basic: 基礎(chǔ)的
complex: 復(fù)雜的
empty: 空的
online: 在線的
offline: 離線的
public: 公共的
private: 私有的
static: 靜態(tài)的
dynamic: 動態(tài)的
shared: 共享的
safe: 安全的
relative: 相對的
absolute: 絕對的
original: 原始的
infinite: 無限的
partial: 局部的
ascending: 按升序
descending: 按降序
primary: 原始的赡艰，第一的
secondary: 第二的
tertiary: 第三的
deprecated: 棄用的
concrete: 具體的
abstract: 抽象的
explicit: 顯示的；明確的
implicit: 含蓄的斤葱；暗示的
mutable: 可變的

業(yè)務(wù)常用詞匯

電商

coupons: 優(yōu)惠券
couponsCode: 優(yōu)惠碼
discount: 折扣
points: 積分
memeber: 會員
vip: 會員
membership: 會員
delivery: 運費
domain: 域名
dashboard: 儀表盤
store: 門店
shop: 店鋪
product: 產(chǎn)品
goods: 商品
order: 訂單
setting: 設(shè)置
manager: 管理
channel: 渠道
notFound: 404頁面
feedback: 反饋
scratch: 刮刮卡
client: 客戶端
market: 市場
promotion: 促銷
popularize: 推廣
tool: 工具
banner: 廣告
friendlink：友情鏈接
partner： 合作伙伴
vote: 投票

技術(shù)文章閱讀常用詞匯

// 副詞

approximately: 大約慷垮；近似地；近于
indirectly: 間接地苦掘；迂回地
inevitably:不可避免地换帜；必然地
repeatedly: 反復(fù)地；再三地
defiantly: 挑戰(zhàn)地鹤啡；對抗地

// 形容詞

general: 一般的惯驼；普通的；大體的
partial: 局部的
well-formed：符合語法規(guī)則的
appropriate: 適當(dāng)?shù)牡莨澹磺‘?dāng)?shù)乃钌缓线m的
reasonable: 合理的；公道的
non-trivial: 非平凡的
conditional: 有條件的抖部；假定的
disheartened: 沮喪的说贝；灰心的
unmotivated: 對（工作等）不感興趣的；沒有理由的
terse: 簡潔的慎颗；精練的乡恕；扼要的
chaotic: 混沌的；混亂的俯萎，無秩序的
effective: 有效的
discursive: 離題的傲宜；東拉西扯的；無層次的
impressive: 感人的夫啊；令人欽佩的函卒；給人以深刻印象的
error-prone: 于出錯的
weird: 怪異的；不可思議的撇眯；超自然的
hypothetical: 假設(shè)的报嵌；假定的
tricky:  狡猾的虱咧；機警的；棘手的

事件

Onmouseover 鼠標(biāo)移到目標(biāo)上锚国；鼠標(biāo)移進時
Onclick 鼠標(biāo)單擊
Onmouseout 鼠標(biāo)移出時
onkeyup 鍵抬起時
onkeydown 鍵按下時
blur vt. 涂污腕巡；使…模糊不清；使暗淡跷叉；玷污n. 污跡逸雹；模糊不清的事物
onblur 失去焦點,數(shù)組常用方法
push 推動，增加云挟；對…施加壓力，逼迫转质；按园欣；說服
filter “n. 濾波器；[化工] 過濾器休蟹；篩選沸枯；濾光器vt. 過濾；滲透赂弓；用過濾法除”

運算單詞

plus（表示運算）加;加的; 正的; 附加的; 比所示數(shù)量多的;
minus（表示運算）減去; 減號; 負(fù)號; 不利; 不足;
multiply 乘; （使）相乘; （使）增加; （使）繁殖;
quotient 商绑榴，商數(shù)，系數(shù)
divide(by) 分開盈魁，除

DOM操作部分
replace vt. 取代翔怎，代替；替換杨耙，更換赤套；歸還，償還珊膜；把…放回原處
Node n. 節(jié)點容握；瘤；[數(shù)] 叉點
Element n. 元素；要素；原理蚀同；成分阻课；自然環(huán)境
parentNode 父節(jié)點
childNodes 子節(jié)點
nextSibling 下一個兄弟節(jié)點
previous adj.以前的; 先前的; 過早的; （時間上） 稍前的;
previousSibling 上一個兄弟節(jié)點
previousElementSibling 上一個兄弟元素
nextElementSibling 下一個兄弟元素
firstChild 第一個子節(jié)點
lastChild 最后一個子節(jié)點
firstElementChild 第一個子元素
lastElementChild 最后個子元素
innerText 底層模板, 內(nèi)部的純文本, 元素文本
append vt.附加; 添加; 貼上; 簽（名）
appendChild 方法, 添加節(jié)點方法
removeChild 去除節(jié)點方法
createElement 創(chuàng)建元素
attribute n. 屬性；特質(zhì)
setAttribute 設(shè)置屬性
getAttribute 獲取屬性
removeAttribute 移除屬性

熟悉部分

area 地區(qū); 區(qū)域潜腻，范圍; 面積，平地; 領(lǐng)域;
perimeter <數(shù)>周長; 周圍，邊界;
meter “米, 公尺#計量器, 儀表; 計量官; 計量監(jiān)督員”
radius 半徑（距離）; 用半徑度量的圓形面積; 半徑范圍; 橈骨;
difference 差別币旧，差異; [數(shù)]差數(shù)，差額; 意見分歧; 特色;
product 產(chǎn)品; 結(jié)果; 乘積; 作品;
destination 目的猿妈，目標(biāo); 目的地吹菱，終點;
Object n. 目標(biāo)巍虫；物體；客體鳍刷；賓語
Model n. 模型占遥；典型；模范输瓜；模特兒瓦胎；樣式
instance n. 實例；情況尤揣；建議
inner adj. 內(nèi)部的搔啊；內(nèi)心的；精神的
transparent adj. 透明的北戏；顯然的负芋；坦率的；易懂的

了解部分

selected 挑選出來的
checked 檢查;選中的嗜愈；
current 現(xiàn)在的旧蛾；流通的，通用的蠕嫁；最近的锨天；草寫的

常用數(shù)組方法

sort vt. 將…分類；將…排序剃毒；挑選出某物
shift 改變; 去掉; 擺脫掉; 換擋;
unshift 松開打字機或鍵盤的字型變換鍵;方法將元素插入到一個數(shù)組的開始部分
reverse 顛倒病袄；倒轉(zhuǎn)
concat 合并多個數(shù)組；合并多個字符串
slice 切成片; 切下; 劃分;
splice 拼接迟赃；接合陪拘；使結(jié)婚
source n.根源，本源; 源頭纤壁，水源; 原因; 提供消息的人; 英 [s??s]  美 [s?rs]

常用的日期函數(shù)

getTime 取得系統(tǒng)時間
getMilliseconds 取得 Date 對象中的毫秒字段
getSeconds 返回時間的秒
getMinutes 返回時間的分鐘數(shù)
getHours 返回時間的小時字段
getDay 返回一周的某一天數(shù)字
getDate 返回月份的某一天
getMonth 取得 Date 對象中表示月份的數(shù)字
getFullYear 返回當(dāng)前Date對象中的年份值

常用方法

trim 會從一個字符串的兩端刪除空白字符
split 用于把一個字符串分割成字符串?dāng)?shù)組
forEach 為每一個遍歷左刽，循環(huán)
map 地圖，天體圖; 類似地圖的事物;
indexOf 查找字符或者子串第一次出現(xiàn)的地方,
lastIndexOf 查找字符或者子串是后一次出現(xiàn)的地方
every 每個; 每; 所有可能的; 充足的;
some 一些; 某個; 大約; 相當(dāng)多的;
ceil vt. 裝天花板酌媒，裝船內(nèi)格子板;

BOM

window n. 窗口; 窗欠痴，窗戶;
setTimeout 法用于在指定的毫秒數(shù)后調(diào)

用函數(shù)或計算表達(dá)式

interval n. 間隔; 幕間休息; （數(shù)學(xué)） 區(qū)間;
setInterval 設(shè)置時間間隔, 按照指定時間周期調(diào)用函數(shù)或計算表達(dá)式, 循環(huán)
history n. 歷史，歷史學(xué)秒咨；歷史記錄喇辽；來歷
location n. 定位; 位置，場所; 外景（拍攝地）;

掌握部分

path n. 小路雨席，路; 路線菩咨，路程; 〈比喻〉（人生的）道路; （思想，行為，生活的） 途徑;
port n. 港口; （事情的） 意義; （計算機與其他設(shè)備的） 接口; （船抽米、飛機等的） 左舷;
protocol n. 禮儀; （外交條約的） 草案; （數(shù)據(jù)傳遞的） 協(xié)議; 科學(xué)實驗報告（或計劃）;
navigator n. 領(lǐng)航員; 航海家特占，航行者，航海者; （船舶云茸，飛機的） 駕駛員; 一個瀏覽器的品牌;
agent n. 代理人; 代理商; 特工; 藥劑; 英
useragent 用戶代理, 代理程式識別碼
back vt. 使后退; 支持; 加背書于; 下賭注于;vi. 后退; 倒退;
offset vt. 抵消; 補償; （為了比較的目的而）把…并列（或并置） ; 為（管道等）裝支管;
step n. 步是目，腳步; 步驟，手段; 步調(diào); 級別;
animate vt. 使有生氣; 驅(qū)動; 使栩栩如生地動作; 賦予…以生命;
Extensible adj. 可展開的标捺，可擴張的懊纳，可延長的;

js API

client n. 顧客; 當(dāng)事人; 訴訟委托人; [計算機] 客戶端;
resize vt. 調(diào)整大小
offsetHeight 網(wǎng)頁內(nèi)容實際高度
math n. 數(shù)學(xué)
getComputedStyle 可以獲取當(dāng)前元素所有最終

使用的 CSS 屬性值

常用部分

compute vt. 計算；估算亡容；用計算機計算
computed v. 計算嗤疯，估算
computer n. （電子） 計算機，電腦;
floor n. 地板萍倡，地面身弊；樓層；基底列敲；議員席
mode n. 模式；方式帖汞；風(fēng)格戴而；時尚 英
compatMode 兼容模式；
document.compatMode(判斷當(dāng)前瀏覽器采用的渲染方式)
responsive adj.應(yīng)答的翩蘸，響應(yīng)的; 反應(yīng)靈敏的; 共鳴的; 易反應(yīng)的;
tablet 藥片,小塊 .碑所意，匾; 便箋簿,平板電腦
wrap n. 膝毯，披肩催首，圍巾扶踊，圍脖，頭巾郎任，罩衫秧耗，外套，大衣; 包裝紙;
slide n. 滑動舶治；幻燈片分井；滑梯；雪崩 英
assign vt. 分配霉猛；指派尺锚；計 賦值 英[?
insert vt. 插入; 嵌入; （在文章中） 添加; 加
before prep. 在…之前; 先于，優(yōu)于; 當(dāng)著…的面; 與其…;