Ember 3.15 "Octane" 发布：原生 ES 类、装饰器和新的 Glimmer 组件 API

栏目: 软件资讯 · 发布时间: 4年前

内容简介：Ember 3.15 发布了，此项目包含的 Ember.js, Ember Data 和 Ember CLI 也均已更新。除了常规的引入新功能和 bugfix，Ember 3.15 还标志了 Octane edition 的正式发布，这也是 Ember 的首个 edition release。 Ed...

Ember 3.15 发布了，此项目包含的 Ember.js, Ember Data 和 Ember CLI 也均已更新。除了常规的引入新功能和 bugfix，Ember 3.15 还标志了 Octane edition 的正式发布，这也是 Ember 的首个 edition release。

Edition 是 Ember 在 RFC #364 - Ember 2018 Roadmap 中引入的概念。一个版本（edition）代表了一个统一的编程模型，而发布新的 edition 则代表了由于 Ember 添加了新功能和新概念而导致编程模型的转变。Ember Octane 正是 Ember 的首个 edition。

Ember 3.15 "Octane" 带来了更多现代化的功能，诸如原生 ES 类、装饰器、新的 Glimmer 组件 API，以及一种称为“跟踪属性（tracked properties）”新的状态管理方法。结合起来，这些对 Ember 的创新性改变不仅仅是新的工具和 API，Octane 的特性共同构成了 Ember 应用程序构建方式的范式转变。

此版本值得关注的改进：

引入 Glimmer 组件

旧版本使用组件的方式

import Component from '@ember/component';

export default Component.extend({
  tagName: 'p',
  classNames: ["tooltip"],
  classNameBindings: ["isEnabled:enabled", "isActive:active"],
})

Ember 3.15 新版本使用 Glimmer 组件

<p class="tooltip {{if @isEnabled 'enabled'}} {{if @isActive 'active'}}">
  {{yield}}
</p>

Ember 3.15 亦即意味着我们可以创建一个没有根元素的组件

<p>{{yield}}</p>
<hr>

针对 Ember 组件模型引入元素修饰符，此功能使开发者可以构建未连接到任何特定组件的可重用 DOM 行为
Glimmer Reactivity

下面是 Ember 3.14 指南中的计算属性示例：

import EmberObject, { computed } from '@ember/object';

const Person = EmberObject.extend({
  firstName: null,
  lastName: null,
  age: null,
  country: null,

  fullName: computed('firstName', 'lastName', function() {
    return `${this.firstName} ${this.lastName}`;
  }),

  description: computed('fullName', 'age', 'country', function() {
    return `${this.fullName}; Age: ${this.age}; Country: ${this.country}`;
  })
});

let captainAmerica = Person.create({
  firstName: 'Steve',
  lastName: 'Rogers',
  age: 80,
  country: 'USA'
});

captainAmerica.description; // "Steve Rogers; Age: 80; Country: USA"
captainAmerica.set('firstName', 'Steven');
captainAmerica.description; // "Steven Rogers; Age: 80; Country: USA"

Ember 3.15 新版本中的跟踪属性（Tracked Properties）

class Person {
  @tracked firstName;
  @tracked lastName;
  @tracked age;
  @tracked country;

  constructor({ firstName, lastName, age, country }) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.country = country;
  }

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }),

  get description() {
    return `${this.fullName}; Age: ${this.age}; Country: ${this.country}`;
  })
}

let captainAmerica = new Person({
  firstName: 'Steve',
  lastName: 'Rogers',
  age: 80,
  country: 'USA'
});

captainAmerica.description; // "Steve Rogers; Age: 80; Country: USA"
captainAmerica.firstName = "Steven";
captainAmerica.description; // "Steven Rogers; Age: 80; Country: USA"

Ember 3.15 详细更新请点此查看：https://blog.emberjs.com/2019/12/20/octane-is-here.html