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

这篇文章主要是经过对简单的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---------------窗口管理，渲染进程
复制代码

下面简单的讲解下各个模块的职责

一、通用模块

通用模块是系统通用工具、插件。例如封装对系统注册表SDK、封装本地DLL调用模块、封装HTTP模块等等。

二、日志模块

任何系统都不能缺乏日志模块，负责程序错误收集，方便定位、调试问题。

三、配置模块

配置模块负责管理整个程序通用参数配置。这里的配置不必定是本地配置，也能够是远程的配置中心。

四、进程通讯模块

Electron提供了进程通讯方式ipc、remote，进程通讯模块负责管理渲染进程间通讯事件枚举。当你须要从主进程main.js向其中一个窗口发送消息数据的时候，须要注册一个双方约定的事件，这个模块就是专门负责管理这些事件的。

五、应用间通讯模块

客户端应用，涉及到应用间通讯的场景不少。因此这里补充一个应用间通讯的模块。

六、窗口管理模块

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

渲染进程模块目录

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

渲染进程目录结构：

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

一、通用组件模块

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

二、数据共享模块

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

三、静态资源模块

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

四、窗口业务模块

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

总结

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

目录结构以下：

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

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