JavaScript是前端开发从业者必须掌握的三大基础知识中最重要的部分，也是接触时间最长、写得最多的部分。在开发过程中，难免会遇到命名问题。你会贫穷、纠结、忧郁吗？这篇文章的出现相信可以解决大部分的烦恼，让你轻松写出合规、易读、短小的代码。本文将通过大量实例自圆其说，形成一套系统实用的物理化学变量命名体系。从JavaScript数据类型分类开始，细化到一个函数的参数命名，提供了很多选择，并尽量给出它们的适用范围和优缺点。需要说明的是，由于本人写作水平和见识有限，很多方面的描述有些生硬，没有专门的分类依据，文章也没有审稿人，还请大家留言告知如果有任何错误。由于写的匆忙，内容可能不完整，后续会随着工作和学习的深入不断调整更新。布尔(Boolean)命名为布尔值是一种具有两种逻辑状态的变量，它包含两个值：真和假。对应JavaScript中的true和false，实际中通常用数字1表示真值，0表示假值。Boolean虽然只有两种状态，但在命名时可以进一步分类。下面是几种场景：场景一：表示可见性和持续状态解释：可见性通常是指页面中的元素和组件是否显示（或者组件挂载在DOM上，但不可见）。Inprogress主要是表示某个状态在持续进行中。推荐的命名方式是is+动词（现在进行时）/形容词。同时这个方法也可以不直接写is，但是为了更好的区分，还是建议加上。{isShow:'Display',isVisible:'Visible',isLoading:'Loading',isConnecting:'Connecting',isValidating:'Validating',isRunning:'Running',isListening:'Listening'}注意：有一定的副作用在Java中使用这个方法，为什么请移步：为什么阿里巴巴禁止开发者使用“isSuccess”作为变量名？场景二：属性状态类说明：通常用来描述实体（如HTML标签、组件、对象）的功能属性，规则比较固定。{disabled:'Disabled',editable:'Editable',clearable:'clearable',readonly:'只读',expandable:'expandable',checked:'checked',enumberable:'是否可枚举',iterable:'Iterable',clickable:'Clickable',draggable:'Dragable'}场景三：配置类，选项类解释：主要是指组件功能的开启和关闭，特性属性的配置。这是一种比较常见的情况。目前的命名方式有很多，但是总结出来的方法不多。推荐使用withXx来表示组件除了基本功能形式之外的其他功能，比如组件的基本功能到高级功能的激活；使用enableXx表示组件某些功能的激活；使用allowXx表示功能属性的配置；usenoXxforSuggestedfeature用户不建议启用此功能。{withTab:'带tab',withoutTab:'不带tab',enableFilter:'启用过滤',allowCustomScale:'允许自定义缩放',shouldClear:'清除',canSelectItem:'可以选择元素',noColon:'不显示label后面的冒号',checkJs:'CheckJs',emitBOM:'EmitaUTF-8ByteOrderMark(BOM)inthebeginningofoutputfiles.'}注意：如果类别太多，只能使用其中一个，例如allowXx和noXx在打字稿中使用。除了上述特定的介词和动词外，还有一些语义上有问题的组合，通常用作布尔命名的参考。{virtualScroll:'是否启用虚拟滚动模式',unlinkPanels:'取消范围选择器中两个日期面板的联动',validateEvent:'输入时是否触发表单验证'}函数命名函数在不同上下文中的名称是也不同。在对象中称为方法，在类中称为构造函数，在异步处理中称为回调函数，还有立即执行函数、箭头函数、curry函数等等。函数命名的方法往往与业务逻辑耦合，但在命名规则上也有一些通用的模式可以遵循。场景一：事件处理事件处理函数是最常用的前端函数，包括浏览器原生事件、异步事件和组件自定义事件。写作中最常见的两个名称是onXx、onXxClick和handleXx、handleXxChange。这里如何在两者之间进行选择，可以从两个方面进行分类。一种是原生事件使用onXx，而自定义事件使用handleXx。其次，onXx用于主动监听事件，handleXx用于被动处理。从实践和三大框架文档中事件部分的内容来看，推荐使用handleXx方法，提交表单时通常使用onSubmit函数。其实在实际项目中事件处理函数很少严格按照这种方式命名，因为这种方式有一定的局限性，比如点击按钮打开对话框，使用handleOpenDlg和onOpenDlg不方便直接写openDlg，如果页面有multiple对不同功能的对话框使用该方法会导致变量名太长，handle和on都是不必要的。例如，hanldeOpenCommentDlg不像openCommentDlg那样直接。下面列举了一些适用约定的例子：{onSubmit:'提交表单',handleSizeChange:'处理页数变化',handlePageChange:'处理每页的大小变化',onKeydown:'按键'}场景二：异步处理这主要是指写数据层服务中的Action命名，状态管理，Ajax回调的命名规则。{getUsers:'获取用户列表',fetchToken:'获取Token',deleteUser:'删除用户',removeTag:'移除标签',updateUsrInfo:'更新用户信息',addUsr:'添加用户',createAccount:'创建account'}命名主要围绕数据的增删改。获取的数据一般是getXx和fetchXx。在笔者看来，两者在使用上的区别在于getXx的数据来源不一定直接取自异步原始数据。它可能会被处理。处理后，fetchXx就是直接拿来的原始数据。当然，实际项目中并无区别，看个人喜好。deleteXx主要用于数据删除，removeXx语义上删除数据。通常，数据仍然存在，但不显示或数据被误删除。updateXx指的是数据更新操作，addXx是在已有的列表数据中增加一个新的子项，createXx主要是创建一个新的实例，比如创建一个新的账号。场景三：在跳转路由的实际开发中，比如使用react-router/vue-router时，在模板或者JSX中的tag中可以直接写目标地址，但是有时候会传递跳转的目标地址判断或者组合后，通过事件触发跳转，此时需要一个函数来处理，所以可以考虑使用{toTplDetail:'跳转到模板详情页',navigateToHome:'导航到首页时命名函数',jumpHome:'跳转主页',goHome:'跳转主页'}推荐使用toXx和goXx。如果你不是在当前页面打开/跳转页面，你可以使用toBlankTplDetail或goBlankHome来进一步改变语义。如果前端页面位于Webview中，也可以考虑使用toNativeShare来命名。场景四：框架相关的具体方法这主要是针对三大主流前端框架，其中一些是用特定标识符命名的，一些是生命周期的命名方法。{formatTimeFilter:'在AngularJs和Vue中，通常用于过滤器命名',storeCtrl:'在AngularJs中用于定义控制器方法',formatPipe:'在Angular中用于标识管道方法',$emit:'在Vue实例方法中',$$formatters:'AngularJs中的内置方法',beforeCreate:'Vue生命周期命名',componentWillMount:'React生命周期命名',componentDidMount:'React生命周期命名',afterContentInit:'Anuglar生命周期命名',afterViewChecked:'Angula生命周期命名',httpProvider:'AngularJs服务',userFactory:'工厂函数',useCallback:'React钩子函数'}场景五：数据处理这种场景在处理列表的时候经常遇到，比如排序、过滤、添加额外字段、根据ID和索引获取特定数据等。场景一：根据具体属性获取属性这里可以参考DOM方法的命名，比如：getElememtById()、getElementsByTagName()、getElementsByClassName()和getElementsByName()，然后提取一个比较实用的模板：getXxByYy().其中，Xx可以是：element,item,option,data,selection,list,options和一些context-specific的名字，比如：user(s),menu(s)等。Yy比较固定，经常使用分别是id、index、key、value、selected、actived等。除了用get，还可以用query和fetch，但是需要注意和上面说的异步数据处理做个区分。{getItemById:'根据ID获取数据元素',getItemsBySelected:'根据传入的选中列表的ID获取列表中的所有数据',queryUserByUid:'根据UID查询用户'}注意：在getItemsBySelected的情况下，直接写成getItemsSelected。不错，但只适用于Yy是形容词的场景情况2：格式化数据这里的格式化操作包括排序、调整数据结构、过滤数据、添加属性等。命名通常使用formatXx、convertXx、inverseXx、toggleXx、parseXx、flatXx，也可以结合一些数组的操作方法来命名，如sliceXx、substrXx、spliceXx、sortXx、joinXx等。{formatDate:'formatdate',convertCurrency:'转换货币单位',inverseList:'反转数据列表',toggleAllSelected:'切换所有选中数据状态',parseXml:'解析XML数据',flatSelect:'展开选择数据',sortByDesc:'降序排序'}数组命名数组命名建议使用复数形式，有列表含义的名词和单词组合。常用词汇包括选项、列表、映射、节点、实体、集合等。{users:'用户列表',userList:'用户列表',tabOptions:'选项卡选项',stateMaps:'状态映射表',selectedNodes:'选择的节点',btnGroup:'按钮组',userEntities:'用户实体'}option元素和下拉元素命名主要针对下拉选择框、tab元素、Radio、Checkbox等数据源中各个option数据的命名。常用词汇包括：title,name,key,label,field,value,id,children,index,nodes等，base中使用title/name/key/label/field作为optiondisplayname,value/id用于唯一标识选项，children/nodes用于包含子节点的内容。如果选项元素的语义清晰，可以直接使用特定的词来代替提到的这些通用术语。例如，菜单列表可以使用menu作为显示名称。//最常见的组合{title:'标题',value:'ID值'}//组合二{label:'标签名称',value:'ID值'}//组合三{name:'元素名称',id:'ID值'}//组合4{field:'field',value:'identification',index:'index'}当前选项，活动项命名适用列表选中项，菜单选中项，步骤操作当前命名步骤，页面路由当前路由等存储数据的代码save数据快照的场景名称。{swapData:'临时交换数据',tempData:'临时数据',dataSnapshot:'数据快照'}在数据循环语句中，使用for循环时，请使用i/j/k顺序进行多层嵌套，more可以使用x/y/z、m/n命名超过3层。在使用forEach、map、filter等方法时，可以根据不同上下文中的特殊名称来命名每个元素，比如遍历菜单，则可以为每个元素命名菜单，否则使用上下文无关的词汇，比如:item,option,data,key,object等至于索引，通常使用索引。如果多层可以使用index+number的形式，也可以直接使用i/j/k作为索引，甚至可以使用subIndex/grandIndex来命名。如果使用for循环时需要单独命名数组的长度，可以使用xxlength/xxLens，或者xxCount。在循环过程中，通常会记录在某种条件下数据匹配的次数、重复元素的次数以及中间结果。推荐使用count表示次数，skipped表示跳过次数，result表示结果。//for循环for(leti=0;i<10;i++){for(letj=0;j<10;j++){for(letk=0;k<10;k++){//dosomething}}}for(leti=0,lens=this.options.length;i
