变量命名规范

变量命名规范

前言

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

1. 组件的命名和它的功能相配套
2. 不与其他业务组件重名,让人一眼就区分
3. 不一定要好听酷炫,但是实用.让开发者产生条件反射,看到命名就会想到这个组件的实用场景
4. 易写易记,短小却精炼,不繁琐

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(
  <div>
    <Button type="primary">Primary</Button>
    <Input placeholder="Basic usage" />
    <Select defaultValue=".com" style={{ width: 70 }}>
      <Option value=".com">.com</Option>
      <Option value=".jp">.jp</Option>
      <Option value=".cn">.cn</Option>
      <Option value=".org">.org</Option>
    </Select>
  </div>,
  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
}
<WelcomeMessage greetingText="hi"/>
**正例**
props: {
  greetingText: String
}
<WelcomeMessage greeting-text="hi"/>

vue中变量命名规范

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

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

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

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

1. 表示有没有，用has+... ： 如 hasClass
2. 表示能不能，用can+... ：如 canSubmit
3. 单词本身的形式（过去式、进行时、将来时）：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组件命名指南,不为取名而纠结