跳到主要內容

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