Доведите идею модульности до конца
Эта структура также используется в настоящее время в нашем проекте. Нет проблем в работе с веб-проектами с двумя или тремя сотнями страниц. Она очень хороша с точки зрения масштабируемости и совместной работы нескольких человек. Без лишних слов, давайте сначала построим структуру, а потом поговорим о том, зачем мы это делаем.
├── service # 后端接口管理
│ ├── index.js # 接口管理出入口
│ └── ... # 具体的不同业务/服务接口文件【S-1】
├── assets # 项目依赖资源管理
│ └── imgs # 图片资源
│ ├── style # 样式资源
│ └── js # 依赖的第三方sdk之类的js资源
├── components # 项目组件目录
│ ├── public # 公共组件/基础组件（比如基础的按钮/输入框等）
│ │ ├── index.js # 基础组件的注册文件【可选】
│ │ ├── README.md # 组件使用说明文档【可选】
│ │ └── ... # 组件
│ └── .... # 基础性的业务组件（有详细说明）【C-1】
├── pages
│ ├── modules # 具体业务所归属的文件夹（可以用业务名称作为文件夹名字）
│ │ ├── components # 业务所用到的组件
│ │ ├── views # 业务的所有页面
│ │ ├── utils # 业务的工具集
│ │ ├── static # 业务所用到的静态资源
│ │ ├── service # 业务的后端接口管理
│ │ ├── store # 业务所用到的状态库（本结构基于Vue，这里是业务的Vuex）
│ │ └── index.js # 业务的唯一出口（包含路由与状态库）
│ └── .... # 其他业务【P-1】
├── config # 项目的基础配置
│ ├── index.js # 配置文件的出入口
│ └── ... # 具体的配置文件【C-2】
├── router # 项目的路由管理
│ ├── index.js # 路由出口
│ └── ... # 与路由有关的其他文件【R-1】
├── store # 项目状态库的管理
│ ├── index.js # 项目状态库的出入口
│ └── ... # 具体的基础模块【S-2】
├── utils # 项目所用的工具集（封装的请求，表单的验证函数，时间格式化.....的工具）
│ ├── index.js # 工具的入口
│ └── ... # 具体的各个工具（请求封装、正则、验证......）【U-1】
├── main.js
├── App.vue
Прежде всего, эта структура разработана на основе Vue, а идея дизайна исходит из механизма загрузки небольших программных подпакетов. Структура примера в основномsrcПод содержанием.
Хотя данная структура основана на Vue, можно использовать и другие, такие как апплеты, React и т. д.,Основная идея состоит в том, чтобы выделить конкретный бизнес один за другим как независимый модуль, а затем объединить модули один за другим в целый проект.
Далее, давайте объясним серийный номер, отмеченный
-
С-1:
-
Управление интерфейсом части s-1 в основном используется для хранения основных интерфейсов проекта, таких как точки скрытых данных и т. д., и не влияет на интерфейсы, используемые конкретными бизнес-функциями.
-
Если количество таких интерфейсов очень велико, их можно разделить по разным типам или по сервисам, которым они принадлежат (бэкенд нашего проекта — микросервисная архитектура, а интерфейсы фронтенда разделены по сервисам) в несколько файлов, а затем экспортировать их; существует
index.jsПосле импорта различных типов файлов интерфейса экспортируйте их целиком. -
Если количество таких интерфейсов невелико, можно напрямую
index.jsУправление экспортом в . -
Если говорить о том, что таких интерфейсов в обозримом будущем не будет, то они могут быть даже полностью устранены.
serviceпапка, будетindex.jsназванныйservice.jsв корневом каталоге (src)Вниз
-
-
С-1:
- Базовыми бизнес-компонентами могут быть уникальные компоненты входа и регистрации, общие для всего проекта, или компоненты заголовка или навигации, общие для всего проекта.
- Если вы решите поместить эти основные компоненты, такие как компоненты для входа в систему и регистрации бизнеса, в бизнес-модуль;
componentsВ папке хранятся только общедоступные/базовые компоненты.publicфайлы вcomponentsвниз, удалитьpubilcпапка
-
Р-1:
-
modulesДля каждого конкретного бизнеса у него есть независимая маршрутизация, независимая библиотека состояний, независимая библиотека инструментов...modulesЦель состоит в том, чтобы закрыть бизнес в целом, оставив только один внешний экспортindex.js, так что когда у компании есть однотипный проект с таким же бизнесом, мигрировать может быть очень удобно. -
staticхранить статические ресурсы,utilsХраните набор инструментов.Если в статических ресурсах вашего бизнеса есть только несколько изображений, а в наборе инструментов есть только один или два файла, вы можете сохранить одну из двух папок. -
storeявляется государственной библиотекой бизнеса, на базеVuexизmoduleДизайн, интерьер можно разделить по потребностям, но его нужно экспортировать в конце концов. -
index.jsЭто единственный внешний экспорт бизнеса.Любые файлы, которые необходимо использовать извне (маршрутизация бизнес-страниц, государственная библиотека бизнеса), необходимо импортировать вindex.jsЗатем выполните общий экспорт.
-
-
С-2:
-
configЯвляется дополнительной конфигурацией, в основном используемой для хранения конфигурации, связанной с проектом. - Если ваш проект должен быть предоставлен разным клиентам, у каждого клиента есть свои особые потребности, например, логотип системы должен использовать логотип клиента, название системы должно использовать контент, предоставленный клиентом, или даже заказчик говорит мне Нам нужны три услуги ACE, а не три функции BDF Мы можем писать разные конфигурации для разных клиентов, а также упаковывать и генерировать системы с разными функциями в соответствии с разными конфигурациями.Конкретное содержание см. в другой моей статье: Конфигурация команд Vue для упаковки в разных средах.сцена вторая в
-
-
Р-1:
- Здесь нет ничего особенного в маршрутизации, просто импортируйте маршруты, предоставляемые каждым бизнесом.
- Если другие файлы, связанные с маршрутизацией, вы даже можете напрямую переместить файлы маршрутизации в
srcвниз, удалитьrouterпапка
-
С-2:
-
storeЦентральное место занимают базовые несвязанные данные, которые не влияют на использование в бизнесе.storeЭкспорт документов, предоставленных извне -
index.jsИ импортируйте магазин, выставленный каждым бизнесом, и экспортируйте его целиком после обработки.
-
-
У-1:
-
utilsДалее идет базовый набор инструментов, например, инкапсулированные запросы и т. д.
-
Это функциональные описания структуры.
Почему он разработан таким образом, самая большая причина в том, чтоРазделение и улучшение возможности повторного использования, Что касается моей компании, у нас есть несколько подобных систем управления.Некоторые предприятия могут иметь эту систему, а другие системы имеют продукты, которые имеют эту функцию.Согласно этой структуре, я могу напрямую преобразовать соответствующий функциональный модуль копируется в другая система, а затем открытая для бизнеса розетка подключается к другой системе, и миграция функций может быть выполнена напрямую.
Используйте микрофронтенды для управления большими проектами
Вышеупомянутая структура - это то, что использует наш проект.Относительно легко поддерживать проекты с двумя или тремя сотнями страниц, но проект развивается в более крупном масштабе в пределах предсказуемого диапазона, и трудно гарантировать, что вышеуказанная структура может продолжаться. поддерживать. Поэтому нам нужно изучить более разумную архитектуру для поддержки нашего проекта и запланировать внедрение концепции микроинтерфейса.
Что такое микрофронтенд
Концепция микрофронтенда исходит из микросервисной архитектуры бэкенда, для сверхбольшого проекта прямое управление определенно неудобно. Таким образом, мы можем разделить сверхбольшой проект на несколько небольших проектов в соответствии с бизнесом и передать каждый небольшой проект разным командам для разработки, не полагаясь на определенный стек технологий, и, наконец, эти небольшие проекты образуют полную систему. Это микрофронтенд.
Каковы преимущества
Простое управление проектами, Это точно. Крупный проект удобнее разбивать послойно, разные команды разрабатывают разные бизнесы, и каждая команда управляет им сама. Удобнее напрямую управлять всем масштабным проектом.
Не полагается на уникальный стек технологий,С внешним интерфейсом микросервиса каждый проект может использовать стек технологий, с которым команда разработчиков лучше знакома в соответствии со своими привычками.
развязка,После микро-фронтенда связь каждого проекта ниже, и влияние между бизнесами будет меньше.
пошаговое обновление,Будь то исправления ошибок или итерации обновления, нам нужно только внести изменения в соответствующий бизнес и выпустить версию самостоятельно после изменения.Даже если произойдет крупная авария, нам нужно только заблокировать соответствующий бизнес, и весь проект не рухнет.
Автономное развертывание
Как интегрировать портфолио
По сравнению с разделением, как объединить выполненные небольшие проекты в единое целое, эта часть непростая, но эта часть важнее.
iframe,Первая идея интеграции заключается в использованииiframeинтегрировать, вiframeЗагрузите различные пакеты проектов.
нгинкс,Второй способ черезnginxНастройте прокси для прохождения разных маршрутов черезnginxВперед в другой проект.
Первые два являются самыми простыми интеграционными решениями, каждое из которых имеет свои преимущества и недостатки, а также различные применимые сценарии.
Упаковка и компиляция в облаке,Эта идея исходит изJenkins, каждый проект предоставляет файл конфигурации, который сообщает системе упаковки, как упаковывать и загружать.
Локально упакованы и интегрированы в облаке,После того, как набор упакован локально, загрузите файлы конфигурации и упакованные файлы в облако.Система упаковки решает, какие файлы необходимо удалить и как загрузить файлы в соответствии с файлами конфигурации.
Вышеупомянутые два метода интеграции в настоящее время являются только идеей реализации.Также может потребоваться, чтобы основная система или каждый бизнес-проект предоставляли некоторые внешние переменные, чтобы указать браузеру, где должен отображаться каждый бизнес.
Суммировать
Микро-интерфейс, безусловно, является первым выбором для крупномасштабной архитектуры проекта.К сожалению, в настоящее время нет среды/решения для решения микро-интерфейса с открытым исходным кодом, поэтому, если вашему проекту необходимо использовать микро-интерфейс для решения проблем, в текущий этап. Может быть необходимо, чтобы все вместе ступили на яму, все вы! !