前端开发规范
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 代码规范和错误检查,配置命令脚本进行自动修复,无法修复的将在控制台给出提示。