阅读 1313

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

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

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

阅读时间:约5min

程序目录结构

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

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

对于做纯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程序,有几大基础系统模块,根据相关功能模块划分,结构如下图所示。

image

主进程目录结构:

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等本地数据存在接口共享数据,共同完成整个应用的运作。根据功能抽离通用模块,公共组件、共享数据、静态资源。整体结构如下图所示:

image

渲染进程目录结构:

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

1、通用组件模块

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

2、数据共享模块

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

3、静态资源模块

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

4、窗口业务模块

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

总结

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

image

目录结构如下:

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

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

关注下面的标签,发现更多相似文章
评论