共计 4430 个字符，预计需要花费 12 分钟才能阅读完成。
把一件平凡的事情做好，很平凡。把一件平凡的事情坚持的做好，很不平凡。
1. 前言
如果说计算机科学只存在两个难题：缓存失效和命名。那么我就觉得命名的难点只有两个：词汇量和坚持贯彻执行制定的规范。
最近在知乎上看到这个：作为程序员，有没有让你感到既无语又崩溃的程序命名？。顿时感慨万千，因为命名对于程序员来说是就是一个难题，有时候因为命名，可能会引起别人的误导，疑惑等，对开发效率，项目的质量影响可大可小。今天，也分享下最近自己在使用的命名习惯，当然只是个人习惯。更希望能在评论区看到大家推荐的命名方式，互相学习，交流。
关于整篇内容，主要提及两个：1. 如何写出让别人容易读懂的命名
2. 针对不同的对象，使用对象命名的格式
2. 盘点那些难以读懂的命名
首先，先盘点下有哪些命名的一些方式是很难让别人读懂的。这些情况，大家看到就应该在开发上尽量避免下。
2-1. 单词拼写错误
举个例子
// 提交表单（把 Form 写成了 From）
submitFrom(){…}
之前写文章也有说过，单词拼写正确可以说是一个底线了。如果单词拼写错误，比如 from 和 form 都是正确的单词，但完全不一样的意思，如果把 from 写成 form，以后读代码的人（也可能是你自己），很有可能会懵逼。
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. 参考资料
一些前端书写规范建议
关于团队合作的 css 命名规范
8. 小结
关于命名，很简单，也很难。也是困扰着很多的开发者，包括我。该文章的命名方式，也是我在用的一种个人命名方式，希望能让大家有所收获。当然其中还有很多的瑕疵，希望大家多多指点，或者推荐下自己建议的命名方式。
关于命名的规范，每个公司都有自己的编码规范，只是很少公司能认真贯彻执行自己的规范，从而导致命名错乱。所以命名的难点，我不认为是命名本身有难度，难度在于在项目上，面对各种需要命名的对象，坚持使用一套命名格式，正确的命每一个名。
————————- 华丽的分割线 ——————–
想了解更多，和我交流，内推职位，请添加我微信。或者关注我的微信公众号：乐趣区
