「前端开发」分享个人习惯的命名方式

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

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

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

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

个人博客

更多前端技术文章美术设计wordpress插件、优化教程学习笔记尽在我的个人博客喵容 - 和你一起描绘生活,欢迎一起交流学习,一起进步:https://www.miaoroom.com

站内文章推荐:

「前端进阶」史上最全的前端学习路线

「不要重复造轮子系列」 前端常用插件、工具类库汇总

如何保障前端项目代码质量

记录一次基于vue、typescript、pwa的项目由开发到部署

小程序挖坑之路

参与评论