變數（函式）命名最佳實踐

良好命名的必要

1. 程式碼命名是件很頭疼的事情，既要語義化又要簡潔，最終目的為了程式碼的可維護性
2. 合適的命名會使程式碼讀起來優雅流暢、耐人尋味，讓你的程式碼如藝術品一般。比如：
   • promise - 非同步請求資料時，“承諾”一定會回應（成功或失敗），很有畫面感
   • on/off - jquery 中表示監聽和銷燬事件，言簡意賅，方便易用
   • fork - github 的 fork 操作，由“叉子”引申為復刻屬於自己的分叉，形象生動

良好命名的要點

1. 使用能夠表達意圖的名字

   良好命名能夠告訴我們它要做什麼，為什麼存在，以及是如何工作的。選擇能夠表達意圖的名字，有利於我們清楚理解程式含義。相反，名不副實則會誤導閱讀程式碼的人，有時需要打斷點才能判斷出程式的真實功能。

2. 不要怕在選擇名字上花時間

   多嘗試幾種不同的名字，直到足以描述程式含義，不要害怕在命名上花時間。以後閱讀你程式碼的人（包括自己）會因此受益。而且，一個具有清晰描述性的命名，還有助於你在心中理清模組的設計。良好的命名可能需要花費額外的時間，但是從長遠來看，利大於弊。

3. 類名

   類名應該是個名詞或名詞片語，如 Customer、Account、AddressParser。父類的命名應該簡短，子類的應該詳盡，透過形容詞來描述其不同於父類之處，如 SavingsAccount 繼承自 Account。

4. 變數名

   變數名一般應該是名詞。如果是布林變數，應寫成謂詞的形式，如 isEmpty，這樣放到if 語句才便於理解。

5. 方法名

   方法名應該是一個動詞或動詞片語，如 sendMessage()、getUser()、save()。訪問器和設定器應該分別帶有 get 和 set 字首。返回布林值的方法應該字首 is，如 isPostable()。

常用動詞、對仗詞

單詞	語義
add / remove	新增 / 移除
add / delete	新增 / 刪除
able / disable	可用 / 不可用
insert / delete	插入 / 刪除
start / stop	開始 / 停止
begin / end	開始 / 結束
send / receive	傳送 / 接收
get / set	取出 / 設定
get / release	獲取 / 釋放
put / get	放入 / 取出
up / down	向上 / 向下
show / hide	顯示 / 隱藏
open / close	開啟 / 關閉
source / target	源 / 目標
source / destination	源 / 目的地
serialize / unserialize	序列化 / 反序列化
increment / decrement	增加 / 減少
lock / unlock	鎖 / 解鎖
old / new	舊的 / 新的
first / last	第一個 / 最後一個
next / previous	下一個 / 前一個
create / destroy	建立 / 銷燬
min / max	最小 / 最大
visible / invisible	可見 / 不可見
valid / invalid	驗證有效 / 驗證無效
pop / push	出棧 / 入棧
store / query	儲存 / 查詢
reset	重置
format	格式化
validate	驗證
handle	處理
toggle	開關
dispatch	分派

常用名詞

單詞	語義
settings	配置
iterator	迭代器
adapter	介面卡
listener	監聽器
trigger	觸發器
acceptor	接收器
connector	聯結器
dispatcher	分派器
reactor	反應器
executor	執行器
parser	解析器
builder	生成器
handler	處理器
Invoker	呼叫方
validator	驗證器
modle	模型

常用縮寫

建議在 css 中命名多用縮寫，在 js 中根據實際場景選擇是否使用

原始單詞	縮寫
abbreviation	abbr
address	addr
administrator	admin
analysis	anlys
architecture	arch
ascending	asc
attribute	attr
authentication	auth
background	bg
body	bd
business	biz
button	btn
buffer	buf
calculator	calc
column	col
command	cmd
configuration	conf
constant	const
content	cnt
context	cxt
control	ctrl
copy	cp
delete	del
dependency	dep
develop	dev
distribution	dist
document	doc
element	el
environment	env
escape	esc
execute	exec
footer	ft
format	fmt
frequently asked questions	faqs
function	fn
header	hd
information	info
insert	ins
introduction	intro
label	lbl
library	lib
list	ls
lock	lk
manager	mgr
maximum	max
message	msg
millimeter	ml
minimum	min
module	mod
move	mv
multiply	mul
navigation	nav
number	num
option	opt
package	pkg
page	pg
parameter	param
password	pwd
picture	pic
position	pos
property	prop
recommendation	rec
register	reg
remove	rm
repository	repo
request	req
response	resp
screen	scr
second	sec
something	sth
source	src
server	sev
system	sys
table	tbl
telephone	tel
template	tpl
to	2
user	usr
value	val
version	ver
window	win

常用字首

語義	命名
re	再次執行
pre	之前
post	之後
multi	多項
un	否定
per	每項

常用字尾

語義	命名
ed	過去式
ing	進行時
able	具備能力
s / es	名詞複數

佈局相關

語義	命名
佈局	layout
主體內容	container
頭部	header
主要部分	main
側邊欄	sidebar
子容器	sub-
包含塊	-wrap
內部的	-inner
外部的	-outer
行	row
列	column
區域	region / area / section
底部	footer
清除浮動	clearfix
項	item

元件相關

語義	命名
導航	nav
麵包屑	crumb
選單	menu
選項卡	tab
內容	content
列表	list
排行	rank
商標	logo
幻燈片	slide
提示	tip / msg / hint
註冊	register
彈出框	dialog / model
合作伙伴	partner
工具條	toolbar
標語	banner
版權	copyright
評論	comment
皮膚	panel
手風琴	accordion
載入	loading
頭像	avatar
標籤	tag
表格	table
下拉框	dropdown

參考文章