美文网首页前端--规范
前端命名规范-----学习

前端命名规范-----学习

作者: 暮光之城_3ed1 | 来源:发表于2018-09-28 10:51 被阅读381次

    1.前言

    如果说计算机科学只存在两个难题:缓存失效和命名。那么我就觉得命名的难点只有两个:词汇量和坚持贯彻执行制定的规范。

    最近在知乎上看到这个:作为程序员,有没有让你感到既无语又崩溃的程序命名?。顿时感慨万千,因为命名对于程序员来说是就是一个难题,有时候因为命名,可能会引起别人的误导,疑惑等,对开发效率,项目的质量影响可大可小。今天,也分享下最近自己在使用的命名习惯,当然只是个人习惯。更希望能在评论区看到大家推荐的命名方式,互相学习,交流。

    关于整篇内容,主要提及两个:

    1.如何写出让别人容易读懂的命名

    2.针对不同的对象,使用对象命名的格式

    2.盘点那些难以读懂的命名

    首先,先盘点下有哪些命名的一些方式是很难让别人读懂的。这些情况,大家看到就应该在开发上尽量避免下。

    2-1.单词拼写错误

    举个例子

    //提交表单(把 Form 写成了 From )submitFrom(){...}复制代码

    之前写文章也有说过,单词拼写正确可以说是一个底线了。如果单词拼写错误,比如 from 和 form 都是正确的单词,但完全不一样的意思,如果把 from 写成 form ,以后读代码的人(也可能是你自己),很有可能会懵逼。

    2-2.中英文混用

    单词拼写错误会误导别人,中英文混用这个命名方式就可以说让人云里雾里的感觉,不会误导,只会看不懂。

    比如下面

    letchanpinList=[];复制代码

    这个变量名,一开始不知道是什么,注释也没有,完全懵逼。后来看了需求,才知道这个的意思是:产品列表。

    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写法里面,小驼峰命名应该是最多的一种。变量,函数一般而言都是使用小驼峰命名。

    //登录处理函数lethandleLogin=function(){}复制代码

    5-1-2.大驼峰

    在es6之前,js还没有class的概念,但是也组织不了开发者模拟class。现在有了class,自然而然,class的命名规范就更离不开了。关于class的命名规范,应该很多人都是习惯用大驼峰命名。

    //创建一个类class Person{    //...}复制代码

    5-1-3.常量

    常量建议还是使用大写字符+下划线命名。

    //配置最大金额const PRICE_MAX=10000;复制代码

    5-1-4.私有变量

    私有变量相对于外面作用域而言,为了区分变量是公用的,还是私有的。建议命名上面就做下区分,私有变量建议使用下划线开头+小驼峰命名方式。

    letmyObj={    name:'守候',setName(){        //保存当前的thislet_this=this;setTimeOut(function(){            alert(_this.name)        },1000)    }}复制代码

    5-2.按职责命名

    函数命名,一般都是动词开头。

    5-2-1.获取值

    如果函数是为了获取值(函数最后会返回一个值的),函数前面建议带有get。

    //根据 ID 获取用户信息functiongetUserInfo(id){    }复制代码

    5-2-2.设置值

    如果函数是为了设置值(函数最后会返回一个值的),函数执行就是为了给某一个变量赋值,函数前面建议带有set。

    //设置用户信息functionsetUserInfo(){    }复制代码

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

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

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

    作者:守候i

    链接:https://juejin.im/post/5b6ad6b0e51d4519171766e2

    来源:掘金

    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    相关文章

      网友评论

        本文标题:前端命名规范-----学习

        本文链接:https://www.haomeiwen.com/subject/jxiuoftx.html