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

·  阅读 10247

前言

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

前端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来控制其行为而不是暴露其内部结构。

    封装良好的组件隐藏其内部结构,并提供一组属性来控制其行为。
    
    隐藏内部结构是必要的。其他组件没必要知道或也不依赖组件的内部  结构或实现细节
    复制代码
  • 我们的项目中统一目录,主要为了看起来舒服

  • 目录:image.png

    • 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为组件使用样例,必要的代码注释,要清楚的告诉别人怎么使用这个公共组件

第三方文档

  • 项目中所有用的第三方插件都要整理出来地址,便于后期维护
  • 示例:

传送门

收藏成功!
已添加到「」, 点击更改