前端开发规范参考

最新推荐文章于 2024-06-21 01:02:08 发布
最新推荐文章于 2024-06-21 01:02:08 发布
阅读量3.8w 收藏 1
点赞数 1
分类专栏： 项目管理与测试管理 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44275820/article/details/120508208
版权
本文详细介绍了前端开发的规范和最佳实践，包括编码风格、框架使用、图片管理和组件编写等方面，旨在提升团队协作效率，确保代码质量和可维护性。重点强调了使用UMI+REACT+DVA+ANTD+TYPESCRIPT+LESS的开发技术栈，以及HTML、CSS、REACT的编码规范，还涵盖了图片格式选择和大小控制，以及工程目录和组件编写规则。
摘要由CSDN通过智能技术生成

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

前端开发规范参考

一、规范目的

  • 好的代码规范能够提高代码的可读性便于协作沟通，好的开发模式能够避免不必要的 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时，断行处理编写。
    不推荐
<Drawer closable={false} width='500px' title='商品详情' height='600px'>……</Drawer>

推荐

<Drawer
    closable={false}
    width="500px"
    title="商品详情"
    height="600px"
 > 
    ……
</Drawer>

2、CSS+LESS

2.1 通用规范

  1. 以组件为单位组织代码段，组件与组件间样式用/*======组件名 ====== */隔开，无组件嵌套则可不加注释。
  2. 超链接a标签样式书写顺序： a:link -> a:visited -> a:hover -> a:active。
  3. 0后面单位省略。
  4. 尽量使用复合属性。
    不推荐
 .ant-btn-primary{
    margin-top: 0;
    margin-left: 0;
    margin-right: 10px;
    margin-bottom: 4px;
 }

推荐

.ant-btn-primary{
    margin: 0 10px 4px 0;
}
  1. 命名
  • 图片的命名原则：根据模块名称命名，如一张图片多个模块使用，则根据功能命名。如：login.svg，icon_close.png
  • class命名原则：根据功能+标签命名(中间加“-”隔开)，如一个标签存在多个显示效果，则根据功能+标签+显示效果命名。如：search-form，ant-divider-horizontal，ant-divider-inline。

2.2 LESS编写规范
1.运算规范

  • 运算符前后统一加一个空格。
  • 注意运算单位，单位同时参与运算，乘除运算时需要特别注意，注:10px不等于10

Extend 名: 使用 -ext 结尾。
推荐属性书写顺序: 显示属性 -> 自身属性 -> 文本属性和其他修饰。
使用变量命名常用的数字和颜色。
列表型属性值 书写在单行时, 后必须跟一个空格。
每行不得超过 50 个字符，除非单行不可分割。
当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。

 .post,
 .page,
 .comment {
     line-height: 1.5;
 }

属性选择器中的值必须用双引号包围。
属性定义必须另起一行。
属性定义后必须以分号结尾。

    /* good */
  article[character="juliet"] {
      voice-family: "Vivien Leigh", victoria, female;
  }

推荐选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确
url() 函数中的路径加引号 如:background
url(“bg.png”); RGB颜色值必须使用十六进制记号形式 #rrggbb,少使用 rgb()

  • 带有alpha的颜色可以使用 rgba()。使用 rgba() 时每个逗号后必须保留一个空格。

3、REACT+TS

(1)、 通用规范

  1. 全面使用ES6、ES7语法，优先使用解构赋值编写代码。
  2. 命名原则：语义化，尽可能利用英文单词或其缩写。
  • 变量、常量、方法名、对象应采用小驼峰方式命名。 如：defaultData
  • 类、组件应采用大驼峰式方式命名。如：SearchForm
  1. 尽量使用三元运算符代替if else。
  2. 分号结束以增加代码可读性。
  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/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&nbsp;&nbsp;static&nbsp;propTypes&nbsp;&nbsp;static&nbsp;contextTypes&nbsp;&nbsp;state&nbsp;defaultProps&nbsp;&nbsp;static&nbsp;state&nbsp;&nbsp;其它静态的属性&nbsp;&nbsp;用于事件处理并且以属性的方式（onClick&nbsp;=&nbsp;e&nbsp;=>&nbsp;{...}）声明的方法&nbsp;&nbsp;其它实例属性&nbsp;&nbsp;constructor&nbsp;&nbsp;getChildContext&nbsp;（如非必要，少用）&nbsp;&nbsp;componentDidMount&nbsp;&nbsp;getDerivedStateFromProps&nbsp;&nbsp;shouldComponentUpdate&nbsp;&nbsp;getSnapshotBeforeUpdate&nbsp;&nbsp;componentDidUpdate&nbsp;&nbsp;componentWillUnmount&nbsp;&nbsp;事件处理方法&nbsp;&nbsp;其它方法&nbsp;&nbsp;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. 注意引用组件路径的大小写（重要）。

十一、工程目录规范

一、目录规范
1.项目主要目录结构

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

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

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

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

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

在这里插入图片描述

李先森&Mr.Li
关注
专栏目录
web前端开发参考手册全
09-12
css2.0，css3.0，Javascript参考手册，JavaScript核心参考手册，jQuery 1.3参考手册，jQuery 1.4参考手册，jQuery 1.7中文版手册，W3CSchool，w3c标准html5手册，xHTML参考手册，XMLHttp中文参考手册。 最新最全的手册哦
web前端开发规范参考文档
03-08
### Web前端开发规范知识点 #### 一、规范目的概述 本文档的核心目的是为了提升团队协作效率，确保代码质量，以及建立一套统一的编码风格规范。规范文档一经确认，所有前端开发人员都应按照该规范执行前台页面开发...
前端规范汇总（参考）
disedui3860的博客
07-12 219
1、命名 两种书写方式： ①连词线 ( - ) 分隔，如content_title； ②驼峰，又分为大驼峰（ContentTitle）和小驼峰（contentTitle）。 具体规范： ①文件名：小写，如包含多个单词时，单词之间使用半角的连词线 ( - ) 分隔； ②组件名：大驼峰，如Header.vue； ...
web前端开发参考手册系列——CSS参考手册
weixin_34335458的博客
06-21 305
http://www.phpstudy.net/css3/ CSS3非常强大，值得学习...    
前端开发参考大全
一江春水向东流
02-24 192
form表单提交，前端验证 参考：http://blog.csdn.net/n1143916111/article/details/71024864
前端参考网站汇总
emmmmmm的博客
10-20 393
1.Bootstrap中文网 https://www.bootcss.com/ 2.Bootstrap模板汇总 http://www.bootstrapmb.com/ 3....... https://getbootstrap.com/
前端开发规范手册前端开发规范手册
04-02
# 前端开发规范手册 此手册主要实现的目标：**代码一致性**和**最佳实践**。通过代码风格的一致性，降低维护代码的成本以及改善多人协作的效率。同时遵守最佳实践，确保页面性能得到最佳优化和高效的代码。 此...
阿里前端开发规范word文档
04-02
阿里前端开发规范旨在提供一套完整的前端工程师在项目开发过程中应当遵循的规则和标准，以确保代码质量、提高团队协作效率并降低维护成本。这套规范涵盖了命名规则、编码风格、注释规范、错误处理、模块化、性能优化...
阿里前端开发规范《word文档》
04-08
阿里前端开发规范是阿里巴巴集团为前端工程师...阿里前端开发规范不仅适用于阿里巴巴内部，也对整个前端社区有着积极的参考价值。无论是初学者还是经验丰富的开发者，都应该学习并实践这些规范，以提升自身开发能力。
阿里前端开发规范（word文档）
04-08
阿里前端开发规范是阿里巴巴集团为前端工程师制定的一套详尽的工作指南，旨在提高代码质量、提升团队协作效率、保持代码一致性。这套规范涵盖了HTML、CSS、JavaScript、工程化、性能优化等多个方面，对于任何前端...
前端项目规范化：手把手教你使用prettier和pre-commit（git hook或者husky）优化规范项目代码
tangdou369098655的博客
06-25 3358
下图为git hooks的官方示例，以.sample结尾。注意这些以.sample结尾的示例脚本是不会执行的，重命名后会生效是一些自定义的脚本，用于控制git工作的流程，分为客户端钩子和服务端钩子。客户端钩子包括：pre-commit、prepare-commit-msg、commit-msg、post-commit等，主要用于控制客户端git的提交工作流。服务端钩子：pre-receive、post-receive、update，主要在服务端接收提交对象时、推送到服务器之前调用。
前端开发可供参考的学习网址（官方库）
Serena_tz的博客
05-30 443
npm：https://www.npmjs.com/ Express：https://www.expressjs.com.cn/ BootCDN：https://www.bootcdn.cn/ Vue.js：https://cn.vuejs.org/ Swiper：https://www.swiper.com.cn/ Animate.css：https://animate.style/ Vant 3 ：https://youzan.github.io/vant/#/zh-CN/ Element ：http.
常见的前端开发规范
wsspz940214的博客
08-31 4985
本文为吸取各方意见加头脑风暴，整理而成，前端开发规范。包含编码规则、注意事项，开发工具以及插件等。
前端工程化-规范化篇
热门推荐
往事不回头,余生不将就
08-13 1万+
前言 这一篇文章主要是关于前端规范化的内容，前端规范化是我们践行前端工程化过程中的重要的组成部分 有利于项目维护，以及二次开发，减低维护成本，便于后续人员接手 为什么要有规范化 1、软件开发需要多人协同 2、不同的开发者具有不同的编码习惯和喜好 3、不同的喜好增加项目维护成本 4、每个项目或者团队需要统一的标准 哪些地方需要规范化 1、代码、文档、甚至是日志 2、开发过程中人为编写的成果 3、代码的标准化规范最为重要，因为代码的规范决定了项目的质量和可维护度， 实施规范化的方法 1、编码.
前端项目自测
D1561691的博客
03-29 716
前端校招精编面试解析大全点击这里即可获取完整版pdf查看厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）前端校招精编面试解析大全点击这里即可获取完整版pdf查看。
前端：2024年非常受欢迎非常火的 VueUI 库
最新发布
一些平时在开发过程中遇到的常见问题，分享给大家
06-21 2357
前端：2024年非常受欢迎非常火的 VueUI 库
less编码规范
weixin_30670925的博客
08-29 126
Less 编码规范 简介 因为自己最近写css用的比较多还是less，整理了一份less规范， 代码组织 代码按如下形式按顺序组织： @import 变量声明 样式声明 1 // ✓ 2 @import "est/all.less"; 3 4 @default-text-color: #333; 5 6 .page { 7 width: 9...
less开发（二）--基本语法
chrischeng9527的博客
11-21 453
（一）嵌套规则　　【1】less可以让我们以嵌套的方式编写层叠样式，先看下面这段CSS；.box-a .hd { height: 20px; } .box-a .bd .txt { color: #000; } .box-a .other { position: relative; } 在LESS中，可以用嵌套方式写以上代码：.box-a{ .hd{ height
（五）LESS 规范
lj1530562965的博客
10-26 488
LESS 规范代码组织避免嵌套层级过多 代码组织 1)将公共less文件放置在style/less/common文件夹 例:// color.less,common.less 2)按以下顺序组织 1、@import; 2、变量声明; 3、样式声明; @import "mixins/size.less"; @default-text-color: #333; .page { width: 960px; margin: 0 auto; } 避免嵌套层级过多 将嵌套深度限制在3级。对于超过4级的嵌套
前端开发规范与标准指南
"Web前端开发规范手册" 前端开发规范手册旨在提升团队协作效率，确保代码质量和可维护性。规范涵盖了多个方面，包括文件命名规则、文件存放位置、CSS和HTML的书写规范、JavaScript规范、图片处理、注释要求以及CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李先森&Mr.Li

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值