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

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

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.小结

关于命名，很简单，也很难。也是困扰着不少的开发者，包括我。该文章的命名方式，也是我在用的一种我的命名方式，但愿能让你们有所收获。固然其中还有不少的瑕疵，但愿你们多多指点，或者推荐下本身建议的命名方式。

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

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

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