Quantcast
Channel: 刘泓宾博客 - css
Viewing all articles
Browse latest Browse all 7

变量(函数)命名最佳实践

$
0
0

一、良好命名的必要

  1. 代码命名是件很头疼的事情,既要语义化又要简洁,最终目的为了代码的可维护性
  2. 合适的命名会使代码读起来优雅流畅、耐人寻味,让你的代码如艺术品一般。比如:

    • promise - 异步请求数据时,“承诺”一定会回应(成功或失败),很有画面感
    • on/off - jquery 中表示监听和销毁事件,言简意赅,方便易用
    • fork - github 的 fork 操作,由“叉子”引申为复刻属于自己的分叉,形象生动

二、良好命名的要点

1.使用能够表达意图的名字

良好命名能够告诉我们它要做什么,为什么存在,以及是如何工作的。选择能够表达意图的名字,有利于我们清楚理解程序含义。相反,名不副实则会误导阅读代码的人,有时需要打断点才能判断出程序的真实功能。

2.不要怕在选择名字上花时间

多尝试几种不同的名字,直到足以描述程序含义,不要害怕在命名上花时间。以后阅读你代码的人(包括自己)会因此受益。而且,一个具有清晰描述性的命名,还有助于你在心中理清模块的设计。良好的命名可能需要花费额外的时间,但是从长远来看,利大于弊。

3.类名

类名应该是个名词或名词词组,如 Customer、Account、AddressParser。父类的命名应该简短,子类的应该详尽,通过形容词来描述其不同于父类之处,如 SavingsAccount 继承自 Account

4.变量名

变量名一般应该是名词。如果是布尔变量,应写成谓词的形式,如 isEmpty,这样放到if 语句才便于理解。

5.方法名

方法名应该是一个动词或动词词组,如 sendMessage()、getUser()、save()。访问器和设置器应该分别带有 getset 前缀。返回布尔值的方法应该前缀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 中根据实际场景选择是否使用

原始单词缩写
abbreviationabbr
addressaddr
administratoradmin
analysisanlys
architecturearch
ascendingasc
attributeattr
authenticationauth
backgroundbg
bodybd
businessbiz
buttonbtn
bufferbuf
calculatorcalc
columncol
commandcmd
configurationconf
constantconst
contentcnt
contextcxt
controlctrl
copycp
deletedel
dependencydep
developdev
distributiondist
documentdoc
elementel
environmentenv
escapeesc
executeexec
footerft
formatfmt
frequently asked questionsfaqs
functionfn
headerhd
informationinfo
insertins
introductionintro
labellbl
librarylib
listls
locklk
managermgr
maximummax
messagemsg
millimeterml
minimummin
modulemod
movemv
multiplymul
navigationnav
numbernum
optionopt
packagepkg
pagepg
parameterparam
passwordpwd
picturepic
positionpos
propertyprop
recommendationrec
registerreg
removerm
repositoryrepo
requestreq
responseresp
screenscr
secondsec
somethingsth
sourcesrc
serversev
systemsys
tabletbl
telephonetel
templatetpl
to2
userusr
valueval
versionver
windowwin

六、常用前缀

语义命名
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

原文来自:慕课网手记 https://www.imooc.com/article/20287


Viewing all articles
Browse latest Browse all 7

Latest Images

Trending Articles





Latest Images