基于Node.js的開(kāi)源架構(gòu)Electron賦能前端開(kāi)發(fā)

鄧杰海，劉 薇，湯小燕

（江西中醫(yī)藥高等?？茖W(xué)校教育技術(shù)中心，撫州 344000）

0 引言

軟件開(kāi)發(fā)可分為基于瀏覽器的前端Web 開(kāi)發(fā)和可以直接訪問(wèn)本地軟硬件資源的后端開(kāi)發(fā)。前端開(kāi)發(fā)的軟件架構(gòu)比較豐富，有如jQuery、vue、react和angular等應(yīng)用非常廣泛的架構(gòu)，通過(guò)HTML、CSS、JavaScript 完成前端軟件開(kāi)發(fā)。基于瀏覽器的前端Web 開(kāi)發(fā)受瀏覽器沙箱操作的限制，前端程序訪問(wèn)本地資源受到很大的約束，而在網(wǎng)上流動(dòng)的滿足各行業(yè)的業(yè)務(wù)規(guī)則的數(shù)據(jù)，最終需要通過(guò)后臺(tái)服務(wù)端程序?qū)?shù)據(jù)持久化到本地硬盤(pán)上，可以說(shuō)前端應(yīng)用與后端應(yīng)用相輔相成、缺一不可。

常用的后端跨平臺(tái)桌面應(yīng)用開(kāi)發(fā)的框架有Mono、QT 等，要求具有C、C++、C#編程經(jīng)驗(yàn)。長(zhǎng)期從事Web 前端開(kāi)發(fā)的軟件從業(yè)人員，要從事后端桌面應(yīng)用開(kāi)發(fā)，面對(duì)這些與前端JavaScript 語(yǔ)言完全不同特性的語(yǔ)言，需要學(xué)習(xí)面向?qū)ο缶幊毯头盒途幊蹋@對(duì)前端開(kāi)發(fā)人員來(lái)說(shuō)，有一定難度。然而，在基于JavaScript 引擎V8 的Node.js 橫空出世之后，使得精通HTML、CSS和JavaScript語(yǔ)言的前端工程師，可以使用整合了Node.js 和WebKit 技術(shù)的Electron架構(gòu)，在后端桌面服務(wù)端程序開(kāi)發(fā)中大放異彩。

1 JavaScript語(yǔ)言運(yùn)行環(huán)境Node.js

Node.js 是Javascript 的一個(gè)服務(wù)器端運(yùn)行環(huán)境，它使得Javascript 可以脫離瀏覽器的束縛而運(yùn)行在服務(wù)器環(huán)境下，可以像PHP、Python 等語(yǔ)言一樣進(jìn)行服務(wù)器端程序的開(kāi)發(fā)［1-2］，它是一個(gè)為實(shí)時(shí)Web（Real-time Web）應(yīng)用開(kāi)發(fā)而誕生的平臺(tái)，它從誕生之初就充分考慮了在實(shí)時(shí)響應(yīng)、超大規(guī)模數(shù)據(jù)要求下的架構(gòu)的可擴(kuò)展性［3］，這使得它摒棄了傳統(tǒng)平臺(tái)依靠多線程來(lái)實(shí)現(xiàn)高并發(fā)的設(shè)計(jì)思路，而采用了單線程、異步I/O、事件驅(qū)動(dòng)式的程序設(shè)計(jì)模型［4］。

Node.js與Chrome 瀏覽器相比，除了HTML、WebKit 和顯卡這些UI 相關(guān)技術(shù)沒(méi)有支持外，其他功能與Chrome 瀏覽器十分相似［5］，它們的組成結(jié)構(gòu)如圖1所示。

圖1 Chrome與Node.js結(jié)構(gòu)圖

從圖1 可看出，Node.js 開(kāi)發(fā)人員抽象出了Libuv層，使得Node.js的異步非阻塞模型可以兼容Windows 和基于POSIX 的操作系統(tǒng)等平臺(tái)。在Windows 操作系統(tǒng)平臺(tái)下，采用IOCP 機(jī)制實(shí)現(xiàn)，基于POSIX 的操作系統(tǒng)平臺(tái)下，則對(duì)Libev和Libeio庫(kù)進(jìn)行抽象封裝來(lái)實(shí)現(xiàn)事件驅(qū)動(dòng)和異步I/O［6］。由于 Node.js 平臺(tái)抽象了中間層（libuv），使得Node.js實(shí)現(xiàn)跨平臺(tái)成為可能。

在 windows10 操作系統(tǒng) 64 位 CPU 架構(gòu)安裝Node.js v13.14.0軟件過(guò)程如下：

（1）創(chuàng)建d: odejs目錄；

（2）在 d: odejs 目錄下創(chuàng)建 node_global 和node_cache子目錄；

（3）打開(kāi)https://nodejs.org/dist/v14.16.1/網(wǎng)頁(yè)，選擇node-v14.16.1-x64.msi 下載并安裝至d: odejs目錄下；

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

（5）查看設(shè)置npm config get cache、npm config get prefix；

（6）在系統(tǒng)環(huán)境變量添加NODE_PATH，輸入路徑為：D: odejs ode_global（重啟）；

（7）設(shè)置 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）添加系統(tǒng)變量path的內(nèi)容（重啟），因?yàn)閏npm 會(huì)被安裝到D: odejs ode_global 下，而系統(tǒng)變量path并未包含該路徑。

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

2 跨平臺(tái)桌面應(yīng)用開(kāi)發(fā)架構(gòu)Electron

Electron 是一個(gè)使用 JavaScript、HTML 和CSS 構(gòu)建桌面應(yīng)用程序的框架。嵌入Chromium和Node.js 到二進(jìn)制的Electron 允許操作者保持一個(gè)JavaScript 代碼并創(chuàng)建在Windows、macOS和Linux 等平臺(tái)上運(yùn)行的跨平臺(tái)應(yīng)用——不需要本地開(kāi)發(fā)經(jīng)驗(yàn)［7］。

在Electron 開(kāi)發(fā)架構(gòu)，有主進(jìn)程和渲染進(jìn)程的概念。主進(jìn)程執(zhí)行的文件就是模塊描述文件package.json 中main 數(shù)據(jù)項(xiàng)指定的文件，也是開(kāi)發(fā)的桌面應(yīng)用程序的入口文件，它負(fù)責(zé)建渲染進(jìn)程、管理應(yīng)用程序的生命周期、處理本地文件系統(tǒng)和網(wǎng)絡(luò)請(qǐng)求等任務(wù)。在Electron 應(yīng)用程序中，主進(jìn)程由一個(gè)Node.js 模塊組成，可以通過(guò)它來(lái)訪問(wèn)底層操作系統(tǒng)的API 和功能。主進(jìn)程還可以通過(guò)進(jìn)程間通信（IPC）機(jī)制與渲染進(jìn)程通信，實(shí)現(xiàn)雙方之間的數(shù)據(jù)傳輸和消息交互。每一個(gè)Web 網(wǎng)頁(yè)對(duì)應(yīng)一個(gè)渲染進(jìn)程，各個(gè)渲染進(jìn)程之間是相互獨(dú)立的，都是由主進(jìn)程創(chuàng)建。主程序與渲染進(jìn)程之間、渲染進(jìn)程之間可以直接或間接通過(guò)消息發(fā)送或共享存儲(chǔ)區(qū)等方法進(jìn)行數(shù)據(jù)交互。

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

3 在Electron中實(shí)現(xiàn)閃爍托盤(pán)程序

以創(chuàng)建一個(gè)托盤(pán)程序?yàn)槔?，?lái)說(shuō)明使用Electron進(jìn)行軟件開(kāi)發(fā)的過(guò)程，程序?qū)崿F(xiàn)如下功能：

（1）程序初始界面，在渲染進(jìn)程網(wǎng)頁(yè)中顯示默認(rèn)的托盤(pán)程序菜單項(xiàng)的說(shuō)明信息、操作系統(tǒng)信息、Node.js和Electron版本信息；

（2）托盤(pán)圖標(biāo)每隔500 毫秒顯示兩個(gè)圖標(biāo)中的一個(gè)，以達(dá)到動(dòng)態(tài)效果；

（3）點(diǎn)擊關(guān)閉按鈕，程序界面隱藏，在任務(wù)欄的托盤(pán)位置顯示閃爍托盤(pán)圖標(biāo)；

（4）對(duì)閃爍托盤(pán)圖標(biāo)點(diǎn)擊鼠標(biāo)右鍵，程序主界面顯示相應(yīng)的菜單項(xiàng)的說(shuō)明信息、操作系統(tǒng)信息、Node.js和Electron版本信息；

（5）在Windows 的任務(wù)管理器中不顯示程序進(jìn)程，以防備通過(guò)Ctrl+Alt+Del 快捷鍵強(qiáng)制退出程序；

（6）定義全局快捷鍵Ctrl+Alt+k，彈出是否退出程序?qū)υ捒?，如果選擇確定則程序退出，如果不知道這個(gè)快捷鍵則不能退出程序，除非系統(tǒng)重啟。

為了實(shí)現(xiàn)上述功能，在項(xiàng)目一共創(chuàng)建了七個(gè)文件，文件清單見(jiàn)附件，項(xiàng)目文件結(jié)構(gòu)如圖2紅色框所示，程序運(yùn)行的初始界面如圖3所示。

圖2 文件結(jié)構(gòu)

4 結(jié)語(yǔ)

Electron 開(kāi)發(fā)跨平臺(tái)桌面應(yīng)用程序的優(yōu)點(diǎn)包括以下幾點(diǎn)：

（1）跨平臺(tái)：能夠?qū)⒁环荽a打包成不同平臺(tái)的應(yīng)用，減少開(kāi)發(fā)和維護(hù)成本；

（2）快速開(kāi)發(fā)：使用Node.js 和JavaScript 等現(xiàn)有的開(kāi)發(fā)技術(shù)和庫(kù)，快速開(kāi)發(fā)出高質(zhì)量的桌面應(yīng)用程序；

（3）易于維護(hù)：應(yīng)用程序的維護(hù)和更新非常簡(jiǎn)單，能夠快速修復(fù)bug、更新版本；

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

Electron 開(kāi)發(fā)跨平臺(tái)桌面應(yīng)用程序包括以下缺點(diǎn)：

（1）資源占用：由于Electron 應(yīng)用程序需要同時(shí)運(yùn)行Chromium 瀏覽器和Node.js 運(yùn)行環(huán)境，因此它的資源占用會(huì)比較高，可能會(huì)導(dǎo)致應(yīng)用程序在老舊計(jì)算機(jī)上運(yùn)行緩慢；

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

（3）大?。篍lectron 應(yīng)用程序的文件大小比較大，如果需要向用戶提供快速的應(yīng)用程序安裝體驗(yàn)，需要考慮這一點(diǎn)；

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

總體來(lái)說(shuō)，Electron 開(kāi)發(fā)跨平臺(tái)桌面應(yīng)用程序是一種很好的方式，但是在選擇它之前需要綜合考慮以上這些優(yōu)缺點(diǎn)。

附件：