前端代码规范
项目规范
-
css
遵循css编码规范:
1.页面布局(采用flexbox布局)
2.缩进(4个空格)
3.分号(属性声明末尾加分号)
4.空格(:
与属性值之间,属性值中的,
后,选择器> + ~
前后,选择器与{
,/
前后,注释/*
后与*/
前都需要空格)
5.空行(两个选择器属性块之间,代码块注释前与代码块后 都要保留空行)
6.换行(一个规则包含多个选择器,每个选择器独占一行;每个属性定义要另起一行;{
后需要换行,}
前需要换行)
7.注释
8.引号(双引号)
9.命名(16进制使用小写,尽量使用简写)
10.属性简写
11.属性声明顺序(影响文档流属性>自身盒模型》排版相关属性>装饰性>css3新特性) -
component
存放项目组件 -
img
存放项目图片资源,按模块分文件夹存放 -
js
遵循JavaScript编码规范:
1.缩进(4个空格,switch下的case和default必须增加一个缩进层次)
2.分号(语句结尾必加分号)
3.空格
4.空行(代码块注释前与代码块后)
5.换行(每个语句,变量赋值,左大括号后右大括号前)
6.注释(单行//,多行/* */,缩进与下一行代码一致)
7.引号(最外层用单引号)
8.命名(标准变量用驼峰命名,常量全大写以下划线连接,类构造器每个单词首字母大写,jq对象以$开头)
9.变量声明
10.对象(属性名不加引号,特殊字符除外)
11.大括号(if/else/for/while/do/switch/try/catch后必须有大括号)
12.undefined(不直接其进行变量判断) -
page
存放项目的HTML页面代码文件,遵循HTML编码规范 -
test
存放测试相关文件 -
package.json
使用npm init新建项目时自动生成,包含项目的基本信息,项目的依赖以及项目的相关执行命令等 -
README.md
描述项目的功能,特点,API等信息
项目命名规范
- 文件以及目录命名全部采用小写方式,以下划线分割
- 目录有复数结构时,始终采用单数命名法
my_project_name/page/user_order.png