把一件平凡的事情做好,很平凡。把一件平凡的事情坚持的做好,很不平凡。
1.前言
如果说计算机科学只存在两个难题:缓存失效和命名。那么我就觉得命名的难点只有两个:词汇量和坚持贯彻执行制定的规范。
最近在知乎上看到这个:作为程序员,有没有让你感到既无语又崩溃的程序命名?。顿时感慨万千,因为命名对于程序员来说是就是一个难题,有时候因为命名,可能会引起别人的误导,疑惑等,对开发效率,项目的质量影响可大可小。今天,也分享下最近自己在使用的命名习惯,当然只是个人习惯。更希望能在评论区看到大家推荐的命名方式,互相学习,交流。
关于整篇内容,主要提及两个:1.如何写出让别人容易读懂的命名
2.针对不同的对象,使用对象命名的格式
2.盘点那些难以读懂的命名
首先,先盘点下有哪些命名的一些方式是很难让别人读懂的。这些情况,大家看到就应该在开发上尽量避免下。
2-1.单词拼写错误
举个例子
//提交表单(把 Form 写成了 From )
submitFrom(){...}
之前写文章也有说过,单词拼写正确可以说是一个底线了。如果单词拼写错误,比如 form 和 from 都是正确的单词,但完全不一样的意思,如果把 form 写成 from ,以后读代码的人(也可能是你自己),很有可能会懵逼。
2-2.中英文混用
单词拼写错误会误导别人,中英文混用这个命名方式就可以说让人云里雾里的感觉,不会误导,只会看不懂。
比如下面
let chanpinList=[];
这个变量名,一开始不知道是什么,注释也没有,完全懵逼。后来看了需求,才知道这个的意思是:产品列表。
2-3.以1-9,a-z命名
这个情况相信大家都会遇到过,比如页面上有几个按钮,有人命名成 btn1,btn2,btn3,btn4...。或者 btnA,btnB,btnC,btnD。这样的命名看似简单,但实际上从这些命名里面读取不到任何信息,以后会可能会痛苦些。
2-4.混用命名格式
这个可以说没那么可恨,但是看着就别扭,比如表示评论列表,有地方这样命名:comments,另一个地方这样命名: comment-list,还有这样命名: commentList。几种规范混在一起,就感觉不规范了。
还用一种虽然一般不会出现的情况,也遇见了。比如一个地方有添加供应商的按钮,命名是:addSupplier 。在另一个地方也有相同的功能按钮,完全一样,结果命名是:addSupplierInfo 。当时就以为这两个不是同一个功能,造成了误会。
2-5.强制中文拼音命名
有些名词,被中国人创造出来(淘宝-taobao,微博-weibo),没有英文翻译的。就可以用中文拼音命名,其他的都建议用英文。
但是偏偏有时候就算有英文的单词,有些人还是用中文拼音命名,比如一个文章列表,很多人就是没用 articleList,直接写 wenzhangliebiao。但是看的时候,一定会懵逼一会。
2-6.强制简写
简介虽然可以让命名看着更加的简洁,但是有时却会遇上强制简写的命名,比如一个函数是提交用户评论信息的功能。原本以为是:handleCommentSubmit/submitComment/publishComment。结果后来一看--tjyhpl。强制简写还是用拼音的简写,后来让他改一下,改成了ac。后来一问才知道他想表达的意思是 addComment ,当时差点动手了。
2-7.单复数不分
这个情况不算恶劣,只算是一种规范吧,之前有分别有两个操作函数,一个是下载全部订单数据,一个是下载当前订单数据。但是两个函数的命名,一个是downloadOrderData,另一个是downloadOrder。这样也产生了一点懵逼感。
面对这样的情况,建议还是区分下单复数,downloadOrder,downloadOrderAll/downloadOrderList。区分了单复数的命名,如果有返回值,也可以让别人大概知道,单数可能就是返回单个记录,复数可能返回一个数组。
2-8.正反义词错用
这个情况同上,不算是恶劣,只能算是不规范。比如:分别有两个操作函数一个是显示弹窗,一个是关闭弹窗。结果命名上面,一个是 showEditDialog 。另一个是 closeEditDialog 。
上面的案例,show 和 close ,一个是显示,一个是关闭,显然不是正反义词。应该出现的姿势是,showEditDialog 和 hideEditDialog ,或者 openEditDialog 和 closeEditDialog
2-9.为所欲为的命名
还有其它的搞笑命名,在知乎上面看到的情况,别人遇到的情况。大家移步到知乎吧,这个不重复太多。
3.命名相关格式
说完了命名第一个,命名单词应该正确的书写之后。再来说下命名的相关格式在说自己的命名实例之前,先说下不同的命名对象,命名方式是不一样的。具体如下:
待命名对象 | 推荐名称 |
---|---|
图片 | 小写字母,‘-’或者‘_’ 分割 |
css(class,id) | ‘-’ 分割 |
文件,变量 | 小驼峰命名 |
js类(class) | 大驼峰命名 |
常量 | 大写字母,‘_’ 分割 |
临时变量,私有变量 | ‘_’ 开头,驼峰命名 |
4.HTML命名
在说命名 HTML 命名之前,先说下布局的三个概念:模块( module )和元件( unit )
模块:各种常见的网页内容模块,通常可以重复使用的较大的整体,比如导航、菜单、幻灯、图文列表等。命名前面建议带有 m-
元件:各种常见的网页内容元件,比如按钮、标题、输入框等。命名前面建议带有 u-
两者关系,模块包含元件,元件组成模块。
小小实例
看到上面的一个小弹窗。整个弹窗,当成一个模块。可以把标题,提示内容,按钮当做元件。HTML 代码就如下,CSS , JS 代码就不贴了。模块就带 m- ,元件就带 u-
<div class="m-alert">
<div class="m-box">
<div class="m-box-inner">
<div class="u-title">提示2</div>
<div class="u-content">这里是提示内容2</div>
</div>
<div class="m-box-buttons">
<span class="u-btn-success">确定</span>
</div>
</div>
</div>
至于这样的写法有什么优劣,注意事项,这里就不展开讲了,以后再写文章。
5.JavaScript命名
在js命名里面,应该只有四种命名方式:小驼峰(productList),大驼峰(ProductList),大写字符,下划线分割(PRODUCT_LIST),下划线开头+小驼峰(_productList)
5-1.按照类型命名
5-1-1.小驼峰
在js写法里面,小驼峰命名应该是最多的一种。变量,函数一般而言都是使用小驼峰命名。
//登录处理函数
let handleLogin=function(){}
5-1-2.大驼峰
在es6之前,js还没有class的概念,但是也组织不了开发者模拟class。现在有了class,自然而然,class的命名规范就更离不开了。关于class的命名规范,应该很多人都是习惯用大驼峰命名。
//创建一个类
class Person{
//...
}
5-1-3.常量
常量建议还是使用大写字符+下划线命名。
//配置最大金额
const PRICE_MAX=10000;
5-1-4.私有变量
私有变量相对于外面作用域而言,为了区分变量是公用的,还是私有的。建议命名上面就做下区分,私有变量建议使用下划线开头+小驼峰命名方式。
let myObj={
name:'守候',
setName(){
//保存当前的this
let _this=this;
setTimeOut(function(){
alert(_this.name)
},1000)
}
}
5-2.按职责命名
函数命名,一般都是动词开头。
5-2-1.获取值
如果函数是为了获取值(函数最后会返回一个值的),函数前面建议带有get。
//根据 ID 获取用户信息
function getUserInfo(id){
}
5-2-2.设置值
如果函数是为了设置值(函数最后会返回一个值的),函数执行就是为了给某一个变量赋值,函数前面建议带有set。
//设置用户信息
function setUserInfo(){
}
5-2-3.处理动作
如果函数是为了处理一些操作,比如登录,注册,渲染列表等。那么就建议命名前面带有handle。
//分页操作
handleChangeCurrent(val){
}
//注册操作
handleRegister(){
}
这个处理动作,有些开发者也是习惯直接以动作开始。openDialog,closeDialog等。
6.目录,文件,图片命名
6-1目录,文件名称的命名规则
统一小驼峰命名法。
如下例子:
目录,文件 | 建议命名 |
---|---|
首页 | index,index.html |
搜索页面 | search,search.html |
产品列表 | productList,productList.html |
产品详细页面 | productDetail,productDetail.html |
新闻列表 | newslist,newslist.html |
新闻详细页面 | newsdetail,newsdetail.html |
评论列表 | commentList,commentList.html |
关于我们 | about,about.html |
如果发现名称过长,可以在团队约定好简写格式:比如 product 简写成 pro 。
6-2图片命名规范
如果是通用性质的图片,例如LOGO,菜单,侧边栏,背景等,就直接使用小写字母命名。比如:logo.jpg ,menu.jpg,aside.jpg,bg.jpg。
如果不是通用的图片,就建议根据类别-模块-功能的格式。使用小写字母,‘-’或者‘_’分割,如下例子:
图片名称 | 意义 |
---|---|
btn-submit-comment.jpg | 提交评论的按钮 |
bg-product-list.jpg | 产品列表模块的背景 |
icon-views.png | 浏览数的图标 |
icon-btn-vote.png | 投票按钮 |
ad-news-aside.jpg | 在新闻侧边栏的广告图片 |
7.参考资料
8.小结
关于命名,很简单,也很难。也是困扰着很多的开发者,包括我。该文章的命名方式,也是我在用的一种个人命名方式,希望能让大家有所收获。当然其中还有很多的瑕疵,希望大家多多指点,或者推荐下自己建议的命名方式。
关于命名的规范,每个公司都有自己的编码规范,只是很少公司能认真贯彻执行自己的规范,从而导致命名错乱。所以命名的难点,我不认为是命名本身有难度,难度在于在项目上,面对各种需要命名的对象,坚持使用一套命名格式,正确的命每一个名。
-------------------------华丽的分割线--------------------
想了解更多,和我交流,内推职位,请添加我微信。或者关注我的微信公众号:守候书阁