前端开发规范文档
2021-12-25 本文已影响0人
秋玄语道
一、命名规范
1、项目命名
全部采用小写方式， 以中划线分隔
正例：tmall-management-system
反例：tmall_management-system / tmallManagementSystem
2、目录命名
全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数
正例：scripts / styles / demo-styles
反例：script / style / demoStyles
3、JS、CSS、SCSS、HTML、PNG 文件命名
全部采用小写方式， 以中划线分隔
正例： render-dom.js / signup.css / index.html / company-logo.png
反例： renderDom.js / UserManagement.html
4、命名严谨性
代码中的命名严禁使用拼音与英文混合的方式
正例：henan / luoyang / rmb 等国际通用的名称，可视同英文。
反例：DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 = 3
5、页面命名
能直观的感受当前文件的作用，以小驼峰方式命名
正例：login.vue / changePhone.vue
反例：Login.vue / ChangePhone.vue
二、HTML规范
1、缩进
缩进使用 2 个空格（一个 tab），嵌套的节点应该缩进。
2、分块注释
在每一个块状元素，列表元素和表格元素后，加上一对 HTML 注释。注释格式
<body>
<!-- header 头部 start -->
<header>
<div class="container">
<a href="#">
<!-- 图片会把a标签给撑开，所以不用设置a标签的大小 -->
<img src="images/header.jpg" />
</a>
</div>
</header>
<!-- header 头部 end -->
</body>
3、语义化标签
<header></header>
<footer></footer>
三、CSS 规范
1、命名
- 类名使用小写字母，以中划线分隔
- id 采用驼峰式命名
- scss 中的变量、函数、混合、placeholder 采用驼峰式命名
2、选择器
- css 选择器中避免使用标签名
- 考虑直接子选择器
正例：
.content > .title {
font-size: 2rem;
}
反例：
.content .title {
font-size: 2rem;
}
3、尽量使用缩写属性
正例：
padding: 0 1em 2em;
反例：
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
4、省略0后面的单位
div{
padding-bottom: 0;
margin: 0;
}
四、LESS、SASS 规范
1、代码组织
- 将公共 less 文件放置在 style / less 文件夹
- 按以下顺序组织：@import、变量声明、样式声明
2、避免嵌套层级过多（将嵌套深度限制在 3 级）
五、Javascript 规范
1、命名
- 采用小写驼峰命名 lowerCamelCase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束
- 方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格，必须遵从驼峰形式。
- 常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长
- 字符串：统一使用单引号(‘)，不使用双引号(“)。
- 使用 ES6,ES7
- 条件判断和循环最多三层
- 对上下文 this 的引用只能使用 self 来命名
六、Vue 项目规范
Vue 项目规范以 Vue 官方规范（https://cn.vuejs.org/v2/style-guide/）
1、父组件以命名规范为 KebabCase 格式，子组件以命名规范为pascal-case格式
2、在 Template 模版中使用组件，应使用 PascalCase 模式，并且使用自闭合组件。
<MyComponent />
