前端开发规范

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

 

 

 

posted @ 2020-03-09 15:00  青春无敌小宇宙  阅读(146)  评论(0编辑  收藏  举报