Electron系列文章-程式目錄結構

蘇格團隊發表於2019-02-20

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

相關文章