命名规范

这篇小文章主要是通过一些例子来介绍一些Javascript中一些关于命名变量，函数，类或者是组件的通用约定。虽然这些规则并不是强制性的，但是呢，他们却被一些JS社区所广泛采用，所以，了解他们还是很有必要的。 Javascript命名约定：变量由于Javascript是大小写敏感的，因此，如果有几个变量，其仅仅是大小写不一样，这些变量在Javascript中会被理解为是不同的变量，如下所示： var name = 'Robin Wieruch';var Name = 'Dennis Wieruch';var NAME = 'Thomas Wieruch';console.log(name);// "Robin Wieruch"console.log(Name);// "Dennis Wieruch"console.log(NAME);// "Thomas Wieruch"一个好的javascript变量名是应该能描述出他这个变量所代表的含义，因此，一般情况下，如果变量名足够清晰的话，给其增加一个注释可能没太多必要。 // badvar value = 'Robin';// badvar val = 'Robin';// goodvar firstName = 'Robin';大部分情况，你会发现javascript是会以驼峰的形式命名，并且其首字母是小写的 // badvar firstname = 'Robin';// badvar first_name = 'Robin';// badvar FIRSTNAME = 'Robin';// badvar FIRST_NAME = 'Robin';// goodvar firstName = 'Robin';不过javascript的常量，私有变量，类或者是组件的命名规则与其略有不同，我们会在下面分别介绍他们。 然而，在通常情况下，javascript的变量，不管是字符串，布尔类型，还是数字类型，对象，数组，函数，他们都是遵循驼峰的命名方式的。 现在简要描述一下常见的几种大小写命名的不同 camelCase （驼峰命名法，单词相连，第一个单词首字母小写，其他单词首字母大写） 被用在js中 PascalCase（帕斯卡命名法，单词相连，单词首字母大写） 被用于js中 snake_case（蛇形命名法，单词间以下划线分隔） kebab-case（烤串命名法，单词间以中横线分隔） Javascript命名约定：布尔值布尔值的变量通常来说，一般以is，are，has等表示判断意义的单词作为其前缀，以便让开发者更好的和其他类型的变量区分开来，来看例子： // badvar visible = true;// goodvar isVisible = true;// badvar equal = false;// goodvar areEqual = false;// badvar encryption = true;// goodvar hasEncryption = true;当然啦，这种命名方式也算是一种软规则，并不是强制要求的。 ...

把一件平凡的事情做好，很平凡。把一件平凡的事情坚持的做好，很不平凡。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 和 closeEditDialog2-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.小结关于命名，很简单，也很难。也是困扰着很多的开发者，包括我。该文章的命名方式，也是我在用的一种个人命名方式，希望能让大家有所收获。当然其中还有很多的瑕疵，希望大家多多指点，或者推荐下自己建议的命名方式。关于命名的规范，每个公司都有自己的编码规范，只是很少公司能认真贯彻执行自己的规范，从而导致命名错乱。所以命名的难点，我不认为是命名本身有难度，难度在于在项目上，面对各种需要命名的对象，坚持使用一套命名格式，正确的命每一个名。————————-华丽的分割线——————–想了解更多，和我交流，内推职位，请添加我微信。或者关注我的微信公众号：乐趣区 ...