Skip to main content

Electron 0.37 有什么新功能？

· 8 min read
zeke

Electron 0.37 最近发布了 released，其中包含从 Chrome 47 到 Chrome 49 的重大升级，以及几个新的核心 API。此最新版本引入了 Chrome 48 和 Chrome 49 中的所有新功能。这包括 CSS 自定义属性、增强的 ES6 支持、KeyboardEvent 改进、Promise 改进以及许多其他现已在 Electron 应用中提供的新功能。

¥Electron 0.37 was recently released and included a major upgrade from Chrome 47 to Chrome 49 and also several new core APIs. This latest release brings in all the new features shipped in Chrome 48 and Chrome 49. This includes CSS custom properties, increased ES6 support, KeyboardEvent improvements, Promise improvements, and many other new features now available in your Electron app.

新功能​

¥What's New

CSS 自定义属性​

¥CSS Custom Properties

如果你使用过 Sass 和 Less 等预处理语言，你可能熟悉变量，它允许你为配色方案和布局等内容定义可重用的值。变量有助于保持样式表的 DRY 原则并更易于维护。

¥If you've used preprocessed languages like Sass and Less, you're probably familiar with variables, which allow you to define reusable values for things like color schemes and layouts. Variables help keep your stylesheets DRY and more maintainable.

CSS 自定义属性与预处理变量类似，因为它们可重用，但它们还具有独特的特性，使其更加强大和灵活：它们可以使用 JavaScript 进行操作。这项微妙但强大的功能允许动态更改可视化界面，同时仍然受益于 CSS 的硬件加速，并减少前端代码和样式表之间的代码重复。

¥CSS custom properties are similar to preprocessed variables in that they are reusable, but they also have a unique quality that makes them even more powerful and flexible: they can be manipulated with JavaScript. This subtle but powerful feature allows for dynamic changes to visual interfaces while still benefitting from CSS's hardware acceleration, and reduced code duplication between your frontend code and stylesheets.

有关 CSS 自定义属性的更多信息，请参阅 MDN 文章 和 Google Chrome 演示。

¥For more info on CSS custom properties, see the MDN article and the Google Chrome demo.

CSS 变量的实际应用​

¥CSS Variables In Action

让我们来看一个可以在你的应用中实时调整的简单变量示例。

¥Let's walk through a simple variable example that can be tweaked live in your app.

:root {
  --awesome-color: #a5ecfa;
}

body {
  background-color: var(--awesome-color);
}

变量值可以直接在 JavaScript 中检索和更改：

¥The variable value can be retrieved and changed directly in 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');

变量值也可以从开发工具的“样式”部分进行编辑，以便快速获得反馈和调整：

¥The variable values can be also edited from the Styles section of the development tools for quick feedback and tweaks:

CSS properties in Styles tab

KeyboardEvent.code 属性​

¥KeyboardEvent.code Property

Chrome 48 添加了新的 code 属性，该属性在 KeyboardEvent 事件中可用，该事件将是独立于操作系统键盘布局的物理按键按下事件。

¥Chrome 48 added the new code property available on KeyboardEvent events that will be the physical key pressed independent of the operating system keyboard layout.

这应该使你在 Electron 应用中实现自定义键盘快捷键在不同机器和配置之间更加准确和一致。

¥This should make implementing custom keyboard shortcuts in your Electron app more accurate and consistent across machines and configurations.

window.addEventListener('keydown', function (event) {
  console.log(`${event.code} was pressed.`);
});

查看 这个例子 以了解其实际应用。

¥Check out this example to see it in action.

Promise 拒绝事件​

¥Promise Rejection Events

Chrome 49 添加了两个新的 window 事件，当被拒绝的 Promise 事件未得到处理时，你可以收到通知。

¥Chrome 49 added two new window events that allow you to be notified when an rejected Promise goes unhandled.

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);
});

查看 这个例子 以了解其实际应用。

¥Check out this example to see it in action.

V8 中的 ES2015 更新​

¥ES2015 Updates in V8

Electron 中现在的 V8 版本集成了 ES2015 的 91%。以下是一些你可以开箱即用的有趣新增功能 - 无需标志或预编译器：

¥The version of V8 now in Electron incorporates 91% of ES2015. Here are a few interesting additions you can use out of the box—without flags or pre-compilers:

默认参数​

¥Default parameters

function multiply(x, y = 1) {
  return x * y;
}

multiply(5); // 5

解构赋值​

¥Destructuring assignment

Chrome 49 添加了 解构赋值 属性，使变量和函数参数的赋值更加容易。

¥Chrome 49 added destructuring assignment to make assigning variables and function parameters much easier.

这使得 Electron 的需求分配更加简洁紧凑：

¥This makes Electron requires cleaner and more compact to assign now:

浏览器进程要求​

¥Browser Process Requires

const { app, BrowserWindow, Menu } = require('electron');
渲染器进程需求​

¥Renderer Process Requires

const { dialog, Tray } = require('electron').remote;
其他示例​

¥Other Examples

// 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​

¥New Electron APIs

以下是一些新的 Electron API，你可以在 Electron 版本发布 的发行说明中查看每个新 API。

¥A few of the new Electron APIs are below, you can see each new API in the release notes for Electron releases.

BrowserWindow 上的 show 和 hide 事件​

¥show and hide events on BrowserWindow

这些事件在窗口显示或隐藏时发出。

¥These events are emitted when the window is either shown or hidden.

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');
});

OS X 上的 app 上的 platform-theme-changed​

¥platform-theme-changed on app for OS X

切换系统的 夜间模式 主题时会触发此事件。

¥This event is emitted when the system’s Dark Mode theme is toggled.

const { app } = require('electron');

app.on('platform-theme-changed', function () {
  console.log(`Platform theme changed. In dark mode? ${app.isDarkMode()}`);
});

OS X 上的 app.isDarkMode()​

¥app.isDarkMode() for OS X

如果系统处于黑夜间模式，此方法返回 true，否则返回 false。

¥This method returns true if the system is in Dark Mode, and false otherwise.

OS X 的 BrowserWindow 中 scroll-touch-begin 和 scroll-touch-end 事件​

¥scroll-touch-begin and scroll-touch-end events to BrowserWindow for OS X

这些事件在滚轮事件阶段开始或结束时发出。

¥These events are emitted when the scroll wheel event phase has begun or has ended.

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');
});