2018-04-26

前端

11 分钟读完 (大约 1685 个字) 0次访问

变量命名规范

前言

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

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

BEM

.nav 某一块展示/功能区域 (div)
.navitem 这块展示/功能区域（div）里面的某个元素，比如: navitem
.navitem–hide/ .navitem–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

表示有没有，用 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 组件命名指南,不为取名而纠结

# js

支付宝

微信