这篇文章主要是通过对简单的Electron应用程序的开发目录进行介绍，让读者对整个开发视图有初步的了解，能大概知道开发一个Electron程序需要具备哪些模块。
如果对文章的内容有任何疑问或吐槽，请直接在下方评论，大家共同学习和改进
阅读时间：约5min
Структура каталогов программы
Электронные приложения разделены на три основных модуля:
- основной процесс
- межпроцессного взаимодействия
- процесс рендеринга
Для тех, кто плохо знаком с чистой веб-разработкой, они могут быть незнакомы со структурой многопроцессной разработки. В браузерах, исходя из соображений политики безопасности, веб-страницы обычно запускаются в среде песочницы и не имеют доступа к собственным ресурсам. Однако Electron позволяет странице (процессу рендеринга) вызывать Node.js API, поэтому страница может взаимодействовать с базовой операционной системой.
Мы знаем, что каждый процесс является независимой работающей единицей и не может напрямую взаимодействовать друг с другом. В Electron предусмотрено два метода для связи между основным процессом и процессом визуализации.
- Отправка сообщений с помощью модулей ipcRenderer и ipcMain
- Используйте удаленный модуль для связи RPC
Базовая структура директории каталога программы Electron выглядит следующим образом:
app----------------------------应用程序代码目录
├─main.js----------------------程序启动入口，主进程
├─ipc--------------------------进程间通信模块
└─browserWindows---------------窗口管理，渲染进程
└─src----------------------窗口业务模块
├─窗口A----------------窗口A
└─窗口B----------------窗口B
основной процесс
Основной процесс похож на экономку приложения, отвечающую за управление жизненным циклом всего приложения и создание всех процессов рендеринга.
процесс рендеринга
Экземпляры окна процесса рендеринга создаются с помощью объекта BrowserWindow, предоставляемого Electron.Каждый экземпляр представляет собой независимый процесс, который заботится только о веб-странице, на которой он запущен. После уничтожения экземпляра соответствующий процесс рендеринга также уничтожается. И после того, как основной процесс будет уничтожен, все процессы рендеринга также будут уничтожены. В стандартной стратегии браузера Chrome каждая вкладка является независимым процессом, и Electron также использует эту стратегию.
основной каталог модуля процесса
Основной процесс Electron отвечает за управление запуском всего системного модуля программы, а также управление всем жизненным циклом приложения, создание и управление экземплярами окон (процессами рендеринга). Для программ Electron существует несколько базовых системных модулей, которые разделены по родственным функциональным модулям, а структура показана на рисунке ниже.
Структура каталогов основного процесса:
app----------------------------应用程序代码目录
├─main.js----------------------程序启动入口，主进程
├─common-----------------------通用模块
├─log--------------------------日志模块
├─config-----------------------配置模块
├─ipc--------------------------进程间模块
├─appNetwork-------------------应用通信模块
└─browserWindows---------------窗口管理，渲染进程
Обязанности каждого модуля кратко описаны ниже.
1. Общий модуль
Общие модули — это общие инструменты и плагины для системы. Например, инкапсулировать SDK системного реестра, инкапсулировать локальный модуль вызова DLL, инкапсулировать модуль HTTP и так далее.
2. Модуль журнала
Ни в одной системе не может отсутствовать модуль журнала, отвечающий за сбор программных ошибок, что удобно для локализации и отладки проблем.
3. Модуль конфигурации
Модуль конфигурации отвечает за управление общей конфигурацией параметров всей программы. Конфигурация здесь — это не обязательно локальная конфигурация, но и удаленный центр конфигурации.
4. Модуль технологической связи
Electron предоставляет методы связи процессов ipc и remote, а модуль связи процессов отвечает за управление перечислением событий связи между процессами рендеринга. Когда вам нужно отправить данные сообщения из основного процесса main.js в одно из окон, вам необходимо зарегистрировать событие, согласованное обеими сторонами, за управление этими событиями отвечает этот модуль.
5, модуль связи приложения
Для клиентских приложений существует множество сценариев взаимодействия между приложениями. Итак, вот модуль для связи между приложениями.
6. Модуль управления окнами
Самая основная функция основного процесса — создание экземпляров окон.Для многооконных приложений требуется модуль управления окнами, который отвечает за управление экземплярами окон приложения.
Каталог модуля рендерера
Процесс рендеринга больше похож на многостраничное веб-приложение и отвечает за управление веб-страницами внутри него. Каждому окну соответствует независимая страница, и данные могут совместно использоваться друг с другом через локальные интерфейсы хранения, такие как localstorage и indexDB, и работа всего приложения может выполняться вместе. Извлекайте общие модули, общие компоненты, общие данные и статические ресурсы в соответствии с их функциями. Общая структура показана на рисунке ниже:
Структура каталогов процесса рендеринга:
browserWindows-----------------窗口管理，渲染进程
├─components---------------通用组件模块
├─store--------------------数据共享模块
├─statics------------------静态资源模块
└─src----------------------窗口业务模块
├─窗口A----------------窗口
└─窗口B----------------窗口
1. Модуль общего компонента
Модуль общих компонентов отвечает за управление глобальными общими компонентами и бизнес-компонентами, общими для каждого окна.
2. Модуль обмена данными
Между окнами есть общие данные, которыми управляет модуль обмена данными. Для обмена данными между окнами рекомендуется использовать для хранения localstorage и indexDB.
3. Модуль статических ресурсов
Модуль статических ресурсов отвечает за управление медиа-ресурсами, шрифтами и т. д., используемыми программой.
4. Оконный бизнес-модуль
Веб-страница, соответствующая окну, и скрипт js, выполняемый веб-страницей, унифицированно управляются бизнес-модулем окна.
Суммировать
Таким образом, вся структура приложения показана на следующем рисунке:
Структура каталогов следующая:
app----------------------------应用程序代码目录
├─main.js----------------------程序启动入口，主进程
├─common-----------------------通用模块
├─log--------------------------日志模块
├─config-----------------------配置模块
├─ipc--------------------------进程间模块
├─appNetwork-------------------应用通信模块
└─browserWindows---------------窗口管理，渲染进程
├─components---------------通用组件模块
├─store--------------------数据共享模块
├─statics------------------静态资源模块
└─src----------------------窗口业务模块
├─窗口A----------------窗口
└─窗口B----------------窗口
В этой статье дается краткое введение в самую основную структуру каталогов Electron.Я думаю, что у каждого уже есть концепция в голове. В следующей статье я долго буду говорить об основном процессе и процессе рендеринга, упомянутых в статье, и о связи между ними.