【团队建立】前端编码规范

---

  

---

概览

前端技术的迭代速率较快，相干的框架和知识点也越来越多，在开发新项目时可供选择的技术栈也越来越多。对于必要多人团队写作的场景下，怎样保证各人共同的编码规范，用一套约定俗成的尺度举行开发至关重要，可以更好的提升本身的开发体验。
接下来，重要解说不同前端领域的编码规范以合格式化代码，本质上底层照旧前端三件套的编程头脑。
焦点：语义化、代码清楚明确、注释美满，代码配置 < 沟通 < 约定 < 文档 < 体系
语雀原文档：https://www.yuque.com/xixifusi-eicch/ma8xgr/skhybs2u0glzs5p5?singleDoc# 《编码规范》
资源

推荐几款代码规范文档库，发起收藏！ - 掘金
TGideas文档库
Google Style Guides

• https://guide.aotu.io/index.html（首选）
  
• https://github.com/airbnb/javascript
  
• https://github.com/airbnb/javascript/tree/master/react
  
• https://github.com/ryanmcdermott/clean-code-javascript
  
• https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines
  

情况

• VUE 新项目推荐开发情况：Vue 3.4.1 + Node 20.11.1 + Pnpm 9.6 + Vite 5.2 + TypeScript 5.2.2
  
• Node 新项目推荐开发情况：Node 20.11.1 + TypeScript 5.2.2
  

目录

我们平常开发新项目标时候，往往会利用第三方工具举行生成基础的项目模板，这些文件目录代表的意思如下：
名称寄义.vscodevscode 调试步伐、样式等当地化配置public公共文件夹，存放图标、全局配置api接口文件夹assets静态资源存放，包含字体图标、图片等components抽离的全局公共组件（页面逻辑过多，可分为一级、二级、三级）config相干的配置文件，一样平常是静态相干的hooks具有响应式数据特性/生命周期的方法抽离layout页面的布局组件，包含侧边栏、头部、底部、内容区，单页面应用较为常见router路由组件script脚本执行文件夹，存放常用的主动化脚本store当前页面的数据存储状态（可选是否持久化）style页面的样式，会包含 重置样式、组件样式、自定义样式 等utils工具函数，包含正则、http请求、工具函数等views项目标视图页面，详细可拆分typesTS 项目专有，包含 主动引入、路由声明等 .d.ts 文件.etc一些组件配置，包含 vite 情况、eslint、prettier 样式、.gitignore 等 上述标红的文件夹会有多个文件，一样平常的开发规范是统一通过 index.ts 暴露收口，在 modules 举行编写不同模块的代码逻辑，下面是针对大型项目一些补充说明：

• views 满足上面的定名规则外，页面入口可接纳 index 举行定名
  
• 静态资源（图片、svg等）使用 下划线 ‘_’，逻辑文件 JS/TS 使用 小驼峰定名（camelCase）
  
• 所有业务逻辑文件夹（包含 css 文件名 简单 vue 文件可以接纳大驼峰定名）统一接纳 **短横线 ‘-’ **举行连接，原则上不凌驾 3 个单词
  

工具

前端工具的美满，使得部分样式都给我们规范好了，极大的提高了个人开发者的便利性，但是这种工具的限制链路不是越多越好，尽量把常用的挑出来举行开发，这里可以参考我之前的文章。
前端项目工程化之代码规范_扁平化 代码开发规范-CSDN博客
⭐pnpm 9

新项目开发统一接纳 pnpm （ node 情况 18+ ）安装包，并设置淘宝镜像源。

1. // 1. 安装 pnpm
2. npm install -g pnpm
4. // 2. 设置淘宝镜像源
5. pnpm config set registry https://registry.npmmirror.com/
7. // 3. 在项目中使用 pnpm 安装依赖包
8. pnpm install

复制代码

⭐ESLint 8

ESLint 是一个静态代码分析工具，重要用于查找和修复代码中的潜伏标题、错误、不划一和不推荐的模式。是资助你提高代码质量、制止常见的错误，以及确保团队成员遵循统一的编码约定。
这里必要根据不同的项目框架举行详细的配置，如：VUE React TS，这里网上有很多参考资料举行参考

1. // 1. 安装 eslint 和 vue 插件
2. pnpm i eslint@8 eslint-plugin-vue -D
4. // 2. 安装 prettier 和 相关插件
5. pnpm i prettier@3 eslint-config-prettier eslint-plugin-prettier -D
7. // 3. TS 解析器安装
8. pnpm i @typescript-eslint/parser -D
10. // 4. TS
11. pnpm i @typescript-eslint/eslint-plugin -D

复制代码

1. module.exports = {
2.   root: true,
3.   parser: 'vue-eslint-parser',
5.   // 环境设置
6.   env: {
7.     es6: true,
8.     node: true,
9.     browser: true
10.   },
12.   // 解析选项
13.   parserOptions: {
14.     sourceType: 'module',
15.     ecmaVersion: 'latest',
17.     // TS 解析器配置
18.     parser: '@typescript-eslint/parser'
19.   },
21.   // 插件
22.   plugins: ['vue'],
24.   // 引入的语法校验规则
25.   extends: [
26.     'plugin:vue/vue3-recommended',
27.     'plugin:@typescript-eslint/recommended',
29.     'prettier',
30.     'plugin:prettier/recommended' // eslint-plugin-prettier 规则放到最后
31.   ],
33.   // 自定义规则
34.   rules: {
35.     'no-console': 'off',
36.     'no-debugger': 'off',
37.     'no-unused-vars': 'warn',
38.     'prefer-rest-params': 'warn',
40.     'vue/html-indent': 'off',
41.     'vue/html-self-closing': 'off',
42.     'vue/max-attributes-per-line': 'off',
43.     'vue/multi-word-component-names': 'off',
44.     'vue/no-setup-props-destructure': 'warn',
46.     // TS 冲突规则
47.     '@typescript-eslint/no-unused-vars': 'off',
49.     // 强制组件在模板中使用 kebab-case
50.     'vue/component-name-in-template-casing': ['warn', 'kebab-case'],
52.     // 自闭和单标签元素
53.     'vue/html-self-closing': [
54.       'warn',
55.       {
56.         html: {
57.           void: 'always',
58.           normal: 'always',
59.           component: 'always'
60.         },
61.         svg: 'always',
62.         math: 'always'
63.       }
64.     ]
65.   },
67.   // 配置忽略文件
68.   ignorePatterns: ['node_modules/', 'dist/', 'public/', 'pnpm-lock.yaml']
69. }

复制代码

⭐Prettier 3

Prettier是一个代码格式化工具，专注于对代码举行格式化，使其符合划一的风格规范。它会主动调整代码的缩进、换行、引号等，确保代码在不同的编辑器和情况中具有划一的表面。
简单来说，ESLint更注重你的代码是否符合规范，Pretter则是为你提供了按照规范格式化代码的能力。

1. {
2.   "tabWidth": 2,
3.   "semi": false,
4.   "printWidth": 90,
5.   "endOfLine": "auto",
6.   "singleQuote": true,
7.   "trailingComma": "none"
8. }

复制代码

忽略格式化的文件本质上和 .gitignore 大差不差（可以忽略）

1. # Logs
2. logs
3. *.log
4. npm-debug.log*
5. yarn-debug.log*
6. yarn-error.log*
7. pnpm-debug.log*
8. lerna-debug.log*
10. node_modules
11. dist
12. dist-ssr
13. *.local
15. # Editor directories and files
16. .vscode/*
17. !.vscode/extensions.json
18. .idea
19. .DS_Store
20. *.suo
21. *.ntvs*
22. *.njsproj
23. *.sln
24. *.sw?
26. # build report file
27. report.html

复制代码

⭐Husky 9

https://juejin.cn/post/7355535964612100108
https://juejin.cn/post/7041768022284976165
这个重要是限制提交的 commit 信息规范即可，不能随意提交，对此没要求的可以不做。

1. // 1. 安装钩子触发工具 husky
2. pnpm i husky@9 -D
4. // 2. 执行配置脚本
5. npx husky init
7. // 3. 安装 commitlint 规范提交信息
8. pnpm i @commitlint/cli @commitlint/config-conventional -D
10. // 4. 新建 commitlint.config.ts 校验文件
12. // 5. 新建 commit-msg husky 规范提示消息
13. #!/bin/sh
15. npx --no-install commitlint -e
17. // 6. husky 新建 pre-commit
18. pnpm run lint
20. // 7. 提交前 eslint 检查代码
21. 具体参考 package.json 命令配置

复制代码

1. module.exports = {
2.   extends: ['@commitlint/config-conventional'],
4.   rules: {
5.     'type-enum': [
6.       2,
7.       'always',
8.       [
9.         'feat', // 新功能（feature）
10.         'bug', // 此项特别针对bug号，用于向测试反馈bug列表的bug修改情况
11.         'fix', // 修补bug
12.         'ui', // 更新 ui
13.         'docs', // 文档（documentation）
14.         'style', // 格式（不影响代码运行的变动）
15.         'perf', // 性能优化
16.         'release', // 发布
17.         'deploy', // 部署
18.         'refactor', // 重构（即不是新增功能，也不是修改bug的代码变动）
19.         'test', // 增加测试
20.         'chore', // 构建过程或辅助工具的变动
21.         'revert', // feat(pencil): add ‘graphiteWidth’ option (撤销之前的commit)
22.         'merge', // 合并分支， 例如： merge（前端页面）： feature-xxxx修改线程地址
23.         'build' // 打包
24.       ]
25.     ],
27.     // subject 不做大小写限制
28.     'subject-case': [0]
29.   }
30. }

复制代码

⭐vite 5 构建

1. import { defineConfig } from 'vite'
2. import vue from '@vitejs/plugin-vue'
3. import svgLoader from 'vite-svg-loader'
4. import { fileURLToPath, URL } from 'node:url'
5. import { visualizer } from 'rollup-plugin-visualizer'
6. import viteCompression from 'vite-plugin-compression'
8. // Element-Plus 按需引入
9. import AutoImport from 'unplugin-auto-import/vite'
10. import Components from 'unplugin-vue-components/vite'
11. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
13. export default defineConfig({
14.   base: process.env.VITE_PUBLIC_PATH,
15.   plugins: [
16.     vue(),
17.     svgLoader(),
18.     viteCompression(),
19.     // TODO 性能优化原则在出问题时候去做动作，不然效果不明显，没有成就感
20.     visualizer({
21.       title: '打包性能分析报告',
22.       filename: 'report.html'
23.     }),
24.     AutoImport({
25.       dts: 'types/auto-imports.d.ts',
26.       resolvers: [ElementPlusResolver()]
27.     }),
28.     Components({
29.       dts: 'types/components.d.ts',
30.       extensions: ['vue'],
31.       resolvers: [ElementPlusResolver()]
32.     })
33.   ],
35.   // 路径优化
36.   resolve: {
37.     alias: {
38.       '@': fileURLToPath(new URL('./src', import.meta.url)),
39.       '#': fileURLToPath(new URL('./types', import.meta.url))
40.     }
41.   },
43.   // 开发服务器配置
44.   server: {
45.     // 端口号
46.     port: 5202,
47.     // 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy
48.     proxy: {
49.       '/api': {
50.         target: 'http://www.xxxx.com',
51.         changeOrigin: true
52.       },
53.     },
54.     // 预热文件以提前转换和缓存结果，降低启动期间的初始页面加载时长并防止转换瀑布
55.     warmup: {
56.       clientFiles: ['./index.html', './src/{views,components}/*']
57.     }
58.   },
60.   // TODO 后台项目不用配置，方便排查问题
61.   esbuild: {
62.     drop: process.env.MODE === 'development' ? ['console', 'debugger'] : []
63.   }
64. })

复制代码

⭐package.json

这里是全局 安装包与命令执行的入口文件，常用的配置如下所示：

1. "scripts": {
2.   "format": "prettier --write src/",
3.   "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx,.cjs,.mjs --fix --ignore-path .gitignore",
4. },

复制代码

注释

https://segmentfault.com/a/1190000044789971
代码注释是软件开发中的重要构成部分，它资助开发者理解代码的功能和目标，同时也是代码维护和团队协作的基础，一个清楚的注释规范可以或许提高代码的可读性和维护性

• 设计复杂业务逻辑的处置惩罚函数必须说明函数的寄义
  
• 模块化封装的代码必要说明该模块的使用说明和功能先容
  
• 团队成员的注释风格须保持划一性，以保证注释与代码的同步性
  

1. /**
2. * 斐波那契数列（用于复杂逻辑功能的说明）
3. * @param {number} n 斐波那契数列的第n项
4. * @returns {number} 返回第n项的值
5. */
7. const fibonacciDP = (n) => {
8.   let fib = [0, 1]
9.   for (let i = 2; i <= n; i++) {
10.     fib[i] = fib[i - 1] + fib[i - 2]
11.   }
12.   return fib[n]
13. }
15. // 斐波那契传入的数字(描述字段、函数、配置...的简短说明)
16. const num = 10
17. console.log(fibonacciDP(10))

复制代码

特殊注释标记如下：

1. // TODO：标记尚未实现或需要进一步工作的代码部分，提醒开发者将来需要完成的功能
2. // FIXME：指出代码中已知的问题或错误，这些代码可能存在问题或不稳定，需要修复
3. // HACK：指示代码中的临时解决方案或不够优雅的实现，通常是为了快速解决问题，
4. // 但需要更好的长期解决方案
5. // NOTE：用于强调代码中重要的信息或解释，如复杂逻辑的解释或特定实现方式的原因
6. // OPTIMIZE：提示代码性能可以优化，虽然代码可能没有问题，但存在提升效率的空间
7. // REVIEW：表示代码需要进一步审查，以确保满足需求或寻找更好的实现方法
8. // DEPRECATED：表明代码已经过时，不推荐使用，可能在未来会被移除或替换
9. // NOCOMMIT：警告标记，表示代码不应该提交到版本控制系统，通常用于临时改动，如调试代码

复制代码

GIT

固然现在有很多的可视化工具可以或许资助我们举行分支利用，这也很方便，从原有的命令行利用中解放出来，这里也可以大概了解一下相干利用。
常用命令

git rebase详解（图解+最简单示例，一次就懂）-CSDN博客
图解 Git 基本命令 merge 和 rebase - Michael翔 - 博客园
https://segmentfault.com/a/1190000044038056
先容 - 《阮一峰 Git 教程》 - 书栈网 · BookStack
https://pure-admin.github.io/pure-admin-doc/pages/git/

1. // 获取远程最新的分支代码
2. // 本地没影响，只是更新远程跟踪分支的列表
3. git remote update origin --prune
5. // 代码添加到缓存区
6. git add .
8. // 代码添加到 commit
9. git commit -m "feat: 提交信息"
11. // 创建分支
12. git checkout -b xxx
14. // git reset（移动 head 指针
15. // 参数 soft 不改变工作区和缓存区、默认 mixed 改变缓存区、hard 改变缓存区和工作区
17. // 修复错误提交 push，可指定Head，不然默认当前状态
18. git reset Head^ --hard
19. git push -f
22. // git revert（选择一个 commit 重新制作并提交，新加一个 commmit 多了一条记录）
23. git revert xxx
25. // 后续合错了分支优先推荐 git reset
27. // git merge（新增/基准线更改）
28. // 本质是合并代码，主分支拉取分支后提前的直接转移指针，未提前的需要新增 提交信息结点
31. // git rebase（变基修改）
32. // 将目标元素 rebase 到当前分支上，注意拉齐水平线，当前分支代码在最新 commit 节点

复制代码

类型说明

类型描述feat新增开发分支提交 featurefix修复 bugdocs仅仅是修改了文档，比如 readme、changelog 等style仅仅是修改了空格、格式缩进、逗号等等，不改变代码逻辑refactor代码重构，没有新功能或者修复 bugperf优化相干，比如提升性能、体验test测试用例，包括单位测试、集成测试等chore改变构建流程、或者增加依靠库、工具等revert回滚到上一个版本

• vscode 推荐插件：git-commit-lint-vscode
  

上线流程

• 首先必要在 **Matrix （需求管理平台）**创建当前开发任务的描述信息
  
• 获取 Matrix Id，拉取最新 master 分支的代码到当地并创建分支，如：dev_1803329addProduct_1
  
• 开发完成之后拉取最新的 release_qa 分支，并合并代码
  
• 发布到 qa 测试情况转交测试，没标题 合并到 **release **分支发布预发
  
• 预发测试没标题，代码合并到 master ，打上 tag ，并推送到远程 origin
  
• 利用公司的主动化部署平台 Jean 举行部署发布，发布完成注意监控非常
  

HTML

• DOCTYPE 声明一样平常默认，注意 编码** ‘UTF-8’**，语言 ‘zh-CN’
  
• 使用语义化标签，空元素使用单个自闭和标签，其余不可省略
  
• HTML标签名、类名、标签属性和大部分属性值统一用小写
  
• 层级布局块级元素独立一行，内联元素视场景处置惩罚，内联元素不支持嵌套块级
  
• 不使用 < 和 > 等特殊元素，防止标签相干层级失效，浏览器解析错误
  

CSS

CSS 目前发展出了多个分支，包含：

• 原生 css ，也包含不同平台推出的语言（wxss、wxs）
  
• 预处置惩罚 css，对原生样式举行增强，终极转换为 css （sass、scss、less等）
  
• 组件框架，开箱即用的第三方组件库（Element、Antd）
  
• 原子化框架，响应式、高度集成的类库（Tailwind）
  

在开发大型项目过程中，上述样式多少会用到，对于详细的编码规范来说，总结如下：

• class 名称小写，id 重要表明特殊的 dom 元素，**短斜杠 ‘-’ 分割，**不凌驾3个，子元素前面需跟随父元素
  
• 自定义 css 变量使用 – 作为首部，在全局 :root 举行声明定义，详细的种别后面出一篇前端设计规范文章
  
• 原子类 css 注意类名的次序、是否重复、抽离公共样式等，可以借助格式化插件或者第三方库实现
  
• 组件样式的重写首先根据官方文档举行修改，或者** :deep() 样式穿透 优先级 !important（少用）**修改
  

module

https://juejin.cn/post/6844904080955932680
前端的底层编码风格分为两种，一种是 CommonJS、一种是 ES6 语法，这两种风格的区别如下：

• 首先推荐统一接纳 **ES6 模块化 **语法作为首选编程范式
  
• 待补充…
  

JS

JS 是前端的魂魄所在，也是处置惩罚统统业务逻辑的入口，所以这部分的规范至关重要。
依靠导入

1. import React from 'react'
2. import { useQuery } from 'react-query'
4. import { PropTypes } from 'prop-types'
5. import styled from 'styled-components/native'
7. import colors from '@/styles/colors'
8. import { fetchData } from '@/lib/api'
9. import ErrorImg from '@/assets/images/error.png'
10. import { RouteData, RouteOLG } from '@/types/route'
11. import MapVersionDropdown from '@/components/map-version-dropdown'
13. import {
14.   generateRandomColor,
15.   generateStreamPoint,
16.   generateStreamPolyline,
17.   isInputStreamValid,
18.   generateStreamLink,
19. } from '@/lib/utils'

复制代码

• React 内置模块
  
• 外部引入的模块
  
• 本身编写的文件
  
  
  • 样式文件
    
  • 图片资源文件
    
  • TS编写的类型定义文件
    
  • 引入自定义的接口
    
  • 本身编写的组件
    
  
  
• 一行引入多个模块导致分行的，可以放在末了
  

这里以 React 的项目工程举例，相干等级如上述说明，总体来说在不脱离大类的条件下，要保证长度阶梯性递增，符合开发职员的视觉规范。
变量定名

• 变量接纳 **小驼峰 **定名,一样平常为名词居多，原则上不凌驾 3个单词
  
• 属性值为互斥关系的统一接纳 is 开头，如：isOpenDialog
  
• 全局静态变量接纳 大写单词定名 下划线分割，如：const TY_EBK_CONFIG
  
• 定名的单词尽量普通易懂，原则上使用英文单词（可缩写），制止汉字拼音（特殊情况除外）
  
• 方法定名使用动词，描述变乱逻辑，一样平常场景推荐使用 **箭头函数书写 ( ) => { } **，一样平常不受this影响，遵循函数时编程：https://juejin.cn/post/6844903936378273799
  
• 方法与数据相干的常用 get post 开头，与逻辑处置惩罚相干的常用 handle（最常用） update delete pre generate close 开头，条件处置惩罚/判定的常用 **isValidate judge isSatify condition **
  

计谋模式

1. // 为了解决3层以上的if/else、switch判断，可以使用对象的形式存储
3. const { role } = { role: "ADMIN" };
5. function AdminUser() {
6.   console.log("ADMIN");
7. }
9. function EmployeeUser() {
10.   console.log("EMPLOYEE");
11. }
13. function NormalUser() {
14.   console.log("NormalUser");
15. }
16. const components = {
17.   ADMIN: AdminUser,
18.   EMPLOYEE: EmployeeUser,
19.   USER: NormalUser,
20. };
22. const Component = components[role];
23. Component();

复制代码

条件判定

1. // 函数处理逻辑，可以提前结束，而不是包裹在正确的 {} 内部
2. if(!isAuto) return √
4. if(isAuto) {
5.   xxx
6.   xxx
7.   xxx
8. } x
10. // 单条件渲染
11. { isAuto || 'default' }
12. {streamOLGList.length > 0 && <StreamResultList />}
15. // 函数执行判断，简单逻辑优先采用三元运算符
16. const { role } = user;
18. return role === ADMIN ? <AdminUser /> : <NormalUser />;

复制代码

解构赋值

解构赋值 - JavaScript | MDN

1. // 对象的解构赋值
2. const obj = { a: 1, b: 2 };
3. const { a, b } = obj;
5. // 数组的解构赋值
6. const x = [1, 2, 3, 4, 5];
7. const [y, z] = x;

复制代码

模板字符串

1. // 避免使用字符串 + 号 连接，会造成不必要的栈内存消耗
3. const userDetails = `${user.name}'s profession is ${user.proffession}`
5. return <div> {userDetails} </div>

复制代码

TS

前言

https://juejin.cn/post/6872111128135073806
TS 本质上是为了规范编码，利用强类型举行预编译，提前检查编码的错误。但是由于必要限制字段的类型，占用一部分开发时间，对于功能来说增益不大，会压缩原本的工期，下面是适用的场景：

• 工具类、基础建立的团队内部工具
  
• 业务交互涉及少、前端展示多的网页
  
• 团队要求规范严格、成员基础好、开发时间充足
  

文件声明

1. // <reference types="vite/client" />
3. // 找不到模块“xxx.vue”或其相应的类型声明
5. // vite-env.d.ts 防止引入.vue 文件标红未找到模块
6. declare module '*.vue' {
7.   import { ComponentOptions } from 'vue'
8.   const componentOptions: ComponentOptions
9.   export default componentOptions
10. }

复制代码

组件引入

Node

【超多代码、超多图解】Node.js一文全解析_node技术分析图示-CSDN博客
VUE

组件闭合

1. // 组件内部没有子节点，使用自闭合标签，提高了可读性
2.    
3. <follow-track
4.   v-model:currentTab="currentTab"
5.   :shop-id="shopId"
6. />

复制代码

Fragments 语法

1. // 始终使用 Fragment 而不是 Div。
2. // 它可以保持代码整洁，并且也有利于性能，因为在虚拟 DOM 中创建的节点少了一个
4. return (
5.   <>
6.   <component-a />
7.   <component-b />
8.   <component-c />
9.   </>
10. );

复制代码

React

组件定名

1. //map-version-dropdown.tsx
2. export default function MapVersionDropdown(){}

复制代码

• 文件使用 - 连接，组件对应文件名称使用大驼峰定名
  

属性定名

1. const [isTruckTpra, setIsTruckTpra] = useState<boolean>(true)
2. const [streamOLGList, setStreamOLGList] = useState<Stream['streamOLGList']>(
3.     [],
4.   )

复制代码

• 响应式属性使用useState定名，使用小驼峰定名，至少2个字符以上
  
• 数据状态不影响UI变化的，使用一样平常数据即可，不用响应式数据
  

变乱方法外部定义

1. const submitData = () => dispatch(ACTION_TO_SEND_DATA);
3. return <button onClick={submitData}>This is a good example</button>;

复制代码

• 复杂的变乱方法必要在语法外部定义
  
• 简单的如状态变化可以在内部定义，尽量控制在一行以内
  

微信小步伐

微信小步伐设计指南 | 微信开放文档
【第二周】基础语法学习-CSDN博客

• 小步伐设计突出重点，页面尽量简洁清楚
  
• 组件在单页面按需引入，尽量不用全局组件
  

Taro 跨端

工具函数

HTTP

**展示前端 **重要是获取数据和前台页面的交互，所以网络模块的封装至关重要，步骤如下：

• 封装 axios 构建 TyHttp 类
  
• 生成实例，构造通用请求工具函数
  
• 新建 api 文件夹、index.ts 作为主入口 modules 放置各模块的请求
  
• 此中 modules 文件小写定名，内里使用 类 收口，静态方法隔离不同请求
  

参考代码如下所示：

1. import { router } from '@/router/'
2. import { ElMessage } from 'element-plus'
3. import { RequestMethods, TyHttpRequestConfig } from './types.d'
4. import { urlConfigResolver } from '@/utils/microAppConfigResolver'
5. import Axios, { type AxiosInstance, type AxiosRequestConfig } from 'axios'
7. const defaultConfig: AxiosRequestConfig = {
8.   // 请求超时时间
9.   timeout: 30000,
10.   headers: {
11.     Accept: 'application/json, text/plain, */*',
12.     'Content-Type': 'application/json',
13.     'X-Requested-With': 'XMLHttpRequest'
14.   },
15.   baseURL: urlConfigResolver()
16. }
18. class TyHttp {
19.   constructor() {
20.     this.httpInterceptorsRequest()
21.     this.httpInterceptorsResponse()
22.   }
24.   /** 默认控制台格式化输出数据 */
25.   private static formatData(method: string, url: string, data: any): void {
26.     console.log(`%c${method} %c${url}`, 'color: #00f', 'color: #f00', data)
27.   }
29.   /** 初始化配置对象 */
30.   private static initConfig: TyHttpRequestConfig = {
31.     beforeRequestCallback(config) {
32.       // console.log('beforeRequestCallback', config)
33.     },
34.     beforeResponseCallback(response) {
35.       const { code, message } = response.data
36.       // TyHttp.formatData(response.config.method!, response.config.url!, response.data)
37.       if (code == 200) {
38.         return response.data
39.       }
40.       if (code == 401) {
41.         localStorage.clear()
42.         // 强制重新登录
43.         if (window.__MICRO_APP_ENVIRONMENT__) {
44.           const baseRouter = window.microApp.router.getBaseAppRouter()
45.           baseRouter.push('/login')
46.         } else {
47.           router.push('/login')
48.         }
49.       }
50.       // 错误处理
51.       ElMessage.error({
52.         type: 'error',
53.         grouping: true,
54.         message: message
55.       })
56.     }
57.   }
59.   /** 保存当前Axios实例对象 */
60.   private static axiosInstance: AxiosInstance = Axios.create(defaultConfig)
62.   /** 设置请求拦截器 */
63.   private httpInterceptorsRequest(): void {
64.     TyHttp.axiosInstance.interceptors.request.use(
65.       async (config: TyHttpRequestConfig): Promise<any> => {
66.         // 支持单个接口传入请求拦截判断
67.         if (typeof config.beforeRequestCallback === 'function') {
68.           config.beforeRequestCallback(config)
69.           return config
70.         }
71.         // 支持全局请求拦截判断
72.         if (TyHttp.initConfig.beforeRequestCallback) {
73.           TyHttp.initConfig.beforeRequestCallback(config)
74.           return config
75.         }
76.       },
77.       (error) => {
78.         return Promise.reject(error)
79.       }
80.     )
81.   }
83.   /** 设置响应拦截器 */
84.   private httpInterceptorsResponse(): void {
85.     TyHttp.axiosInstance.interceptors.response.use(
86.       (response: any) => {
87.         // 支持单个接口传入请求拦截判断
88.         const $config = response.config
89.         if (typeof $config.beforeResponseCallback === 'function') {
90.           $config.beforeResponseCallback(response)
91.           return response.data
92.         }
93.         // 支持全局请求拦截判断
94.         if (TyHttp.initConfig.beforeResponseCallback) {
95.           return TyHttp.initConfig.beforeResponseCallback(response)
96.         }
97.         return response
98.       },
99.       (error) => {
100.         const { status } = error.response
101.         console.log(error, status)
102.         if (status == 401) {
103.           ElMessage.error('登录状态失效，请重新登录')
104.           localStorage.clear()
105.           // 强制重新登录
106.           if (window.__MICRO_APP_ENVIRONMENT__) {
107.             const baseRouter = window.microApp.router.getBaseAppRouter()
108.             baseRouter.push('/login')
109.           } else {
110.             console.log(router)
111.             router.push('/login')
112.           }
113.           throw new Error('登录状态失效，请重新登录')
114.         } else {
115.           ElMessage.error('网络失效')
116.           return Promise.reject(error)
117.         }
118.       }
119.     )
120.   }
122.   /** 通用请求工具函数 */
123.   public request<T>(
124.     method: RequestMethods,
125.     url: string,
126.     param?: AxiosRequestConfig,
127.     axiosConfig?: TyHttpRequestConfig
128.   ): Promise<T> {
129.     const config = {
130.       method,
131.       url,
132.       ...param,
133.       ...axiosConfig
134.     } as TyHttpRequestConfig
136.     // 单独处理自定义请求/响应回调
137.     return new Promise((resolve, reject) => {
138.       TyHttp.axiosInstance
139.         .request(config)
140.         .then((response: any) => {
141.           resolve(response)
142.         })
143.         .catch((error) => {
144.           reject(error)
145.         })
146.     })
147.   }
149.   /** 单独抽离的post工具函数 */
150.   public post<T, P>(
151.     url: string,
152.     params?: AxiosRequestConfig<T>,
153.     config?: TyHttpRequestConfig
154.   ): Promise<P> {
155.     return this.request<P>('post', url, params, config)
156.   }
158.   /** 单独抽离的get工具函数 */
159.   public get<T, P>(
160.     url: string,
161.     params?: AxiosRequestConfig<T>,
162.     config?: TyHttpRequestConfig
163.   ): Promise<P> {
164.     return this.request<P>('get', url, params, config)
165.   }
166. }
168. export const http = new TyHttp()

复制代码

1. import { http } from '@/utils/http'
3. class UserAccount {
4.   // 登录接口
5.   static async login(data) {
6.     return http.post('/xxx', { data })
7.   }
9.   // 登出接口
10.   static async logout(data) {
11.     return http.post('/xxx', { data })
12.   }
14.   // 获取信息
15.   static async getUserInfo() {
16.     return http.get('/xxx')
17.   }
18. }
20. export default UserAccount

复制代码

1. import UserAccount from './modules/user'
2. import GlobalConfig from './modules/config'
4. export { UserAccount , GlobalConfig }

复制代码

防抖节流

1. // 深拷贝
2. const deepClone = (target: any, map = new WeakMap()) => {
3.   if (typeof target !== 'object' || target === null) return target
5.   if (map.get(target)) return map.get(target)
7.   const constructor = target.constructor
8.   if (/^(Function|RegExp|Date|Map|Set)$/i.test(constructor.name))
9.     return new constructor(target)
11.   const cloneTarget = Array.isArray(target) ? [] : {}
12.   map.set(target, cloneTarget)
14.   for (const key of Object.keys(target)) {
15.     // @ts-ignore
16.     cloneTarget[key] = deepClone(target[key], map)
17.   }
18.   return cloneTarget
19. }
21. // 防抖
22. let timer: NodeJS.Timeout | null = null
23. function debounce(fn: any, delay: number, immediate: boolean) {
24.   return function () {
25.     // @ts-ignore
26.     const context = this
27.     const args = arguments
29.     if (timer) clearTimeout(timer)
31.     if (immediate) {
32.       const callNow = !timer
33.       timer = setTimeout(() => {
34.         timer = null
35.       }, delay)
37.       if (callNow) fn.apply(context, args)
38.     } else {
39.       timer = setTimeout(() => {
40.         fn.apply(context, args)
41.       }, delay)
42.     }
43.   }
44. }
46. // 节流
47. function throttle(fn: any, delay: number) {
48.   let preTime = 0
50.   return function () {
51.     // @ts-ignore
52.     const context = this
53.     const args = arguments
55.     const nowTime = +new Date()
56.     if (nowTime - preTime >= delay) {
57.       fn.apply(context, args)
59.       preTime = nowTime
60.     }
61.   }
62. }
64. export { deepClone, debounce, throttle }

复制代码

正则匹配

1. // 去除首尾空格
2. const trim = (str) => {
3.   return str.replace(/(^\s*)|(\s*$)/g, '')
4. }
6. // 匹配某个字符出现的个数
7. const matchCount = (str, char) => {
8.   // 需要转义的字符
9.   const specialChars = ['.', '*', '+', '?', '|', '(', ')', '[', ']', '{', '}', '\\']
10.   if (specialChars.includes(char)) {
11.     char = '\\' + char
12.   }
13.   return (str.match(new RegExp(char, 'g')) || []).length
14. }
16. // 移除输入字符串 value 中所有非数字和非点号的字符，点号最多只能出现一次
17. const removeNonNumeric = (value) => {
18.   if (value === '') {
19.     return ''
20.   }
22.   // 移除点开头的点号和0开头的数字
23.   let result = value.replace(/^\./, '').replace(/^0+/, '0')
25.   result = result.replace(/[^\d.]/g, '').replace(/(\d+\.\d*).*/, '$1')
27.   // 字符串存在一个点号并且后面没有数字，则不判断
28.   const array = result.split('.')
29.   if (array.length > 1 && array[1] === '') {
30.     return result
31.   }
33.   // 字符串最后一个字符是0，不判断
34.   if (result.endsWith('0')) {
35.     return result
36.   }
38.   return parseFloat(result)
39. }
41. export { trim, matchCount, removeNonNumeric }

复制代码

日期格式

1. import dayjs from 'dayjs'
3. // 格式化特定日期
4. const formatDate = (date, formatStr = 'YYYY-MM-DD') => {
5.   return dayjs(date).format(formatStr)
6. }
8. // 获取当前日期并格式化
9. const getCurrentDate = (formatStr = 'YYYY-MM-DD HH:mm') => {
10.   return dayjs().format(formatStr)
11. }
13. // 获取是周几
14. const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
15. const getWeekDay = () => {
16.   const index = dayjs().day()
17.   return weekDays[index]
18. }
20. // 判断凌晨 上午 中午 下午 晚上
21. const getDayPeriod = () => {
22.   const hour = dayjs().hour()
23.   if (hour >= 0 && hour < 6) {
24.     return '凌晨'
25.   } else if (hour >= 6 && hour < 12) {
26.     return '上午'
27.   } else if (hour >= 12 && hour < 14) {
28.     return '中午'
29.   } else if (hour >= 14 && hour < 18) {
30.     return '下午'
31.   } else {
32.     return '晚上'
33.   }
34. }
36. export { formatDate, getCurrentDate, getWeekDay, getDayPeriod }

复制代码

AI 辅助编码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。