跳至主要內容

Electron 1.0 即將推出的 API 變更

·4 分鐘閱讀時間
zcbenz
zcbenz

自 Electron 的開始，也就是它以前被稱為 Atom-Shell 的時候起，我們一直在嘗試為 Chromium 的內容模組和原生 GUI 元件提供一個良好的跨平台 JavaScript API。這些 API 最初非常有機地產生，隨著時間的推移，我們進行了幾次更改以改進初始設計。

現在 Electron 正準備發布 1.0 版本，我們想藉此機會處理最後一些令人困擾的 API 細節。下面描述的變更包含在 0.35.x 版本中，舊的 API 會報告棄用警告，因此您可以為未來的 1.0 版本做好準備。Electron 1.0 不會在幾個月內發布，因此您在這些變更成為重大變更之前還有一些時間。

棄用警告​

預設情況下，如果您使用已棄用的 API，將會顯示警告。若要關閉它們，您可以將 process.noDeprecation 設定為 true。若要追蹤已棄用 API 使用的來源，您可以將 process.throwDeprecation 設定為 true 以拋出例外而不是列印警告，或將 process.traceDeprecation 設定為 true 以列印棄用的追蹤資訊。

使用內建模組的新方式​

內建模組現在被分組到一個模組中，而不是分成獨立的模組，因此您可以使用它們，而不會與其他模組發生衝突

var app = require('electron').app;
var BrowserWindow = require('electron').BrowserWindow;

為了向後相容，仍然支援舊的 require('app') 方式，但您也可以關閉它

require('electron').hideInternalModules();
require('app'); // throws error.

更輕鬆使用 remote 模組的方式​

由於使用內建模組的方式發生了變化，我們已簡化在渲染器程序中使用主程序端模組。您現在只需存取 remote 的屬性即可使用它們

// New way.
var app = require('electron').remote.app;
var BrowserWindow = require('electron').remote.BrowserWindow;

而不是使用冗長的 require 鏈

// Old way.
var app = require('electron').remote.require('app');
var BrowserWindow = require('electron').remote.require('BrowserWindow');

分割 ipc 模組​

ipc 模組同時存在於主程序和渲染器程序中，並且 API 在每一側都不同，這對於新使用者來說非常令人困惑。我們已將主程序中的模組重新命名為 ipcMain，並將渲染器程序中的模組重新命名為 ipcRenderer，以避免混淆

// In main process.
var ipcMain = require('electron').ipcMain;
// In renderer process.
var ipcRenderer = require('electron').ipcRenderer;

對於 ipcRenderer 模組，接收訊息時新增了一個額外的 event 物件，以符合 ipcMain 模組中處理訊息的方式

ipcRenderer.on('message', function (event) {
  console.log(event);
});

標準化 BrowserWindow 選項​

BrowserWindow 選項的樣式根據其他 API 的選項而有所不同，並且由於名稱中包含 -，因此在 JavaScript 中使用有點困難。現在它們已標準化為傳統的 JavaScript 名稱

new BrowserWindow({ minWidth: 800, minHeight: 600 });

遵循 DOM 的 API 名稱慣例​

Electron 中的 API 名稱以前偏好所有 API 名稱使用 camelCase，例如 Url 到 URL，但 DOM 有其自己的慣例，它們偏好 URL 而不是 Url，同時使用 Id 而不是 ID。我們已進行以下 API 重新命名以符合 DOM 的樣式

  • Url 重新命名為 URL
  • Csp 重新命名為 CSP

由於這些變更，當您的應用程式使用 Electron v0.35.0 時，您會注意到許多棄用。修正它們的一種簡單方法是將所有 Url 執行個體替換為 URL。

變更 Tray 的事件名稱​

Tray 事件名稱的樣式與其他模組略有不同，因此已進行重新命名以使其與其他模組相符。

  • clicked 重新命名為 click
  • double-clicked 重新命名為 double-click
  • right-clicked 重新命名為 right-click