变量命名规范

我是南方大汉

变量命名规范

前言

好的命名规范可以让你不用天天为取名字而苦恼、找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组件命名指南,不为取名而纠结

阅读 2.4k

zhouatie的前端小站
爱技术,爱分享

爱技术,爱分享

737 声望
36 粉丝
0 条评论

爱技术,爱分享

737 声望
36 粉丝
宣传栏