黑马程序员技术交流社区

标题: 【上海校区】[前端开发]--分享个人习惯的命名方式 [打印本页]

---

作者: 不二晨    时间: 2018-9-29 09:33
标题: 【上海校区】[前端开发]--分享个人习惯的命名方式
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在新闻侧边栏的广告图片



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

---

作者: 不二晨    时间: 2018-10-10 13:26
奈斯

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2