前端开发变量命名系列-JavaScript篇

JavaScript作为前端开发从业人员必须掌握的3大基础知识中最重要的一环，也是平是接触时间最长、写得最多的。在开发过程中必然会遇到命名的问题，你会词穷、纠结、惆怅吗？本文的出现相信能够解决大部分烦恼，让你轻松写出符合规范、易读、简短的代码。本文将通过大量的实例来试图自圆其说，形成一套系统化、实用的变量命名理化体系。通过按JavaScript的数据类型分类着手、细到一个函数的参数命名，并提供众多可选方案，并尽量给出其适用范围和利弊。需要注意的是由于个人写作水平、和知识有限，很多方面叙述上有些生硬，在分类上也没有什么特别的依据，文章也没有人审稿，所以有什么纸漏还请留言告知。由于写作仓促，内容可能不全，后续会随着工作和学习的深入而不断地调整和更新。布尔值（Boolean）命名Boolean值是两种逻辑状态的变量，它包含两个值：真和假。在JavaScript中对应true和fake,在实践中通常使用数字工表示真值，。来表示假值。虽然Boolean的状态只有两种但是在命名时可以进一步分类,这里给出几种场景:场景一：表示可见性、进行中的状态解释:可见性在通常指页面中的元素、组件是否显示（或者组件挂载到DOM上，但并不可见）。进行中主要是说明某种状态是处于持续进行中。推荐命名方式为is+动词（现在进行时）/形容词，同时这种方式也可以直接不写is,但是为了更好的作区分，建议还是加上。isShow:，是否显示IisVisi勿是否可见，,isLoading:'是否处于力口载中，,isConnecting:，是否处于连接中一isValidating:，正在验证中。isRunnMg:，正在运行中，，isListening:，正在监听中，）注意：在Java中使用这种方式是有一定副作用的，为什么请移步：为什么阿里巴巴禁止开发人员使用"isSuccess"作为变量名？场景二：属性状态类解释：通常用来描述实体（例如：HTML标签、组件、对象）的功能属性，而且定法比较固定。（disabled:，是否禁用。edit〃勿是否可编辑「clearable:，是否可清除「readonly:'只读expandable:，是否可展开Ichecked」是否选中「e八ukwbenab/e:，是否可枚举）itesb他：受否可迭代一c〃cka勿e:，是否可点击一dsggnb/e:，是否可拖拽，场景三：配置类、选项类解释：主要是指组件功能的开启与关闭，功能属性的配置。这是一种比较常见的情景，目前命名方式也有很多种，但是归纳起来也不多。推荐使用wMXx来表示组件在基本功能形态外的其它功能，比如组件的基础功能到高级功能的开启；使用勿eXx来表示组件某些功能的开启；使用H/owXx来表示功能属性的配置；使用noXx用于建议功能使用者这个不建议开启。(，是否带选项卡)w也1。戊丁地：不带选项卡。ei^ableFilter:'开启过滤allo\A/i^Custoi^Scale:，允许自定义缩放一sk。川dC/e〃仁，是否清除「caiaSelectltei^:'是否能选中元素］八oC。］。八「不显示label后面的冒号一checkJs:检查Js)emitBOM:EMitaUTF-8ByteOrderMark(BOM)以theSegi八八Mgofoutputfiles」}注意：如果嫌分类太多，可以只使用其中一种方式，比如在Typescript中使用了allownXx和noXx。除了上面这些带有特定的前置介词、动词方式外还有一些在语义上带有疑问性质的组合通常也是作为Boolean命名的一种参考。W心是否启用虚拟滚动模式I■八〃八kZmek」在范围选择器里取消两个日期面板之间的联动「va/idateEve八t:输入时是否触发表单的校验，)函数命名函数在不同的上下文中的叫法也不一样，在对象中称为方法,在类中有构造函数、在异步处理时有回调函数，还有立即执行函数、箭头函数、柯里函数等。函数命名的方式常常是和业务逻辑耦合在一起的，但是在命名规则上也有一些常见的模式可以遵循。场景一：事件处理事件处理函数是前端平时用到最多的，包括浏览器原生事件、异步事件和组件自定义事件。在写法上最常见的两种命名分别为o八Xx、onXxClick和hand/eXx、hai^dleXxCha^ge。这里如何在二者之间选择，可以从二方面来归类。一是，原生事件采用mXx,而自定义事件使用Km山eXx。二是，事件主动监听采用。nXx,被动处理使用handleXxo从实践及三大主流框架的文档关于事件部分的内容来看，推荐使用kM山eXx这种方式，而在表单提交的时候通常采用onSub3it函数。其实，在实际项目中很少严格这样来命名事件处理函数，因为这种方式有一定的局限性，比如点击按钮打开一个对话框，使用handleOpenClg和o八OpenD/g都没有直接写叩八D/g方便，如果页面有多个不同功能的对话框采用这种方式会显得变量名过长，而handle和on就显得没有必要了，比如km以eOpenCcw3e八加应就没有openCoMMentD/g直白。下面列出了一些约定成俗的适用例子：（。八Subw七贾交表单「kand/cSizeCkmge」处理分页页数改变I人。八山印〃geChange:'处理分页每页大小改变IcmKeydown:，按下键，）场景二：异步处理这里主要是指在写数据层服务、状态管理中的Action命名，以及Ajax回调的命名规则。（getU"d：，获取用户列表二fetchToken:，取得Token，deleteUser.'删除用户I%MovxTag:'移除标签一“pd戊eU"以f。」更新用户信息一addU^r.'添加用户）createAccou八t:呛4建账户，）命名主要围绕数据的增删查找来划分，获取数据通常是getXx和fetckXx,在作者看来两者在使用上的区分在于getXx的数据来源不一定直接取自异步的原始数据,可能是加工处理后的，而fete姒x是直接拿的原始数据。当然在实际项目中并没有区分，看个人喜好。Wc/eteXx主要用于数据删除，而⑶vwveXx在语义上是移除数据，通常情况数据是还存在的，只是没有显示或数据假删除。叩WateXx是指数据更新操作，addXx是在己有列表数据中添加新的子项、而crcatcXx主要是创建新的实例，比如新建一个账户。场景三：跳转路由在实际开发过种中，比如在使用react-router/vue-router时，在模板或者JSX中可以直接在标签中写上目标地址，但有些时候跳转的目标地址是经过判断或者组合后的，并且通过事件触发跳转的，这个时候就需要一个函数来处理，那么在函数命名的时候可以考虑使用(toTp/Deta":'跳转到模板详情页面「八WoHomc-导航至ij首页「。叫叫030：'跳转首页「goHokue:，跳转首页。redirectToLogin:，重定向到登录页「switc/VTab:，切换Tab选项卡「推荐使用toXx和goXx这两种方式，如果不是在当前页面打开/跳转页面，可以使用toBlankTplDetail或者goBtankHokvxe这种方式来进一步语义化。如果前端页面是位于Webview中，也可以考虑采用toNativeSkare这种方式来命名。场景四：框架相关特定方法这里主要是针对前端3大主流流行框架，有一些命名是带有特定标识符的，还有就是一些生命周期的命名方式。（fori^atTii^eFilter:，在Aug川arJs和Vue中，通常用于过滤器命名「用于Ang川arJs定义控制器方法「FowuitPjpe「用于A八gu/ar中，标识管道方法I北想让：Vue中的实例方法）^ngularJs中的内置方法beforeCreate:Vue的生命周期命名、cowxp。九e八tWiHMou八七'React生命周期命名「coi^ponentDidMouiat:'React生命周期命名）afterConte^tl^it:'Anuglar生命周期命名「〃任erViewChecked:，A八g川。生命周期命名1httpProvider:'AngularJ^服务userF〃比"g:'工厂函数］useCH仿ack:钩子函数，场景五：数据的加工这类场景在处理列表的时候经常会碰到，比如排序、过滤、添加额外的字段、根据ID和索引获取特定数据等。情形一：根据特定属性获取属性这里可以参考DOM方法的命名，比如:getElei^\ent$ByClas$Nai^e()和getE/eMen然后提炼出一*个比较实用的模板:getXxBgYgO0其中Xx可以是：e/ewent,item,option,data,selection,list,options以及一些特定上下文的名字，比如：〃必心),……(⑸等。Yy相对来说比较固定，经常用到的就是id,index,key,value,selected,actived等。除了使用get，还可以使用伙e吆和济沙，但是需要注意和上面提到的异步数据处理作一个区分。(getltei^Byld:，根据IP获取数据元素，ge卅eknsBgSe/ected：喉据传入的己选歹U表ID来获取列表全部数据「平(ergUserBgUid:喉据UIP查询用户，)注意：在getlte^BySdected这种情形卜直接写成getltemsSelected更好，但只适用于均为形容词的场景情形二：格式化数据这里的格式化操作包括排序、调整数据结构、过滤数据、添加属性。命名通常使用form«tXx,co八vertXx,/HverseXx；亡ogg/eXx,parseXx,flatXx,也可以结合数组的一■些操作方法来命名，比如sl/ceXx,substrXx,spliceXx,sortXx,jofnXx等来命名。（fon^atPate:'格式化日期c。八vertCu”八eg:'转换货币单位I心“edeUst：，反转数据列表。togg/eAHSe/ected」切换所有已选择数据状态一pnvseXwU「解析XML数据fStSe/ea：'展开选择数据sortBgDesc「按降序排序，）数组命名数组的命名推荐使用复数形式来命名，还有就是名词和具有列表意思的单词组合。常见的词汇有options,list,kvxaps,nodes,entities,collection等。（users:'用户列表「userL/st：，用户列表。口。。/。八s：'选项卡选项）stateMap^：'状态映射表selectedNodes：'选中的节点btnQroup:，按钮组）userEnt淅es:'用户实体，}选项元素、下拉元素命名主要针对的是在下拉选择框、选项卡元素、Radio、Checkbox等数据源每个选项数据的命名。常见的词汇有：title.,native,key,label,field,value,id,childrein,index,nodes等。基中title/MMe/key/label/field作为选项显不名，value/id用于唯■标识选项，cMdre^odes用于包含子节点内容。如果选项元素的语义很明确的情况下也可以直接使用特定单词来代替提到的这些泛指的词汇，例如菜单列表就可以使用kvienu来作为显示名。//最常见组合（tit/e：，标题一value,：'IP值，）//组合二（一”：，标签名，,value：'ID值'//组合三（八'元素名id:'ID值，）//组合四（field：，字段1va/ue:'标识'，index:，索引'）当前选项、激活项命名适用列表的选中项、菜单选中项、步骤操作的当前进行步骤、页面路由当前路由等的命名。（〃“20丁〃（?「当前选中选项卡「cu"6八tPnge「当前页。$electedPata：，当前选项中数据「）临时数据、比对数据命名针对在代码中有时会使用一些临时的变量来存储数据、保存数据快照的场景下的命名。swapDna」临时交换数据「临时数据「dataS八叩s〃。七：'数据快照')数据循环语句中变量命名在使用for循环时，多层嵌套请依次使用i/j/k,超过3层可以使用x/y/z,3/八来命名。使用forEac儿小"，行住”等方法时，每一个元素命名可以根据不同语境下的特殊名字来命名，比如遍历mo那么每个元素可以命名为出小〃，不然则使用上卜文无关的词汇，比如：item,option,data,key,object等。至于索引通常使用Mdex,如果多层可以使用Mdex+数字的形式，也可以直接使用力/k来作为索引，甚至还可以使用勿八dex/gm八力八dex这种方式来命名。对于在使用for循环时数组长度如果需要单独命名的话，可以使用xxlecgth/xxLecs,或者xxCoutato在循环的过程中通常还会统计某个条件下数据匹配的次数、重复元素数量、记录中间结果等情况。这里推荐使用coue表示次数，skipped表示跳过的数量，result表不结果。//for循环for(leti-O;i<W;i++){for(letj=O;j<IO;j++){for(letk=O;k<IO;k++){//dosomething}}for(leti=Oj/ens=tKis.options.length;i<lens；i++)(//dosokwe的hg)//forEackusers.foirEack^itekVK,index)=>{//dosomething!)kvxenus.forEach^kv\enUjindex)=>{if(kvtenu.ckildiren){kv\enu.children.foirEach((siAbMeiaujsub伉dex)=>{if(subMc八u.ckildre八){^ubMenu.chUdren.forEac^CgrandMe^Ujgr•〃八d/八dex)=>{//一个不常用的示例!)}1)!)方法参数命名方法的参数名称和数量在不同的方法中各不相同，但是还是有一些固定的模式可以参考，比如在Vue中监听属性变化的新值和旧值；reduce方法的上一个值，当前值；回调函数的命名、剩余参数的命名等。情形一：新值、旧值常见于Vue中watch对像中的属性监听回调函数，推荐使用oldVal:'10®',八ewVH:，新值，1情形二：上一个值、下一个值和当前值这种情形见于路由的钩子方法，。型&HS匕八数据拷贝的参数。//组合一（F-om：，从…。to：到）//组合二prw-上一个…。next:吓一个…。cur'当前，)//组合三source:'源'，ta叼品：'目标')//组合四(start:'开始「eiad:，结束，)情形三：异步数据返回用于Promise的the八方法参数，await的返回的Promise等。可选择的词汇有:res,data,json,entity,推荐使用res。deMoProkvu'se.the八(res=>{//dosowve的八g情形四：其它情况一些使用不多，但是在编程时约定成俗的命名方式。例如ck表示单个字符，式『表示字符串,n代表次数,reg表示正则,ex”表示表达式,1ens表示数组长度,count表示数量,p表示数据的精度,q表示查询(query),src表示数据源(source),no表示数字(number),rate表示比率,status表示状态,boot表示布尔值,arr表示数组值,o可表示对象值,x和g表示坐标两轴,func表示函数,ua表示UserAgent,size表示大小,um-t表示单位,hoz表示水平方向，vert表示垂直方向，血热表示基数，根//传入单个字符f〃八ct7。八〃pperfck)(}//数量量复function 八)//il'iWabab1.rep(ace(regj'bb')事件命名这里根据DOM、nodejs和一些框架和UI组件的事件进行归纳DOM事件这里列举DOM中常见的事件命名(bad:'已完成加载unload:'资源正在被卸载「，资源即将被卸载二error:'失败时］abort:，中止时:Foc〃s；'元素获得焦点Iblur:'元素失去焦点I以七：’已经剪贴选中的文本内容并且复制到了剪贴板1copg:'已经把选中的文本内容复制到了剪贴板］pa允从剪贴板复制的文本内容被粘贴I忆size:'元素重置大小「滚动事件1reset:'重置s她wu七，表单提交Ioh仇c:，在线L。用离线，open:，打开。关闭Ico2icc±3连接I允art:，开始。"W」结束「七」打印I以的3口认七一打E|1机关闭时触发Iclick:'点击Idblclick:，双击「change:'变动。sHect「文本被选中被选中。keydowH/kegpress/kegup：，按键事件］MouseMove/hAOusedown/kwouseup/haouse/eave/Fuouseou—鼠标事件）touch:'轻按「contextHAenu:，右键点击（右键菜单显示前）1wheel：，滚轮向任意方向滚动:p。心ter:'指针事件'，drop:'元素在有效释放目标区上释放）p®，播放Ipause:'暂停suspend:，挂起）complete:，完成：seek：'搜索'，install:'安装Iprogress:，进行'，broadcast:TiS'jinput:'输入Imessage「消息。valid:'有效zoom:，放大一rotate:，旋转Iscale：，缩放一upgrade:更新「%adg:惟备好「active:，激活，)自定义事件在封装组件时提供的事件名除了参考DOM事件外，在命名上也可以参考GithubApi采用动词过去时+Event的方式,VisualStudioCodeApi的'on+(assig八edEve八七」分配事件Ic/osedEue八2」关闭事件。Sbe/edEve八七「标签事件I/ockedEve八七「锁