Electron教程-程序目录结构

Electron教程-程序目录结构

    • 程序目录结构
      • 主进程
      • 渲染进程
    • 主进程模块目录
      • 1、通用模块
      • 2、日志模块
      • 3、配置模块
      • 4、进程通信模块
      • 5、应用间通信模块
      • 6、窗口管理模块
    • 渲染进程模块目录
      • 1、通用组件模块
      • 2、数据共享模块
      • 3、静态资源模块
      • 4、窗口业务模块
    • 总结

程序目录结构

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

  1. 主进程
  2. 进程间通信
  3. 渲染进程
    Electron教程-程序目录结构_第1张图片

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

Electron教程-程序目录结构_第2张图片

主进程目录结构:

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

渲染进程目录结构:

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

1、通用组件模块

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

2、数据共享模块

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

3、静态资源模块

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

4、窗口业务模块

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

总结

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

Electron教程-程序目录结构_第4张图片

目录结构如下:

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

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

你可能感兴趣的:(Web前端,Electron,Electron教程,大前端,跨平台开发)