這篇文章主要是通過對簡單的Electron應用程式的開發目錄進行介紹，讓讀者對整個開發檢視有初步的瞭解，能大概知道開發一個Electron程式需要具備哪些模組。
如果對文章的內容有任何疑問或吐槽，請直接在下方評論，大家共同學習和改進
閱讀時間：約5min
程式目錄結構
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最基本的目錄結構做了一個簡單的介紹，想必讀到這大家腦中已經有了一個概念了。在下一篇文章中，會花長篇幅講文章中提到的主程式和渲染程式，以及它們之間的通訊。