Electron系列文章-程式目錄結構
這篇文章主要是通過對簡單的Electron應用程式的開發目錄進行介紹，讓讀者對整個開發檢視有初步的瞭解，能大概知道開發一個Electron程式需要具備哪些模組。
如果對文章的內容有任何疑問或吐槽，請直接在下方評論，大家共同學習和改進
Electron應用程式分成三個基礎模組：
- 主程序
- 程序間通訊
- 渲染程序
對於做純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---------------視窗管理，渲染程序 複製程式碼
下面簡單的講解下各個模組的職責
1、通用模組
通用模組是系統通用工具、外掛。例如封裝對系統登錄檔SDK、封裝本地DLL呼叫模組、封裝HTTP模組等等。
2、日誌模組
任何系統都不能缺少日誌模組，負責程式錯誤收集，方便定位、除錯問題。
3、配置模組
配置模組負責管理整個程式通用引數配置。這裡的配置不一定是本地配置，也可以是遠端的配置中心。
4、程序通訊模組
Electron提供了程序通訊方式ipc、remote，程序通訊模組負責管理渲染程序間通訊事件列舉。當你需要從主程序main.js向其中一個視窗傳送訊息資料的時候，需要註冊一個雙方約定的事件，這個模組就是專門負責管理這些事件的。
5、應用間通訊模組
客戶端應用，涉及到應用間通訊的場景很多。所以這裡補充一個應用間通訊的模組。
6、視窗管理模組
主程序最基本的功能就是建立視窗例項，對於多視窗應用，需要有視窗管理模組，專門負責管理應用視窗例項。
渲染程序模組目錄
渲染程序更像是web多頁應用程式，負責管理它裡面的web頁面運。每一個視窗對應一個獨立的頁面，彼此之間可以通過localstorage、indexDB等本地資料存在介面共享資料，共同完成整個應用的運作。根據功能抽離通用模組，公共元件、共享資料、靜態資源。整體結構如下圖所示：
渲染程序目錄結構：
browserWindows-----------------視窗管理，渲染程序 ├─components---------------通用元件模組 ├─store--------------------資料共享模組 ├─statics------------------靜態資源模組 └─src----------------------視窗業務模組 ├─視窗A----------------視窗 └─視窗B----------------視窗 複製程式碼
1、通用元件模組
通用元件模組負責管理全域性通用元件，各個視窗之間通用的業務元件。
2、資料共享模組
視窗之間存在共享資料，統一由資料共享模組管理。對於視窗之間共享資料，推薦採用localstorage、indexDB進行儲存。
3、靜態資源模組
靜態資源模組負責管理程式使用的媒體資源、字型等等。
4、視窗業務模組
視窗對應的web頁面，web頁面執行的js指令碼，統一由視窗業務模組管理。
總結
綜上所述，整個應用程式結構如下圖所示：
目錄結構如下：
app----------------------------應用程式程式碼目錄 ├─main.js----------------------程式啟動入口，主程序 ├─common-----------------------通用模組 ├─log--------------------------日誌模組 ├─config-----------------------配置模組 ├─ipc--------------------------程序間模組 ├─appNetwork-------------------應用通訊模組 └─browserWindows---------------視窗管理，渲染程序 ├─components---------------通用元件模組 ├─store--------------------資料共享模組 ├─statics------------------靜態資源模組 └─src----------------------視窗業務模組 ├─視窗A----------------視窗 └─視窗B----------------視窗 複製程式碼
本文對Electron最基本的目錄結構做了一個簡單的介紹，想必讀到這大家腦中已經有了一個概念了。在下一篇文章中，會花長篇幅講文章中提到的主程序和渲染程序，以及它們之間的通訊。