前端代码规范

结合红宝书与自己的想法浅写一篇关于命名规范以及代码规范的文章，本人是个菜鸟，此文章也算是记录帮助自己写出更好的代码，如有问题欢迎指点~

 1.函数命名

对于函数的命名有很多种，包括浏览器原生事件、异步事件和组件自定义事件。

对于原生事件用前缀比较多的可能有on或者handle，但是在实际项目中很少严格这样来命名事件处理函数，因为这种方式有一定的局限性。

比如打开一个对话框，使用onOpenDialog或者handleOpenDialog都不如直接写openDialog简洁明了，所以怎么样使用还是需要根据业务场景来定夺。

• 命名方式：小驼峰式命名法
• 命名规范：前缀尽量以动词开始，后面加上具体要做什么的名词，例如以下表格：

动词	动词+名词	含义
get / set	getUserInfo（）/ setUserInfo（）	获取 / 设置用户信息
update / add	updateUserInfo（）/ addUserInfo（）	修改 / 新增 用户信息
del / delete	delUserInfo（）	删除用户信息
has	hasUserinfo（）	有没有用户信息
is	isTimeout（）	是否超时
calc	calcAverageSpeed（）	计算平均速度
handle	handleLogin（）	处理登录
on	onSubmit	提交表单

2.变量命名

• 命名方式：小驼峰式命名法
• 命名规范：使用名词，主要根据场景而定，尽量做到语义表达清楚，不要随意使用英文缩写。

例如：

// 表示可见性、进行中的状态 可以使用is + 名词
{
    isShow: '是否显示',
    isVisible: '是否可见',
    isLoading: '是否处于加载中'
}

// 属性状态类
{
     editable: '是否可编辑',
     clearable: '是否可清除',
     readonly: '只读'
}

3.常量

命名方式：大驼峰式命名法

命名规范：全部大写，使用大写字母和下划线来组合命名

例如：

// 一天毫秒数综合
const DAY_MILLI_SECOND_SUM = ''

对变量和函数都使用符合逻辑的名称，不用担心长度。长名字的问题可以通过后处理和压缩解
决。

4.组件命名规则

命名方式：大驼峰式命名法

命名规范：应由多个单词组成

例如：

• 单文件组件

// 反例
components/
|- mycomponent.vue
components/
|- myComponent.vue

// 正例
components/
|- MyComponent.vue

• 基础组件名

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

// 反例
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

// 正例
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue

components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue

• 单例组件名

• 只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。

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

// 反例
components/
|- Heading.vue
|- MySidebar.vue

// 好例子
components/
|- TheHeading.vue
|- TheSidebar.vue

• 紧密耦合的组件名
• 和父组件紧密耦合的子组件应该以父组件名作为前缀命名。

如果一个组件只在某个父组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起。

// 反例
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue

components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue

// 好例子
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

5.css命名

命名方式: 中划线命名法

命名规则：id、class采用小写英文字母，名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用中划线 “-” 连接

// 反例
.maxWidth{}
.max-Width{}

// 正例
.max-width{}

6.项目文件命名

命名方式: 中划线命名法

命名规则：项目名称采用小写方式，以中划线' - '进行分隔

// 反例
my_first_project
my_first-project
myFirstProject

// 正例
my-first-project