前端开发规范

一、命名规范

1、常用的命名规范：

• camelCase（小驼峰式命名法 —— 首字母小写）

• PascalCase（大驼峰式命名法 —— 首字母大写）

• kebab-case（短横线连接式）

• Snake （下划线连接式）

2、项目命名

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

正例：tmall-management-system

反例：tmall_management-system / tmallManagementSystem

3、目录命名

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

正例：scripts / styles / demo-styles

反例：script / style / demoStyles

4、JS、CSS、SCSS、HTML、PNG 文件命名

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

正例： render-dom.js / signup.css / index.html / company-logo.png

反例： renderDom.js / UserManagement.html

5、命名严谨性

代码中的命名严禁使用拼音与英文混合的方式

正例：henan / luoyang / rmb 等国际通用的名称，可视同英文。

反例：DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 = 3

二、HTML规范

1、缩进

缩进使用 2 个空格（一个 tab），嵌套的节点应该缩进。

2、命名

• 元素 id 必须保证页面唯一。

• id 建议单词全字母小写，单词间以 - 分隔。

• 同一页面，应避免使用相同的 name 与 id。

• class单词全字母小写，单词间以 - 分隔。

• -中划线：仅作为连字符使用，表示多单词之间的连接记号。

• -- 双中线：代表不同的状态，类型。

• __ 双下划线：双下划线用来连接块和块的子元素

• _单下划线：单下划线用来描述一个块或者块的子元素的一种状态

• class 代表相应模块或部件的内容或功能，不样式信息进行命名。

• id、class 命名，在避免冲突并描述清楚的前提下尽可能短。

3、分块注释

在每一个块状元素，列表元素和表格元素后，加上一对 HTML 注释。注释格式

4、语义化标签

• 标签以及标签属性小写。

• 对于无需自闭合的标签，不允许自闭合。

• 对 HTML5 中规定允许省略的闭合标签，不允许省略闭合标签。

• 标签使用必须符合标签嵌套规则，行内元素中不要嵌套块级元素。

• 比如 div 不得置于 p 中，tbody 必须置于 table 中

• HTML 标签的使用应该遵循标签的语义。

三、CSS 规范

1、命名

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

• id 采用驼峰式命名

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

2、选择器

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

• 考虑直接子选择器

暂时无法在飞书文档外展示此内容

3、尽量使用缩写属性

暂时无法在飞书文档外展示此内容

4、省略0后面的单位

暂时无法在飞书文档外展示此内容

四、LESS、SASS 规范

1、代码组织

• 将公共 less 文件放置在 style / less 文件夹

• 按以下顺序组织：@import、变量声明、样式声明

2、避免嵌套层级过多（将嵌套深度限制在 3 级）

3、变量定义

• 文件全局的变量在全局头部次于 @import 的位置声明；

• 局部变量在块的头部位置声明。

五、Javascript 规范

代码规范通常包括以下几个方面:

• 变量和函数的命名规则

• 空格，缩进，注释的使用规则。

• 其他常用规范……

规范的代码可以更易于阅读与维护。

1、命名

• 采用小写驼峰命名 lowerCamelCase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束

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

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

2、规范

• 变量名

变量名推荐使用驼峰法来命名(camelCase):

• 空格与运算符

通常运算符 ( = + - * / ) 前后需要添加空格:

• 代码缩进

通常使用 4 个空格符号来缩进代码块：

• 语句规则

简单语句的通用规则:

• 一条语句通常以分号作为结束符。

复杂语句的通用规则:

• 将左花括号放在第一行的结尾。

• 左花括号前添加一空格。

• 将右花括号独立放在一行。

• 不要以分号结束一个复杂的声明。

• 对象规则

对象定义的规则:

• 将左花括号与类名放在同一行。

• 冒号与属性值间有个空格。

• 字符串使用双引号，数字不需要。

• 最后一个属性-值对后面不要添加逗号。

• 将右花括号独立放在一行，并以分号作为结束符号。

六、Vue 项目规范

Vue 项目规范以 Vue 官方规范（https://cn.vuejs.org/v2/style-guide/）

1、组件名应该是多个单词

组件应该是由多个单词组成(大于等于2)，且命名规范为 PascalCase 格式。这样是为了避免与现在以及未来的HTML元素冲突。

推荐 :white_check_mark:

暂时无法在飞书文档外展示此内容

不推荐 :negative_squared_cross_mark:

暂时无法在飞书文档外展示此内容

2、组件文件名

组件文件名应该是 kebab-case 格式

推荐 :white_check_mark:

暂时无法在飞书文档外展示此内容

不推荐 :negative_squared_cross_mark:

暂时无法在飞书文档外展示此内容

3、基础组件命名

基础组件文件名为 base 开头，使用完整单词而不是缩写

暂时无法在飞书文档外展示此内容

反例

暂时无法在飞书文档外展示此内容

4、 子组件命名

子组件若与父组件紧密耦合，则必须以父组件作为前缀命名

推荐 :white-check-mark:

暂时无法在飞书文档外展示此内容

不推荐 :negative_squared_cross_mark:

暂时无法在飞书文档外展示此内容

5、 模板标签书写

在模板标签中使用组件，应该使用 PascalCase 格式，并且使用自闭合组件

推荐 :white_check_mark:

暂时无法在飞书文档外展示此内容

不i推荐 :negative_squared_cross_mark:

暂时无法在飞书文档外展示此内容

6、 组件data必须是函数

因为函数可以保证每次返回的都是一个新的对象，否则，将所有组件共用一个对象

7、 Props 定义必须详细

• 必须使用 camelCase 命名

• 必须指定类型

• 必须加上注释，表明其含义

• 必须加上 required 或者 default，或者二选一

• 如果有业务需要，必须加上 validator 验证

暂时无法在飞书文档外展示此内容

8、 为样式设置作用域

<style>标签添加 scoped属性

9、 特性元素较多，必须换行

推荐 :white_check_mark:

暂时无法在飞书文档外展示此内容

不推荐 :negative_squared_cross_mark:

暂时无法在飞书文档外展示此内容

10、 模板中使用简单的表达式

组件模板应该只包含简单的表达式，负责的表达式应该重构为计算属性或方法。复杂表达式会

让你的模板变得不那么声明式。 我们应该尽量描述应该出现的是什么， 而非如何计算那个值。 而

且计算属性和方法使得代码可以重用。

11、 指令使用缩写形式

推荐 :white_check_mark:

暂时无法在飞书文档外展示此内容

不推荐 :negative_squared_cross_mark:

暂时无法在飞书文档外展示此内容

12、 标签顺序保持一致

单文件组件总是让标签顺序保持为

暂时无法在飞书文档外展示此内容

七、代码git提交规范

按类型划分，提交内容多项时按1.xxx 2.xxx，换行描述。

• 修复问题：[fix]+空格+xxx

• 其它内容：[other]+空格+xxx

• 功能问题：[feature]+空格+xxx

• 优化代码：[opt]+空格+xxx