[前端开发]--分享个人习惯的命名方式

把一件平凡的事情做好，很平凡。把一件平凡的事情坚持的做好，很不平凡。

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.参考资料

一些前端书写规范建议

关于团队合作的css命名规范

8.小结

关于命名，很简单，也很难。也是困扰着很多的开发者，包括我。该文章的命名方式，也是我在用的一种个人命名方式，希望能让大家有所收获。当然其中还有很多的瑕疵，希望大家多多指点，或者推荐下自己建议的命名方式。

关于命名的规范，每个公司都有自己的编码规范，只是很少公司能认真贯彻执行自己的规范，从而导致命名错乱。所以命名的难点，我不认为是命名本身有难度，难度在于在项目上，面对各种需要命名的对象，坚持使用一套命名格式，正确的命每一个名。

-------------------------华丽的分割线--------------------

想了解更多，和我交流，内推职位，请添加我微信。或者关注我的微信公众号：守候书阁