基于Node.js的開源架構Electron賦能前端開發

鄧杰海，劉 薇，湯小燕

（江西中醫藥高等?？茖W校教育技術中心，撫州 344000）

0 引言

軟件開發可分為基于瀏覽器的前端Web 開發和可以直接訪問本地軟硬件資源的后端開發。前端開發的軟件架構比較豐富，有如jQuery、vue、react和angular等應用非常廣泛的架構，通過HTML、CSS、JavaScript 完成前端軟件開發。基于瀏覽器的前端Web 開發受瀏覽器沙箱操作的限制，前端程序訪問本地資源受到很大的約束，而在網上流動的滿足各行業的業務規則的數據，最終需要通過后臺服務端程序將數據持久化到本地硬盤上，可以說前端應用與后端應用相輔相成、缺一不可。

常用的后端跨平臺桌面應用開發的框架有Mono、QT 等，要求具有C、C++、C#編程經驗。長期從事Web 前端開發的軟件從業人員，要從事后端桌面應用開發，面對這些與前端JavaScript 語言完全不同特性的語言，需要學習面向對象編程和泛型編程，這對前端開發人員來說，有一定難度。然而，在基于JavaScript 引擎V8 的Node.js 橫空出世之后，使得精通HTML、CSS和JavaScript語言的前端工程師，可以使用整合了Node.js 和WebKit 技術的Electron架構，在后端桌面服務端程序開發中大放異彩。

1 JavaScript語言運行環境Node.js

Node.js 是Javascript 的一個服務器端運行環境，它使得Javascript 可以脫離瀏覽器的束縛而運行在服務器環境下，可以像PHP、Python 等語言一樣進行服務器端程序的開發［1-2］，它是一個為實時Web（Real-time Web）應用開發而誕生的平臺，它從誕生之初就充分考慮了在實時響應、超大規模數據要求下的架構的可擴展性［3］，這使得它摒棄了傳統平臺依靠多線程來實現高并發的設計思路，而采用了單線程、異步I/O、事件驅動式的程序設計模型［4］。

Node.js與Chrome 瀏覽器相比，除了HTML、WebKit 和顯卡這些UI 相關技術沒有支持外，其他功能與Chrome 瀏覽器十分相似［5］，它們的組成結構如圖1所示。

圖1 Chrome與Node.js結構圖

從圖1 可看出，Node.js 開發人員抽象出了Libuv層，使得Node.js的異步非阻塞模型可以兼容Windows 和基于POSIX 的操作系統等平臺。在Windows 操作系統平臺下，采用IOCP 機制實現，基于POSIX 的操作系統平臺下，則對Libev和Libeio庫進行抽象封裝來實現事件驅動和異步I/O［6］。由于 Node.js 平臺抽象了中間層（libuv），使得Node.js實現跨平臺成為可能。

在 windows10 操作系統 64 位 CPU 架構安裝Node.js v13.14.0軟件過程如下：

（1）創建d: odejs目錄；

（2）在 d: odejs 目錄下創建 node_global 和node_cache子目錄；

（3）打開https://nodejs.org/dist/v14.16.1/網頁，選擇node-v14.16.1-x64.msi 下載并安裝至d: odejs目錄下；

（4）設置npm config setprefix“d: odejs ode_global”和 npm config set cache“d: odejsnode_cache”；

（5）查看設置npm config get cache、npm config get prefix；

（6）在系統環境變量添加NODE_PATH，輸入路徑為：D: odejs ode_global（重啟）；

（7）設置 npm 鏡像源 npm install-g cnpm--registry=https://registry.npm.taobao.org、npm config set registry https://registry.npm.taobao.orgglobal、npm config set disturl https://npm.taobao.org/dist-global；

（8）添加系統變量path的內容（重啟），因為cnpm 會被安裝到D: odejs ode_global 下，而系統變量path并未包含該路徑。

（9）在 cmd 命令狀態輸入 node-v、npm-v、cnpm-v，如果都能正常顯示版本，則表示安裝成功。

2 跨平臺桌面應用開發架構Electron

Electron 是一個使用 JavaScript、HTML 和CSS 構建桌面應用程序的框架。嵌入Chromium和Node.js 到二進制的Electron 允許操作者保持一個JavaScript 代碼并創建在Windows、macOS和Linux 等平臺上運行的跨平臺應用——不需要本地開發經驗［7］。

在Electron 開發架構，有主進程和渲染進程的概念。主進程執行的文件就是模塊描述文件package.json 中main 數據項指定的文件，也是開發的桌面應用程序的入口文件，它負責建渲染進程、管理應用程序的生命周期、處理本地文件系統和網絡請求等任務。在Electron 應用程序中，主進程由一個Node.js 模塊組成，可以通過它來訪問底層操作系統的API 和功能。主進程還可以通過進程間通信（IPC）機制與渲染進程通信，實現雙方之間的數據傳輸和消息交互。每一個Web 網頁對應一個渲染進程，各個渲染進程之間是相互獨立的，都是由主進程創建。主程序與渲染進程之間、渲染進程之間可以直接或間接通過消息發送或共享存儲區等方法進行數據交互。

進行Electron 跨平臺桌面應用程序開發，可以使用Visual Studio Code、Sublime Text 或Atom等編輯器，它們都是最常用和流行的跨平臺代碼編輯器，都支持Electron 開發。選擇好代碼編輯器，就開始安裝Electron 跨平臺桌面應用程序開發架構，可以使用Node.js 帶的包管理器npm 進行安裝，如果安裝下載速度較慢，可以設置淘寶鏡像使用cnpm 進行安裝。如果要在電腦上安裝多個版本的Electron，則不需要全局安裝，本文只介紹在Windows 平臺下使用npm 進行全局安裝Electron。在Windows 平臺下使用cmd 命令打開一個命令輸入窗口，在窗口中輸入npm install-g electron 命令進行全局安裝，安裝完成之后輸入electron-v 命令，如果能正常顯示版本，則表示安裝成功。

3 在Electron中實現閃爍托盤程序

以創建一個托盤程序為例，來說明使用Electron進行軟件開發的過程，程序實現如下功能：

（1）程序初始界面，在渲染進程網頁中顯示默認的托盤程序菜單項的說明信息、操作系統信息、Node.js和Electron版本信息；

（2）托盤圖標每隔500 毫秒顯示兩個圖標中的一個，以達到動態效果；

（3）點擊關閉按鈕，程序界面隱藏，在任務欄的托盤位置顯示閃爍托盤圖標；

（4）對閃爍托盤圖標點擊鼠標右鍵，程序主界面顯示相應的菜單項的說明信息、操作系統信息、Node.js和Electron版本信息；

（5）在Windows 的任務管理器中不顯示程序進程，以防備通過Ctrl+Alt+Del 快捷鍵強制退出程序；

（6）定義全局快捷鍵Ctrl+Alt+k，彈出是否退出程序對話框，如果選擇確定則程序退出，如果不知道這個快捷鍵則不能退出程序，除非系統重啟。

為了實現上述功能，在項目一共創建了七個文件，文件清單見附件，項目文件結構如圖2紅色框所示，程序運行的初始界面如圖3所示。

圖2 文件結構

4 結語

Electron 開發跨平臺桌面應用程序的優點包括以下幾點：

（1）跨平臺：能夠將一份代碼打包成不同平臺的應用，減少開發和維護成本；

（2）快速開發：使用Node.js 和JavaScript 等現有的開發技術和庫，快速開發出高質量的桌面應用程序；

（3）易于維護：應用程序的維護和更新非常簡單，能夠快速修復bug、更新版本；

（4）大量插件：Electron 擁有一個豐富的插件庫，能夠方便地集成第三方庫和組件。

Electron 開發跨平臺桌面應用程序包括以下缺點：

（1）資源占用：由于Electron 應用程序需要同時運行Chromium 瀏覽器和Node.js 運行環境，因此它的資源占用會比較高，可能會導致應用程序在老舊計算機上運行緩慢；

（2）安全性：由于Electron 應用程序缺乏完善的安全措施，因此容易受到黑客攻擊和惡意代碼的侵入；

（3）大小：Electron 應用程序的文件大小比較大，如果需要向用戶提供快速的應用程序安裝體驗，需要考慮這一點；

（4）學習成本：如果不熟悉Electron，學習和使用它可能需要一些時間和精力。

總體來說，Electron 開發跨平臺桌面應用程序是一種很好的方式，但是在選擇它之前需要綜合考慮以上這些優缺點。

附件：