Skip to main content

Electron 0.37 有哪些新功能

· 8 min read
zeke

Electron 0.37 最近已发布，并进行了重大升级，从 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 在 KeyboardEvent 事件上新增了 code 属性，该属性将表示实际按下的物理按键，而不受操作系统键盘布局的影响。

🌐 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 版本现在支持 91% 的 ES2015。这里有一些有趣的新功能，你可以开箱即用——无需标志或预编译器：

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

platform-theme-changed 于 app 针对 OS X​

🌐 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()}`);
});

app.isDarkMode() 用于 OS X​

🌐 app.isDarkMode() for OS X

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

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

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

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