前端开发规范
H5前端代码开发规范
H5前端代码开发规范... 1
1 环境... 3
2 命名... 3
2.1 项目命名... 3
2.2 目录(文件夹)命名... 3
2.3 文件命名... 3
2.3.1 页面（views/pages) 4
2.3.2 JS文件命名... 4
2.3.3 CSS、SCSS文件命名... 4
2.3.4 HTML文件命名... 4
2.3.5 资源文件命名... 4
3 HTML. 4
3.1 HTML5 doctype. 4
3.2 语言属性... 5
3.3 IE 兼容模式... 5
3.4 字符编码... 5
3.5 HTML. 5
3.6 缩进 5
4 CSS. 5
4.1 分号 5
4.2 继承 6
4.3 简洁性... 6
4.4 颜色 6
4.5 语法 6
4.6 命名 7
4.7 Less、scss语法规范... 7
4.8 编码规范... 8
5 JavaScript 8
5.1 命名 8
5.1.1 文件夹命名... 8
5.1.2 函数和变量命名... 8
5.1.3 构造函数命名... 8
5.1.4 常量命名... 8
5.2 编码 8
5.3 注释 8
5.4 类型 9
5.5 引用 9
5.6 字符串... 9
5.7 对象 9
5.8 数组 9
5.9 解构赋值... 9
5.10 函数... 10
5.11 原型... 10
5.12 模块... 10
5.13 迭代器... 11
5.14 分号... 11
5.15 杂项... 11
5.16 编码规范... 11
6 Vue. 11
6.1 文件规范... 11
6.2 组件开发... 12
6.3 组件命名... 12
6.3.1 常规组件... 12
6.3.2 基础组件名... 12
6.3.3 单例组件名... 13
6.3.4 紧密耦合的组件名... 13
6.3.5 组件名中的单词顺序... 13
6.3.6 模板中的组件名大小写... 13
6.4 Props命名... 13
6.5 注释规范... 14
6.6 编码规范... 14
6.7 指令规范... 14
6.8 编码规范... 14
1 环境
开发环境常规有VSCode、webstorm等
为了统一开发，尽量使用webstorm，功能齐全；
2 命名
2.1 项目命名
全部采用小写方式， 以下划线连接符“_”分隔。 例：my_project_name
2.2 目录(文件夹)命名
参照项目命名规则；
有复数结构时，要采用复数命名法。多个单词使用下划线连接符分隔；
例：scripts、styles、images、data_models
2.3 文件命名
2.3.1 页面（views/pages)
1）页面命名使用下划线连接符(kebab-case)user_info.vue
2）如果views下的文件只有一个文件,命名使用index.vue
3）如果views下有文件夹，文件夹命名单个单词小写，多个单词使用下划线连接符
2.3.2 JS文件命名
命名使用使用小驼峰命名，如resizeEvent.js
如果为单个单词，使用小写，如md5.js
2.3.3 CSS、SCSS文件命名
css、scss、less等样式文件单个单词命名为小写，多个单词使用下划线连接符
2.3.4 HTML文件命名
文件命名单个单词命名为小写，多个单词使用下划线连接符
2.3.5 资源文件命名
文件命名单个单词命名为小写，多个单词使用下划线连接符
3 HTML
3.1 HTML5 doctype
为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。
3.2 语言属性
根据 HTML5 规范：建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言：
3.3 IE 兼容模式
IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。
3.4 字符编码
统一采用 UTF-8 编码
3.5 HTML
属性按照特定的顺序出现以保证易读性
3.6 缩进
一次缩进2个空格；
4 CSS
4.1 分号
不能漏写；
4.2 继承
不要把可继承的样式重复声明；
4.3 简洁性
保持代码的简洁。使用属性缩写。不必要的值不用写。例如：padding、margin、border等；
4.4 颜色
除了做透明效果是用rgba，否则都用16进制小写表示，能简写的采用简写模式；
引号：最外层统一使用双引号；url的内容要用引号；
注释：
1)单行注释：*与内容之间必须保留一个空格。
2)*要一列对齐，*与内容之间必须保留一个空格。
3)规则声明块内注释
使用 // 注释，// 后面加上一个空格，注释独立一行。
4）文件注释
文件顶部必须包含文件注释，用 @name 标识文件说明。*要一列对齐，*与内容之间必须保留一个空格，标识符冒号与内容之间必须保留一个空格。
@description为文件或模块描述。
@update为可选项，建议每次改动都更新一下。
4.5 语法
用两个空格来代替制表符（tab），缩进为2空格。
为选择器分组时，将单独的选择器单独放在一行。
在每个声明块的左花括号前添加一个空格。
声明块的右花括号应当单独成行。
每条声明语句的 : 后应该插入一个空格。
每条声明都独占一行。
所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。
4.6 命名
class单词字母小写，多个单词组成时，使用中划线连接符“-”分隔；
id单词字母小写，多个单词组成时采用camelCase；
scss中的变量、函数、混合、placeholder采用camelCase命名
4.7 Less、scss语法规范
代码组织：代码必须（MUST）按如下形式按顺序组织：1、@import 2、变量声明 3、样式声明，以less语法为例：
变量规则：全局变量放在统一的全局变量文件中进行维护；可复用属性尽量抽离为页面变量；
选择器和“ { ”之间必须保留一个空格；
属性名后的冒号（:）与属性值之间必须（MUST）保留一个空格，冒号前不得（MUST NOT）保留空格；
定义变量时冒号（:）与变量值之间必须（MUST）保留一个空格，冒号前不得（MUST NOT）保留空格，以less语法为例：
嵌套规则：避免嵌套层级过深，最好不超过3层；
Scss/less嵌套中引入 空行：嵌套选择器和CSS属性之间空一行。
4.8 编码规范
开启 stylelint 代码规范和错误检查。参照stylelint-config-standard的标准进行扩展，安装相应的插件并在前端项目文件根目录下.stylelintrc.js进行配置；在前端项目根目录package.json中配置scripts命令脚本进行自动修复，无法修复的将在控制台给出提示。
5 JavaScript
5.1 命名
5.1.1 文件夹命名
文件夹、文件的命名与命名空间应能代表代码功能,可读性强，如： utils；
5.1.2 函数和变量命名
单个单词用小写，多单词情况采用具有意义的驼峰命名；
5.1.3 构造函数命名
构造函数的首字母要大写；变量函数名禁止使用关键字和保留字，禁止重新定义(不能重名)或定义不用；
5.1.4 常量命名
用大写字母，如HUBLIST
5.2 编码
采用统一的缩进方式排版代码，一个缩进为2个空格；
5.3 注释
单行注释用 // ，多行注释用 /* ... */，注释内容前后加一个空格；
重要函数或者类等都要添加头描述；
5.4 类型
基本类型：字符串、数值、布尔类型、null、undefined
复杂类型：object、array、function
5.5 引用
1）const 和 let 都是块级作用域，var 是函数级作用域，对所有引用都使用 const，不要使用 var
如果引用是可变动的，则使用 let；
2）var 存在变量提升的情况，即 var 声明会被提升至该作用域的顶部，但是他们的赋值并不会。而 const 和 let 并不存在这种情况。
5.6 字符串
字符串统一使用单引号的形式 ''，程序化生成字符串时，请使用es6模板字符串；
5.7 对象
请使用字面量值创建对象 const a = {}
不能使用保留字作为对象的键值；对象方法、对象属性值等均使用简写方式；
5.8 数组
请使用字面量值创建数组；
向数组中添加元素时，请使用 push 方法；
使用es6拓展运算符 ... 复制数组；
5.9 解构赋值
1）当需要使用对象的多个属性时，请使用es6解构赋值：
2）当需要使用数组的多个值时，请同样使用解构赋值：
5.10 函数
1）请使用函数声明，而不是函数表达式
2）不要在非函数代码块中声明函数
3）不要使用 arguments，可以选择使用 ...
5.11 原型
使用 class，避免直接操作 prototype
5.12 模块
使用标准的 ES6 模块语法 import 和 export
5.13 迭代器
尽量不要使用 iterators
5.14 分号
遵循 Standard 的规范，不使用分号；
5.15 杂项
不要混用tab和space；
变量或表达式赋值时用单引号’’，如遇单双引号同时存在的情况，则遵循单引号在外、双引号嵌套在内的原则；
对上下文this的引用只能使用'_this', 'that', 'self'其中一个来命名；函数尽量用箭头函数代替，这样更简洁，而且绑定了this；
行尾不要有空白字符；
不允许有空的代码块。
5.16 编码规范
开启 eslint 代码规范和错误检查。参照eslint-config-standard的标准进行扩展，安装相应的插件并在前端vue项目文件夹根目录下.eslintrc.js进行配置；在项目根目录package.json中配置scripts命令脚本进行自动修复，无法修复的将在控制台给出提示。
6 Vue
6.1 文件规范
项目文件目录说明：
1.1 node_modules:项目需要的插件，依赖等
1.2 pulic:项目入口模板文件，打包文件，无需编译文件
1.3 src：项目主体文件
1.3.1 api：接口请求文件（axios）
1.3.2 assets：项目静态图片
1.3.3 components：项目公用组件
1.3.4 dict：静态字典文件
1.3.5 directive： 自定义指令配置文件
1.3.6 filters：过滤器文件
1.3.7 mixins：混入文件
1.3.8 plugins：UI插件引入文件
1.3.9 styles：css配置文件
1.3.10 utils：工具类存放文件
1.3.11 views:主体组件文件
1.3.12 store：vuex文件
1.3.13 router：路由配置文件
1.3.14 vue.config.js：webpack配置文件
6.2 组件开发
复用组件定义在components中，方便统一维护和调用
特用组件在当前父组件文件夹下定义
所有弹框嵌套表格或其他复杂交互全部才有组件形式，尽量控制一个vue文件不超过400行；
6.3 组件命名
组件的命名需遵从以下原则：有意义的，简短（2 到 3 个单词）、具有可读性；
6.3.1 常规组件
组件使用大驼峰
6.3.2 基础组件名
基础组件名 应用特定样式和约定的基础组件(也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V；
6.3.3 单例组件名
单例组件名 只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。
6.3.4 紧密耦合的组件名
紧密耦合的组件名 和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
6.3.5 组件名中的单词顺序
组件名中的单词顺序（组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。）
6.3.6 模板中的组件名大小写
模板中的组件名大小写 对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是中划线连接符的。
完整单词的组件名示例：
6.4 Props命名
Prop 名大小写 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用中划线连接符。
6.5 注释规范
以下情况，务必添加注释：
1)公共组件使用说明
2)各组件中重要函数或者类说明
3)复杂的业务逻辑处理说明；
4)注释原则同上css、js、html注释原则；
6.6 编码规范
尽量使用 ES6 风格编码：
定义变量使用 let ,定义常量使用 const;
使用模板字符串语法；
使用解构赋值、箭头函数、扩展运算符、模块等；
6.7 指令规范
指令有缩写一律采用缩写形式：如 v-on 写成 @ 、v-bind简写成 ：
v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一；
6.8 编码规范
开启 eslint、 stylelint 代码规范和错误检查，配置命令脚本进行自动修复，无法修复的将在控制台给出提示。
