前端开发规范参考

秒速五厘米 2022-09-13 04:14 322阅读 0赞

**前言：前端开发规范参考分享**

### 前端开发规范参考 ###

*  一、规范目的
 *  二、通用规范
 *  三、框架开发规范
 *   *  1、项目使用框架
     *  2、学习资料
 *  四、编码规范
 *   *  1、HTML
     *  2、CSS+LESS
     *  3、REACT+TS
 *  五、图片使用规范
 *  六、团队约定
 *  七、图片大小规则
 *  八、图片质量要求
 *  九、图片引入
 *  十、组件编写规范
 *  十一、工程目录规范
 *  十二、疑问解答与加群交流学习

# 一、规范目的 #

*  好的代码规范能够提高代码的可读性便于协作沟通，好的开发模式能够避免不必要的 bug 出现。
 *  为了规范和约束团队成员的开发编码，提升团队协作能力，提高开发效率，使开发流程更加规范化。
 *  有利于前端项目的维护性和扩展性。

# 二、通用规范 #

*  前端编辑器统一使用 Visual Studio Code (简称 VSCode)。
 *  所有代码缩进严格按照一个TAB 键执行，一个TAB 键用两个空格代替。 (请自行在vscode中设置tab键)。  
    前端开发规范包括以下几方面  
    Ⅰ、框架开发规范  
    Ⅱ、编码规范  
    Ⅲ、图片使用规范  
    Ⅳ、组件编写规范  
    V、工程目录规范

# 三、框架开发规范 #

## 1、项目使用框架 ##

技术栈： UMI + REACT + DVA +ANTD+ TYPESCRIPT +LESS+ESLINT

## 2、学习资料 ##

UMI： https://umijs.org/zh/guide/\#%E7%89%B9%E6%80%A7  
REACT：http://caibaojian.com/react/  
DVA：https://dvajs.com/guide/  
ANTD ：https://ant.design/docs/react/introduce-cn  
TYPESCRIPT: https://typescript.bootcss.com/

# 四、编码规范 #

## 1、HTML ##

1.  语义化：根据元素/标签被创造出来时的初始意义来使用它。
2.  标签嵌套：块级标签可嵌套行内标签，行内标签不能嵌套块级标签。
3.  语义嵌套： 如：
4.  只能用于
    
     *  或
        
        1.  内。
5.  内容至上：尽量使用before、after伪类代替html标签处理背景图片等视觉设计问题。
6.  组件首字母大写，原生html标签统一小写。
7.  HTML 属性值引号：使用双引号(“”) 而不是单引号(”) 。
8.  标签属性值大于3时，断行处理编写。  
    不推荐

推荐

dispatch({
        
    type: 'home/fetchAuth',
    payload: {
        
    'account_name':account_name,
    'account_id':account_id
    },
    callback: res => {
        //实际权限路由数组
    let autRoutes = getRealAuthoritRoutes(routes,res.data)
    dispatch({
        
    type: 'home/storeAllRoutesAndBtns',
    payload: autRoutes
    });
    }
    });

1.  项目使用eslint进行代码检测,具体使用插件。

(2)、REACT编写规范

1.  React 组件使用帕斯卡命名，引用实例采用驼峰命名, 组件名称应该和文件名一致，eslint: react/jsx-pascal-case
2.  为 JSX 语法使用下列的对其方式: eslint: react/jsx-closing-bracket-location
3.  JSX 的属性都采用双引号，其他的 JS 都使用单引号。eslint: jsx-quotes
4.  属性名称始终使用驼峰命名法。
5.  当属性值等于true的时候，省略该属性的赋值。 eslint: react/jsx-boolean-value
6.  用括号包裹多行 JSX 标签。 eslint: react/wrap-multilines
7.  当标签没有子元素时，始终时候自闭合标签。 eslint: react/self-closing-comp
8.  如果控件有多行属性，关闭标签要另起一行。 eslint: react/jsx-closing-bracket-location
9.  在 render 方法中事件的回调函数，应该在构造函数中进行bind绑定。 eslint:react/jsx-no-bind,或者使用@autobind进行事件处理方法与this的绑定state初始化和事件处理函数建议使用es7的property initializers新特性
10. React 组件的内部方法命名不要使用下划线前缀。
11. isMounted:不要使用 isMounted. eslint: react/no-is-mounted , 会被官方弃用.
12. key 属性设置: 渲染多个同类型组件时，必须加上key，如无特殊用途key值统一为组件名\_+下标，如：key = \{ submenu\_$\{idx\} \},
13. Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素 。我们推荐使用 createRef API 的方式
14. 建议使用withxxx或xxxable形式的词作为高阶组件的名称。

*  高阶组件是为组件添加行为和功能的函数，因此使用如上形式的词有助于对其功能进行理解。

1.  建议按照以下顺序编排组件中的方法和属性：

txt  static propTypes  static contextTypes  state defaultProps  static state  其它静态的属性  用于事件处理并且以属性的方式（onClick = e => {
        ...}）声明的方法  其它实例属性  constructor  getChildContext （如非必要，少用）  componentDidMount  getDerivedStateFromProps  shouldComponentUpdate  getSnapshotBeforeUpdate  componentDidUpdate  componentWillUnmount  事件处理方法  其它方法  render

1.  建议使用箭头函数声明函数组件。
2.  推荐除顶层或路由级组件以外，所有组件均在概念上实现为纯组件（Pure Component）。
3.  禁止为继承自PureComponent的组件编写shouldComponentUpdate实现。
4.  建议将各个组件中的JSX的层级控制在3层以内。  
    (3)、TS编写规范
5.  禁止隐式使用 `any` ; 如果有必须要声明为 `any` , 必须注释声明为什么要使用 `any` 类型定义, – `noImplicitAny`
6.  基础代码封装要使用 `泛型` 来做类型定义
7.  多使用 `const` 定义变量
8.  私有属性和方法必须使用 `private` 关键字,
9.  暴露给外部的方法: 使用 `public` 关键字, 避免内部属性直接暴露给外部, 可以使用接口暴露
10. 避免强行继承, 可以使用组合, 或者是声明接口(interface) 使用(implements)

# 五、图片使用规范 #

原则：优先使用iconfont正常情况下图片格式时按照ui给定格式下载，无需自己额外转换图片格式，如若需要前端自己切图，图片格式应选择一下几种格式：

1.  GIF:需要图片为动画效果时使用，不然不要使用

*  优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小。
 *  可插入多帧，从而实现动画效果。
 *  可设置透明色以产生对象浮现于背景之上的效果。
 *  由于采用了8位压缩，最多只能处理256种颜色，故不宜应用于真彩色图片。

1.  SVG:

*  优点：文本文件、体积小、不失真、兼容性好
 *  可伸缩矢量图形
 *  SVG 使用 XML 格式定义图形
 *  SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
 *  是万维网联盟的标准

1.  PNG:

*  支持256色调色板技术，文件体积小。
 *  无损压缩
 *  最高支持48位真彩色图像以及16位灰度图像。
 *  支持Alpha通道的透明/半透明特性。
 *  支持图像亮度的Gamma校准信息。
 *  支持存储附加文本信息，以保留图像名称、作者、版权、创作时间、注释等信息。
 *  渐近显示和流式读写，适合在网络传输中快速显示预览效果后再展示全貌。
 *  使用CRC防止文件出错。
 *  最新的PNG标准允许在一个文件内存储多幅图像。

1.  JPEG

*  适用于储存24位元全采影像
 *  采取的压缩方式通常为有损压缩
 *  不支持透明或动画
 *  压缩比越高影像耗损越大，失真越严重
 *  压缩比在10左右肉眼无法�辨出压缩图与原图的差别

1.  WEBP

*  同时提供有损压缩和无损压缩两种图片文件格式
 *  文件体积小，无损压缩后，比 PNG 文件少了 45％ 的文件大小；有损压缩后，比 JPEG 文件少了 25% - 34% 文件大小
 *  浏览器兼容差，目前只支持客户端 Chrome 和 Opera 浏览器以及安卓原生浏览器(Andriod 4.0+)

# 六、团队约定 #

原则：优先考虑使用SVG代替其他格式图片

1.  内容图

*  多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大
 *  优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式
 *  尽量不使用PNG格式，PNG8 色位太低，PNG24 压缩率低，文件体积大

1.  背景图

*  背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片
 *  PNG 与 GIF 格式，优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率
 *  图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式
 *  图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式
 *  图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式 条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式

# 七、图片大小规则 #

*  PC平台单张的图片的大小应小于200KB。
 *  移动平台单张的图片的大小应小于100KB。

# 八、图片质量要求 #

*  上线的图片都应该经过压缩处理，压缩后的图片不应该出现肉眼可感知的失真区域
 *  60质量的JPEG格式图片与质量大于60的相比，肉眼已看不出明显的区别，因此保存 JPEG 图的时候，质量一般控制在60，若保真度要求高的图片可适量提高到 80，图片大小控制在200KB 以内

# 九、图片引入 #

Data URIs（base64编码）使用建议

*  适合更新频率高的小图片，如某些具备自定义功能的标题icon等
 *  转换成 Base64 编码的图片应小于 2KB
 *  移动端不使用 Base64 编码
 *  要兼容 IE6/IE7 的不使用
 *

# 十、组件编写规范 #

原则：可复用代码、逻辑请抽离成单独方法或组件，组件代码尽量控制在200行以内，以增加代码复用性和可读性。除命名、引用外，组件编写遵循react+ts编写规范。  
1、 命名

1.  文件夹名称、导出组件名称：采用开头用大写的驼峰方式名称（如：GlobalHeader）
2.  文件名称（包括样式文件）：采用开头用小写的驼峰方式名称（如：index.jsx）  
    2、注释：

*  多行注释：组件用途、参数说明、返回值描述和重要逻辑注释等占用多行时使用多行注释
 *  单行注释：简单逻辑注释等占用单行时使用单行注释

/**
     * 通用权限检查方法
     * Common check permissions method
     * @param authority 必需参数，当前路由权限
     * @param target 必需参数，通过路由所要渲染的页面
     * @return 通过的路由返回target，未通过路由返回403，没有的路由返回404
     */

//简单说明：使用单行注释

3、编写

1.  全面使用 ES6、ES7语法，优先使用解构赋值编写代码。
2.  注意区分变量、方法、类的大小写（和JS命名保持一致）。
3.  使用 className 代替 class 。
4.  使用 htmlFor 代替 for 属性。
5.  传递给 HTML 元素的自定义属性，需要添加 data-前缀。

4、引用

1.  统一采用开头用大写的驼峰方式名称。
2.  注意引用组件路径的大小写（重要）。

# 十一、工程目录规范 #

> ├─config //umi基础配置文件，项目路由文件所在地  
> ├─src //项目源码目录  
> ├─package.json //项目依赖配置文件

2.src文件主要目录：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aW95aW95YWI55SfJk1yLkxp_size_11_color_FF0000_t_70_g_se_x_16]

*  图片统一放在assets文件下，如某一个模块使用图标较多，可在assets下再加一个文件夹，以模块名命名即可。
 *  公共业务组件统一放在components下。
 *  src/models、src/ services文件下放置多个模块重复调用接口数据。
 *  公共方法、工具类统一放置在utils 。
 *  pages：以页面一级路由（模块）为单位存放代码并命名，每个模块下包含一下文件：

> ├─index.jsx //页面逻辑  
> ├─model.js //store:处理接口返回数据  
> ├─service.js //私有api接口  
> ├─style.less //私有样式文件  
> ├─mock.js //接口模拟数据  
> ├─views //私有组件存放地，非必须

# 十二、疑问解答与加群交流学习 #

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aW95aW95YWI55SfJk1yLkxp_size_20_color_FF0000_t_70_g_se_x_16_pic_center]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aW95aW95YWI55SfJk1yLkxp_size_11_color_FF0000_t_70_g_se_x_16]: /images/20220828/863e14af5da640f5bc0f8da7e2bdfafe.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aW95aW95YWI55SfJk1yLkxp_size_20_color_FF0000_t_70_g_se_x_16_pic_center]: /images/20220828/1e6fcfa2e92b49c2a52c1e50f10289ab.png