Electron系列文章-程序目录结构

[SugarTeam]

这篇文章主要是通过对简单的Electron应用程序的开发目录进行介绍，让读者对整个开发视图有初步的了解，能大概知道开发一个Electron程序需要具备哪些模块。

如果对文章的内容有任何疑问或吐槽，请直接在下方评论，大家共同学习和改进

阅读时间：约5min

程序目录结构

Electron应用程序分成三个基础模块：

1. 主进程
2. 进程间通信
3. 渲染进程

对于做纯web开发的新人，可能对多进程开发结构不熟悉。在浏览器中，基于安全策略考虑，web页面通常是在一个沙盒环境中运行的，不被允许去接触原生的资源。然而在Electron中允许页面（渲染进程）调用Node.js的API，所以页面可以与操作系统底层进行交互。

我们知道每个进程都是一个独立运行单位，相互不能直接通信。在Electron中提供两种方法在主进程与渲染进程之间进行通信。

• 使用ipcRenderer和ipcMain模块发送消息
• 使用remote模块进行 RPC 方式的通信

Electron程序目录基础目录结构如下：

app----------------------------应用程序代码目录
├─main.js----------------------程序启动入口，主进程
├─ipc--------------------------进程间通信模块
└─browserWindows---------------窗口管理，渲染进程
    └─src----------------------窗口业务模块
        ├─窗口A----------------窗口A
        └─窗口B----------------窗口B

主进程

主进程就像是应用程序的管家，负责管理整个应用程序的生命周期，所有的渲染进程的创建。

渲染进程

渲染进程窗口实例通过Electron提供的BrowserWindow对象创建，每一个实例都是一个独立的进程，它只关心它所在运行的web页面。实例被销毁后，相应的渲染进程也会被销毁。且主进程被销毁后，渲染进程全部也会被销毁。在chrome浏览器的默认策略下，每一个tab都是独立的进程，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、窗口管理模块

主进程最基本的功能就是创建窗口实例，对于多窗口应用，需要有窗口管理模块，专门负责管理应用窗口实例。

渲染进程模块目录

渲染进程更像是web多页应用程序，负责管理它里面的web页面运。每一个窗口对应一个独立的页面，彼此之间可以通过localstorage、indexDB等本地数据存在接口共享数据，共同完成整个应用的运作。根据功能抽离通用模块，公共组件、共享数据、静态资源。整体结构如下图所示：

渲染进程目录结构：

browserWindows-----------------窗口管理，渲染进程
    ├─components---------------通用组件模块
    ├─store--------------------数据共享模块
    ├─statics------------------静态资源模块
    └─src----------------------窗口业务模块
        ├─窗口A----------------窗口
        └─窗口B----------------窗口

1、通用组件模块

通用组件模块负责管理全局通用组件，各个窗口之间通用的业务组件。

2、数据共享模块

窗口之间存在共享数据，统一由数据共享模块管理。对于窗口之间共享数据，推荐采用localstorage、indexDB进行存储。

3、静态资源模块

静态资源模块负责管理程序使用的媒体资源、字体等等。

4、窗口业务模块

窗口对应的web页面，web页面执行的js脚本，统一由窗口业务模块管理。

总结

综上所述，整个应用程序结构如下图所示：

目录结构如下：

app----------------------------应用程序代码目录
├─main.js----------------------程序启动入口，主进程
├─common-----------------------通用模块
├─log--------------------------日志模块
├─config-----------------------配置模块
├─ipc--------------------------进程间模块
├─appNetwork-------------------应用通信模块
└─browserWindows---------------窗口管理，渲染进程
    ├─components---------------通用组件模块
    ├─store--------------------数据共享模块
    ├─statics------------------静态资源模块
    └─src----------------------窗口业务模块
        ├─窗口A----------------窗口
        └─窗口B----------------窗口
        

本文对Electron最基本的目录结构做了一个简单的介绍，想必读到这大家脑中已经有了一个概念了。在下一篇文章中，会花长篇幅讲文章中提到的主进程和渲染进程，以及它们之间的通信。