这里有一份前端开发规范请查收

玖柒的小窝

发布于 2021-11-28 20:44:21

5840

发布于 2021-11-28 20:44:21

文章被收录于专栏：各类技术文章~

前言

好的编码规范是非常重要的，无论是在视觉上，后期维护上都是非常重要的，没有规矩不成方圆，整理了我们团队现在的一些编码规范，希望对大家有所帮助

前端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来控制其行为而不是暴露其内部结构。封装良好的组件隐藏其内部结构，并提供一组属性来控制其行为。隐藏内部结构是必要的。其他组件没必要知道或也不依赖组件的内部结构或实现细节复制代码
我们的项目中统一目录，主要为了看起来舒服
目录：

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;

复制代码