Вот спецификация фронтенд-разработки, пожалуйста, ознакомьтесь с ней

внешний интерфейс JavaScript спецификация кода

предисловие

  • Хорошие стандарты кодирования очень важны, как с точки зрения визуального, так и после обслуживания.Нет никаких правил и положений.Мы разобрались с некоторыми из текущих стандартов кодирования нашей команды и надеемся помочь всем.

Спецификация проверки кода переднего плана

  • Справочник по спецификации кодирования, спецификация проверки кода

документация проекта readme

1. Описание среды и версии

  • реагировать на версию 17.xx
  • umi-request 1.3.xxx
  • single-spa 5.9.xx

2. Среда разработки и конфигурация

2.1 Информация о проекте

2.1.1 Адрес документа

  • документация по интерфейсу
  • Документ с требованиями
    • Требования к компоненту XX для второго этапа августа Адрес документа: https:XX
    • Требования к компоненту xx для первой фазы сентября Адрес документа: https:XX
  • проектная документация

2.1.2 UI&UX-адрес

  • Карта-прототип Адрес документа: https:XX
  • Схема пользовательского интерфейса Адрес документа: 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. Код и структура каталогов кода и описание функций файла кода

3.1 Описание плагина

  • Внешний интерфейс использует плагин холста splitFunction.
  • Отправить запрос с помощью umi-request

3.2 Описание структуры кода

Пример:

  • dist публикует статический каталог файлов после упаковки

  • node_modules каталог установки модуля узла

  • общедоступный общедоступный каталог

  • Картинка в левой части шапки сайта 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

Спецификация написания бизнес-компонентов

  • Каталог бизнес-кода (обязательное соглашение)

  • пример кода реагировать,
// 导入顺序为：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. Всеми состояниями можно управлять извне, а их поведение контролируется входящим реквизитом вместо того, чтобы обнажать его внутреннюю структуру.

    封装良好的组件隐藏其内部结构，并提供一组属性来控制其行为。

隐藏内部结构是必要的。其他组件没必要知道或也不依赖组件的内部  结构或实现细节

  • Единый каталог в нашем проекте, в основном для удобства

  • содержание: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 — это пример использования компонента, необходимые комментарии к коду, и необходимо четко рассказать другим, как использовать этот общий компонент

Документация третьих лиц

  • Все сторонние плагины, используемые в проекте, должны быть отсортированы для удобства обслуживания в дальнейшем.
  • Пример:

портал

Категории