前言
- 好的编码规范是非常重要的，无论是在视觉上，后期维护上都是非常重要的，没有规矩不成方圆，整理了我们团队现在的一些编码规范，希望对大家有所帮助
前端code review规范
- 编码规范参考，code review 规范
readme项目文档说明
一、环境、版本说明
- react 版本 17.xx
- umi-request 1.3.xxx
- single-spa 5.9.xx
二、开发相关环境及配置
2.1 项目资料
2.1.1 文档地址
- 接口文档
- 需求文档
- XX组件 8月二期需求 文档地址：https:XX
- xx组件 9月一期需求 文档地址：https:XX
- 设计文档
2.1.2 UI&UX地址
- 原型图 文档地址：https:XX
- UI图 文档地址：https:XX
2.1.3 接口地址
2.2 项目配置
2.2.1 项目安装
pnpm install
复制代码2.2.2 项目编译&热加载【开发模式】
pnpm run dev
复制代码2.2.3 项目编译
pnpm run build
复制代码2.2.4 检查代码
pnpm run lint
// 检查代码并自动格式化
pnpm run lint:fix
复制代码2.2.5 压缩拷贝项目根目录下dist文件放到服务器项目根目录解压
三、代码及代码目录结构及代码文件功能说明
3.1 插件说明
- 前端使用splitFunction画布插件
- 使用umi-request发送请求
3.2 代码结构说明
示例：
-
dist 发布打包后静态文件目录
-
node_modules node模块安装目录
-
public 公共目录
-
favicon.ico 网站头部左边图片;
-
Index.html webpack/vite/rollup打包页面模板;
-
Src 开发的目录
-
components
-
hooks
-
servers
-
utils
-
xx
-
app.tsx 项目入口文件
-
config.ts
-
xxx
-
-
main.js 项目核心文件
-
gitignore 忽略编译生成的中间文件
-
babel.config.js babel配置文件
-
package-lock.json 模块与模块之间的依赖关系文件
-
package.json 项目描述文件
-
README.md 项目说明文档
业务组件编写规范
- 业务代码目录（强制约定）
- 代码示例react ,
// 导入顺序为：node_modules 文件 -> @/ 开头文件 -> 相对路径文件
// 导入 React
import React from 'react';
// 导入子组件
import Child from './Child';
// ...
// 导入对应同名的 .less，起名为 styles
import styles from './HelloWorld.module.less';
/**
* 类型定义（命名：组件名 + Props）
*/
export interface HelloWorldProps {
// 参数定义（本注释独立一行，禁止放变量末尾）
username: string;
}
/**
* 组件注释（简明概要）
*/
const HelloWorld: React.FC<HelloWorldProps> = ({ username }) => {
// 1. hooks 位置
// 2. effects 位置
// 3. 内部 function 位置
// ...
return (
<div className={styles.wrapper}>
{username}
<Child />
</div>
);
};
// 导出组件
export default HelloWorld;
复制代码公共组件封装
-
我们如何封装一个公共组件？
1， 项目中需要多处使用的组件
2， 不和业务耦合的组件，业务耦合的公共组件
3， 所有状态都可以在外部控制，通过传入的props来控制其行为而不是暴露其内部结构。
封装良好的组件隐藏其内部结构，并提供一组属性来控制其行为。 隐藏内部结构是必要的。其他组件没必要知道或也不依赖组件的内部 结构或实现细节 复制代码 -
我们的项目中统一目录，主要为了看起来舒服
-
目录：
- index.tsx为主入口文件(示例代码)
import React from 'react';
import classNames from 'classnames';
import { Tooltip } from 'antd';
import styles from './index.module.less';
interface LinkIconProps {
// 链接地址
linkHref?: string;
// 图标
iconSvg: React.ReactSVG | React.ReactNode;
// 提示字段
title?: string;
// a标签其余参数
target?: HTMLAnchorElement['target'];
// 样式
className?: string;
}
const LinkIcon: React.FC<LinkIconProps> = ({
linkHref,
target = '_blank',
iconSvg,
title,
className,
}) => {
return (
<Tooltip title={title}>
<a href={linkHref} target={target} className={classNames(styles.linkA, className)}>
{iconSvg}
</a>
</Tooltip>
);
};
export default LinkIcon;
复制代码- index.md为组件使用样例，必要的代码注释，要清楚的告诉别人怎么使用这个公共组件
第三方文档
- 项目中所有用的第三方插件都要整理出来地址，便于后期维护
- 示例：