Electron 0.37 的新功能
Electron 0.37 最近已發布，其中包括從 Chrome 47 到 Chrome 49 的重大升級，以及數個新的核心 API。此最新版本引入了 Chrome 48 和 Chrome 49 中發布的所有新功能。這包括 CSS 自訂屬性、增強的 ES6 支援、KeyboardEvent 改善、Promise 改善，以及許多其他新功能，現在都可以在您的 Electron 應用程式中使用。
新功能
CSS 自訂屬性
如果您使用過 Sass 和 Less 等預處理語言，您可能對變數很熟悉，變數可讓您為色彩配置和版面配置等項目定義可重複使用的值。變數有助於保持樣式表的 DRY 並更易於維護。
CSS 自訂屬性類似於預處理變數，因為它們是可重複使用的，但它們也具有獨特的品質，使其更強大且更具彈性：它們可以使用 JavaScript 進行操作。這個細微但強大的功能允許動態更改視覺介面，同時仍然受益於 CSS 的硬體加速，並減少前端程式碼和樣式表之間的程式碼重複。
有關 CSS 自訂屬性的更多資訊，請參閱 MDN 文章和 Google Chrome 示範。
CSS 變數實際應用
讓我們逐步了解一個簡單的變數範例，該範例可以在您的應用程式中即時調整。
:root {
--awesome-color: #a5ecfa;
}
body {
background-color: var(--awesome-color);
}
變數值可以直接在 JavaScript 中檢索和更改
// Get the variable value ' #A5ECFA'
let color = window
.getComputedStyle(document.body)
.getPropertyValue('--awesome-color');
// Set the variable value to 'orange'
document.body.style.setProperty('--awesome-color', 'orange');
也可以從開發工具的 Styles 區段編輯變數值，以獲得快速回饋和調整
KeyboardEvent.code 屬性
Chrome 48 新增了 code 屬性，該屬性可在 KeyboardEvent 事件中使用，它將是按下的實體按鍵，與作業系統鍵盤配置無關。
這應該使在您的 Electron 應用程式中實作自訂鍵盤快捷鍵在跨機器和配置時更加準確和一致。
window.addEventListener('keydown', function (event) {
console.log(`${event.code} was pressed.`);
});
查看 此範例 以查看其實際應用。
Promise 拒絕事件
Chrome 49 新增了兩個新的 window 事件，可讓您在未處理的已拒絕 Promise 時收到通知。
window.addEventListener('unhandledrejection', function (event) {
console.log('A rejected promise was unhandled', event.promise, event.reason);
});
window.addEventListener('rejectionhandled', function (event) {
console.log('A rejected promise was handled', event.promise, event.reason);
});
查看 此範例 以查看其實際應用。
V8 中的 ES2015 更新
現在 Electron 中的 V8 版本整合了 91% 的 ES2015。以下是一些您可以直接使用的有趣新增功能，無需標誌或預編譯器
預設參數
function multiply(x, y = 1) {
return x * y;
}
multiply(5); // 5
解構賦值
Chrome 49 新增了 解構賦值，使賦值變數和函數參數變得更加容易。
這使得 Electron 現在需要更簡潔和更緊湊的賦值
瀏覽器程序 Requires
const { app, BrowserWindow, Menu } = require('electron');
渲染器程序 Requires
const { dialog, Tray } = require('electron').remote;
其他範例
// Destructuring an array and skipping the second element
const [first, , last] = findAll();
// Destructuring function parameters
function whois({ displayName: displayName, fullName: { firstName: name } }) {
console.log(`${displayName} is ${name}`);
}
let user = {
displayName: 'jdoe',
fullName: {
firstName: 'John',
lastName: 'Doe',
},
};
whois(user); // "jdoe is John"
// Destructuring an object
let { name, avatar } = getUser();
新的 Electron API
以下是一些新的 Electron API，您可以在 Electron 版本的版本資訊中查看每個新的 API。
BrowserWindow 上的 show 和 hide 事件
這些事件在視窗顯示或隱藏時發出。
const { BrowserWindow } = require('electron');
let window = new BrowserWindow({ width: 500, height: 500 });
window.on('show', function () {
console.log('Window was shown');
});
window.on('hide', function () {
console.log('Window was hidden');
});
app 上適用於 OS X 的 platform-theme-changed
當系統的 Dark Mode 主題切換時，會發出此事件。
const { app } = require('electron');
app.on('platform-theme-changed', function () {
console.log(`Platform theme changed. In dark mode? ${app.isDarkMode()}`);
});
app.isDarkMode() 適用於 OS X
如果系統處於 Dark Mode，此方法會傳回 true，否則傳回 false。
scroll-touch-begin 和 scroll-touch-end 事件至適用於 OS X 的 BrowserWindow
當滾輪事件階段開始或結束時，會發出這些事件。
const { BrowserWindow } = require('electron');
let window = new BrowserWindow({ width: 500, height: 500 });
window.on('scroll-touch-begin', function () {
console.log('Scroll touch started');
});
window.on('scroll-touch-end', function () {
console.log('Scroll touch ended');
});
