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

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

来源:掘金

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,539评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,911评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,337评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,723评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,795评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,762评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,742评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,508评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,954评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,247评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,404评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,104评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,736评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,352评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,557评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,371评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,292评论 2 352

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,467评论 1 45
  • 前言 说是前言,其实也是本文诞生的目的。随着公司业务的不断增加,功能的快速迭代,app的业务线越来越多,代码体积变...
    Yealink阅读 5,304评论 0 13
  • 最近几天,我情绪波动大的时候,就会想求安慰,一般会找父母倾诉一下。 在这个过程中,我发现,他们给我很多理解和鼓励,...
    海鱼恋阅读 231评论 0 0
  • 夜里一直做梦 怕梦醒后答案还没找到 拒绝醒来 醒后 那个疑问还在 生之途 是征程还是归程? 其实很多问题 无需答案...
    倚材阅读 516评论 0 3
  • cocoapod 大家都用过,一些好的第三方的,比如Masonry ,AFNetworking,那你有没有想过有一...
    pengxiaochao阅读 685评论 0 1