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最基本的目錄結構作了一個簡單的介紹，想必讀到這你們腦中已經有了一個概念了。在下一篇文章中，會花長篇幅講文章中提到的主進程和渲染進程，以及它們之間的通訊。