资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/变量命名规范

变量命名规范

luck / 2324人阅读

摘要：函数的命名规范拼写准确比如我的与把函数未执行归咎于代码逻辑问题使用正常的时态特别是代码中状态的变量或者函数的命名，比如表示已经启动了，表示正在连接。

变量命名规范 前言

好的命名规范可以让你不用天天为取名字而苦恼、找bug时，更快的定位到bug在哪个位置

组件的命名和它的功能相配套

不与其他业务组件重名,让人一眼就区分

不一定要好听酷炫,但是实用.让开发者产生条件反射,看到命名就会想到这个组件的实用场景

易写易记,短小却精炼,不繁琐

BEM

.nav某一块展示/功能区域 (div)
.nav__item这块展示/功能区域（div）里面的某个元素，比如: nav__item
.nav__item--hide/ .nav__item--open 某个元素或者某个块的状态

不要加敏感词汇

我曾经给一个元素取了个class为advertisement，后来测试人员发现页面上这块元素不见了。后来发现360浏览器开启去广告模式，直接把这个div给删了。

函数的命名规范

拼写准确 比如我的confirm与confrim 把函数未执行归咎于代码逻辑问题

使用正常的时态

特别是代码中状态的变量或者函数的命名，比如 onXxxxStarted 表示xxx已经启动了，isConnecting表示正在连接。正确的时态可以给使用者传递准确的信息。

函数和属性的命名是有区别的

如果是函数，建议使用动宾结构

动宾结构就是 doSomething，这样的函数命名含义明确
比如： openFile, setName, addNumber...

- **如果是属性命名，建议使用定语+名词**

比如 fileName, maxLength, textSize

不要单词+拼音混合使用
比如：useJiFen，huKouNumber.. 缺乏美感不说，可读性大幅度降低。

谨慎使用缩写
除非是约定俗成已经被广泛使用的缩写，否则老老实实用完整拼写。典型的反面例子: count->cnt, manager->mgr password->pwd button->btn无论我们使用eclipse 或者intellij, 都有很好的自动完成功能，名字长一点没关系的，可读性更重要。

命名的语义话（动词、名词的区分） Vue 组件命名 
Ant.design 的 React 组件是下面这样的时候，我感觉到一种自由的味道。首先，组件名可以使用原生 HTML 标签名，意味着再也不用较劲脑汁去规避原生 HTML 标签了。另外，这些组件都使用了首字母大写标签名，使它们很容易地与原生小写的 HTML 标签区分。
ReactDOM.render(
  

    
    
    
  
,
  mountNode
);
基础组件命名

应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。

**反例**
    components/
    |- button.vue
    |- loading.vue
    |- slide.vue
**正例**
    components/
    |- BaseButton.vue
    |- BaseLoading.vue
    |- BaseSlide.vue
单个活跃实例的组件

单个活跃实例的组件应该以 The 前缀命名,以示其唯一性
这不意味着组件只可用于一个单页面，而是每个页面只使用一次。这些组件永远不接受任何 prop，因为它们是为你的应用定制的，而不是它们在你的应用中的上下文。如果你发现有必要添加 prop，那就表明这实际上是一个可复用的组件，只是目前在每个页面里只使用一次。

**反例**
    components/
    |- SaleManage.vue
    |- ImportExcel.vue
**正例**
    components/
    |- TheSaleManage.vue
    |- TheImportExcel.vue
紧密耦合的组件名

和父组件紧密耦合的子组件应该以父组件的命名为前缀.如果一个组件只在其父组件某个场景下有意义,这层关系应该体现在组件名上,因为编辑器通常按照首字母顺序组织文件.

**反例**
    components/
    |- SearchBox.vue
    |- SearchItem.vue
    |- SearchButton.vue
**正例**
    components/
    |- SearchBox.vue
    |- SearchBoxItem.vue
    |- SearchBoxButton.vue
组件命中的单词顺序

组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。

**反例**
    components/
    |- ClearSearchButton.vue
    |- ExcludeFromSearchInput.vue
    |- LaunchOnStartupCheckbox.vue
    |- RunSearchButton.vue
    |- SearchInput.vue
    |- TermsCheckbox.vue
**正例**
    components/
    |- SearchButtonClear.vue
    |- SearchButtonRun.vue
    |- SearchInputQuery.vue
    |- SearchInputExcludeGlob.vue
    |- SettingsCheckboxTerms.vue
    |- SettingsCheckboxLaunchOnStartup.vue
完整单词的组件名

编辑器中的自动补全已经相当友好,让书写长的组件名的代价已经可以微乎其微,同样的效率更易于理解,何乐而不为?

**反例**
    components/
    |- soManage.vue
    |- woManage.vue
**正例**
    components/
    |- SaleOrderManage.vue
    |- WorkOrderManage.vue
prop的大小写

在声明时始终采用(camelCase),在模板和 JSX 中应该始终使用( kebab-case)。
单纯的遵循每个语言的约定。在 JavaScript 中更自然的是 camelCase。而在 HTML 中则是 kebab-case。

**反例**
props: {
  "greeting-text": String
}

**正例**
props: {
  greetingText: String
}
vue中变量命名规范

变量命名使用主要集中在data和methods中

data中更多的是名词与状态布尔类型

名词：名词太多，大致分为复数、后缀加Arr、加Obj之类作为约定规则
状态布尔型：

1.表示是不是，用is+ ：如 isEmpty

表示有没有，用has+... ： 如 hasClass

表示能不能，用can+... ：如 canSubmit

单词本身的形式（过去式、进行时、将来时）：had开头、ing、ed结尾等

methods中handle+以下：

dd/remove，添加/移除
add/delete，添加/删除
insert/delete，插入/删除
start/stop，开始/停止
begin/end，开始/结束
send/receive，发送/接收
get/set，取出/设置
get/release，获取/释放
put/get，放入/取出
up/down，向上/向下
show/hide，显示/隐藏
open/close，打开/关闭
increment/decrement，增加/减少
lock/unlock，锁/解锁
next/previous，下一个/前一个
create/destroy，创建/销毁
min/max，最小/最大
visible/invisible，可见/不可见
pop/push，出栈/入栈
store/query，存储/查询

结合业务：
表单提交：submit、send
表单增删改查：add、delete、update、search、reset
上传附件：upload
关闭打开弹窗：open/close
检查：check

参考链接

CSS命名方式=》BEM
如何定义一个好的变量名
理解CSS命名规范--BEM
聊聊 Vue 组件命名那些事
谈谈函数的命名规范
vue组件命名指南,不为取名而纠结

云服务器 服务器托管 命名规范 二级域名命名规范 html的命名规范 二级域名 命名规范

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113173.html

相关文章

  • PHP开发编码规范

    摘要：本规范只针对开发过程中编码的规范，对于开发项目中文件目录数据库等方面的规范，将不重点涉及。本规范包含了开发时程序编码中命名规范代码缩进规则控制结构函数调用函数定义注释包含代码标记文件头的注释块标记样例常量命名等方面的规则。 第一章 编码规范 为了更好的提高技术部的工作效率，保证开发的有效性和合理性，并可最大程度的提高程序代码的可读性和可重复利用性，指定此规范。开发团队根据自己的实际情...

    kycool 评论0 收藏0

  • Java编程风格学习（三）

    摘要：在上一篇的编程风格学习二中我们学习了一些在编码过程中的格式规范，遵循这些规范毋庸置疑是我们的书写高质量代码的前提与基础。二语言编程规范常量命名常量的每个单词均大写，单词之间使用下划线连接。方法表示动作，采用动词命名。 在上一篇的java编程风格学习（二）中我们学习了一些在Java编码过程中的格式规范，遵循这些规范毋庸置疑是我们的书写高质量代码的前提与基础。今天我们更进一步，一起来学习J...

    CoderDock 评论0 收藏0

  • JavaScript 编码规范

    摘要：这样的变量增加了代码量，并且混淆读者。错误代码示例变量虽然声明了，但没被使用持续更新 JavaScript 编码规范 一、命名规范 1. 变量 命名方法：小驼峰式命名法（由小写字母开始，后续每个单词首字母都大写） 命名建议：语义化的名词 特殊：布尔值变量建议添加符合其含义的前缀动词 is：是否 can：能不能 has：有没有 示例： // 页面标题 let pageT...

    wenshi11019 评论0 收藏0

  • PHP编码规范

    摘要：为什么需要编码规范为了提高工作效率，保证开发的有效性和合理性。在文件编码中，选择推荐在换行符中，选择推荐文件命名程序的文件名和目录名都采用有意义的英文命名。最后最后说的是，本规范不是强制，也不是标准。回复编码规范即可。 为什么需要编码规范？ 为了提高工作效率，保证开发的有效性和合理性。 为了提高代码可读性和可重复利用性，从而节约沟通成本。 本文主要参考了 PEAR 规范，并进行适当...

    xuweijian 评论0 收藏0

  • [前端开发]--分享个人习惯的命名方式

    摘要：最近在知乎上看到这个作为程序员，有没有让你感到既无语又崩溃的程序命名。今天，也分享下最近自己在使用的命名习惯，当然只是个人习惯。但是两个函数的命名，一个是，另一个是。关于的命名规范，应该很多人都是习惯用大驼峰命名。 把一件平凡的事情做好，很平凡。把一件平凡的事情坚持的做好，很不平凡。 1.前言 如果说计算机科学只存在两个难题：缓存失效和命名。那么我就觉得命名的难点只有两个：词汇量和坚持...

    Rocture 评论0 收藏0

发表评论

登陆后可评论

0条评论

luck

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<