# 组件开发规范
[TOC]

## 文件规范

### 目录
**所有源代码均放在 `src` 目录下**
+ 组件在目录 `src/package/` 下
+ commons目录用来做element-ui的输入输出，如需重写elementUI中某个组件的样式，可在此目录编写
+ lu目录用来做基于element-ui的二次开发，对elementUI的组件或者多个组件进行修改、合并的操作可以放在此目录
+ components目录用来做无element-ui依赖的插件，比如大家自己写的一些组件

### 命名
**尽量简单有语义，禁止使用拼音**  
**目录名小写，多个单词使用 `-` 分隔**  
**同一类组件目录名使用相同前缀，如 `button` 和 `button-group`**  

## 组件规范

### 基本
+ **使用ES6语法替代ES5**
+ **严格遵循eslint和prettier规则**


### 变量
**使用const/let定义变量，每个const/let关键字对应一个变量且换行**
```js
// 正确
let name = 'this is a test name';
let age = 22;

// 错误
let name = 'this is a test name', age = 22;
let name = 'this is a test name'; let age = 22;
```

**变量名小写，使用驼峰命名法**  
**变量拼接使用 `` ` `` ，不要使用 `+`**  
**字符串变量使用单引号**  

### 属性
**属性名使用驼峰命名法**  
**属性均采用单引号**  
**多个属性换行书写，不要排列在一行**  

```html
<LuModal
  className="modal"
  topImg='logo.png'
  topText='顶部文案'
  ...
/>
```

### 事件
**组件事件以 `on` 作为前缀，使用驼峰命名法**

```html
<LuModal
  onConfirm='goPrint'
  onCancel='closeModal'
  ...
/>
```

**事件属性值不要使用匿名函数**

```html
<LuModal
  className="modal"
  onCancel='() => {this.closeModal()}'
  ...
/>
```

### 函数
**函数名使用驼峰命名法，尽量简明扼要，拼接单词不超过3个**  
**不要定义未使用的参数**  
**参数超过3个则用对象代替**  
**一个函数应完成一个独立的功能，注意解耦**  


## 样式规范

### 命名
**使用BEM命名法**
  + class名用 `-` 分隔
  + 子元素class名使用 `__` 分隔
  + 修饰类的class名使用 `--` 分隔

```scss
.site-search{}  /* 块 */
.site-search__field{}  /* 元素 */
.site-search--full{}  /* 修饰符 */
```

>**注意：** 使用BEM需要明确作用域是从哪开始和到哪结束的，以及什么时候使用（不使用）它（若一个元素可能开始于任何上下文，那就没必要使用）


### 书写
**不要使用id选择器**  
**遵循Sass书写规范，精简代码，尽量不要使用纯css <a target='_blank' href='https://www.sasscss.com/docs/'>Sass中文文档</a>**  
**不要使用元素标签书写样式**  

```scss
.site-search>View {}
``` 

## Commit规范

**组件开发请完成以下几个部分：**
 + `组件开发` 
 + `组件示例页面`
 + `组件使用说明的md文档`
 + `组件测试（包含兼容性）`

 **commit msg格式**
+ [bugfix / breaking change / new feature / improvement] 组件名字：修改内容的中文描述

```bash
bug fix：bug修改
breaking change：不兼容的改动
new feature：新功能
improvement：改进
```
```bash
示例：
[bug fix] LuButton: 修改颜色
[new feature] 新增 LuButtonGroup 组件
```