资讯专栏INFORMATION COLUMN

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

Rocture / 3391人阅读

摘要:最近在知乎上看到这个作为程序员,有没有让你感到既无语又崩溃的程序命名。今天,也分享下最近自己在使用的命名习惯,当然只是个人习惯。但是两个函数的命名,一个是,另一个是。关于的命名规范,应该很多人都是习惯用大驼峰命名。

把一件平凡的事情做好,很平凡。把一件平凡的事情坚持的做好,很不平凡。
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-

提示2
这里是提示内容2
确定
至于这样的写法有什么优劣,注意事项,这里就不展开讲了,以后再写文章。
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.小结

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

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

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97970.html

相关文章

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

    摘要:最近在知乎上看到这个作为程序员,有没有让你感到既无语又崩溃的程序命名。今天,也分享下最近自己在使用的命名习惯,当然只是个人习惯。但是两个函数的命名,一个是,另一个是。关于的命名规范,应该很多人都是习惯用大驼峰命名。 把一件平凡的事情做好,很平凡。把一件平凡的事情坚持的做好,很不平凡。 1.前言 如果说计算机科学只存在两个难题:缓存失效和命名。那么我就觉得命名的难点只有两个:词汇量和坚持...

    Half 评论0 收藏0
  • [前端开发]--分享个人习惯命名方式

    摘要:最近在知乎上看到这个作为程序员,有没有让你感到既无语又崩溃的程序命名。今天,也分享下最近自己在使用的命名习惯,当然只是个人习惯。但是两个函数的命名,一个是,另一个是。关于的命名规范,应该很多人都是习惯用大驼峰命名。 把一件平凡的事情做好,很平凡。把一件平凡的事情坚持的做好,很不平凡。 1.前言 如果说计算机科学只存在两个难题:缓存失效和命名。那么我就觉得命名的难点只有两个:词汇量和坚持...

    EastWoodYang 评论0 收藏0
  • [译] 前端攻略-从路人甲到英雄无敌

    摘要:整个系统变得日益繁复,人们也会去选择使用一些预处理器或者后处理器来管理这种复杂性。的预处理器或者语言的扩展会在无声无息之间提供类似于变量以及继承这些特性。最主要的两个的预处理器就是与。 本文的 Github Repo本文翻译自 FreeCodeCamp 的 from-zero-to-front-end-hero-part。本文的第二部分:这里 译者的废话,不感兴趣的直接忽略 前两天才翻...

    RancherLabs 评论0 收藏0

发表评论

0条评论

Rocture

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<