Electron 0.37 最近发布，其中包括从 Chrome 47 到 Chrome 49 的重大升级，以及几个新的核心 API。这个最新版本带来了 Chrome 48 和 Chrome 49 中发布的所有新功能。这包括 CSS 自定义属性、增强的 ES6 支持、KeyboardEvent 改进、Promise 改进以及现在可在 Electron 应用中使用的许多其他新功能。
新特性
CSS 自定义属性
如果你使用过像 Sass 和 Less 这样的预处理器语言，你可能熟悉**变量**，它允许你为颜色方案和布局等定义可重用值。变量有助于保持你的样式表 DRY（Don't Repeat Yourself）并更易于维护。
CSS 自定义属性与预处理器变量类似，因为它们都是可重用的，但它们也具有独特的特性，使其更加强大和灵活：**它们可以通过 JavaScript 进行操作**。这个微妙但强大的功能允许对视觉界面进行动态更改，同时仍能受益于 CSS 的硬件加速，并减少前端代码和样式表之间的代码重复。
有关 CSS 自定义属性的更多信息，请参阅 MDN 文章 和 Google Chrome 示例。
CSS 变量实战
让我们来看一个简单的变量示例，可以在你的应用中实时调整。
:root {
--awesome-color: #a5ecfa;
}
body {
background-color: var(--awesome-color);
}
变量值可以直接在 JavaScript 中检索和更改
let color = window
.getComputedStyle(document.body)
.getPropertyValue('--awesome-color');
document.body.style.setProperty('--awesome-color', 'orange');
变量值也可以从开发工具的**样式**部分进行编辑，以便快速获得反馈和进行调整
KeyboardEvent.code 属性
Chrome 48 在 KeyboardEvent 事件中添加了新的 code 属性，该属性表示按下物理键的标识，独立于操作系统键盘布局。
这应该使得在 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);
解构赋值
Chrome 49 添加了解构赋值，使得变量和函数参数的赋值变得更加容易。
这使得 Electron 的 require 现在更简洁、更紧凑
主进程 Require
const { app, BrowserWindow, Menu } = require('electron');
渲染进程 Require
const { dialog, Tray } = require('electron').remote;
其他示例
const [first, , last] = findAll();
function whois({ displayName: displayName, fullName: { firstName: name } }) {
console.log(`${displayName} is ${name}`);
}
let user = {
displayName: 'jdoe',
fullName: {
firstName: 'John',
lastName: 'Doe',
},
};
whois(user);
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');
});
当系统深色模式主题切换时，会触发此事件。
const { app } = require('electron');
app.on('platform-theme-changed', function () {
console.log(`Platform theme changed. In dark mode? ${app.isDarkMode()}`);
});
OS X 的 app.isDarkMode()
如果系统处于深色模式，此方法返回 true，否则返回 false。
当滚轮事件阶段开始或结束时，会触发这些事件。
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');
});
