前端代码规范

1. 命名规范

1.1 项目文件命名

• 采用英文小写，以中划线分隔

'school-system'

1.2 目录命名

• 全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数

'scripts' / 'demo-styles'

• VUE的项目中的components中的组件目录采用kebab-case命名

'page-loading' / 'authorized'

1.3 IMG/PNG/GIF等文件命名

• 全部采用小写方式，以下划线分隔

'home_list.png'

1.4 HTML/CSS/JS等文件命名

• 全部采用小写方式,以中划线命名

'shop-info.html' / 'index.html' / 'shop-info.css' / 'shop-info.js'

1.5 命名需严谨，采用英文来命名，杜绝不规范的缩写，杜绝英文与中文拼音混合使用，项目名称可使用拼音首字母代替

---

2. HTML规范

2.1 缩进

• 缩进使用2个空格，(一个tab)

2.2 尽量使用语义化标签

2.3 引号

• 使用双引号("")不适用单引号('')

---

3. CSS规范

3.1 命名

• 类名使用小写字母，以中划线分隔

• id采用小驼峰命名lowerCamelCase

• scss / less 中的变量、函数、混合、placeholder 采用驼峰式命名

3.2 选择器

• css选择器避免使用标签名

• 嵌套多层且不通用，使用直接选择器

3.3 每个选择器及属性独占一行

.shop-info{

  width:100px;

  height:100px;

  backgorund:black;

}

3.4 省略0后面的单位

.shop-info{

  padding:0;

}

3.5 避免使用ID选择器及全局标签选择器防止污染全局样式

---

4. Javascript规范

4.1 命名

• 采用小驼峰命名lowerCamelCase

• 方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格，必须遵从驼峰形式

• 增删查改命名使用 add / del / get / update 为开头的命名方式

• 尽量使用以 save / open / show / go 为开头的动词命名方式，方便理解函数含义

• 常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长

4.2 代码格式

• 缩进使用2个空格，(一个tab)

• 字符串统一使用单引号('')，不适用双引号("")

• 备注变量、参数等含义

• this引用，上下文this指向改变时

const _this = this;