如何以正确的方式在 Polymer 元素之间共享功能?

How to share functionality between Polymer elements in the right way?

Polymer behaviors 很棒。但有时我需要在多个元素之间共享一个 function/method 。我不需要行为附带的生命周期回调、声明的属性等。

我对 Polymer 的架构不是很了解:

  1. 将共享方法添加到自定义元素的最佳方式和位置(在生命周期回调中?)
  2. 什么时候延长Polymer.Base比较好?

示例 1:

假设我们想要添加一个延迟监听方法,它将事件监听器附加到元素 afterNextRender:

Polymer.RenderStatus.afterNextRender(this, function() {
    // add event listeners
});

正如 Monica 在 Practical lessons from a year of building web components - Google I/O 2016 中解释的那样,对于可能会大量创建的元素,应避免使用 Polymer 的 listeners 对象。

示例 2

按照她的例子,现在我们只想在元素 hovered/active/focused 时向元素添加连锁反应或控制行为,否则将其删除。许多元素都需要此功能。

示例3,来自lodash等外部库的函数

暂时针对我自己的问题做一个简短的说明。

所有元素:Polymer.Base

Polymer 使用 Base_addFeature 方法来扩展 Base 原型,它是所有 Polymer 元素的原型(旁注:_addFeature 方法本身使用 Baseextend 内部方法)。这是扩展聚合物元素的最深层次。

特定元素类型:元素构造函数对象以及行为

行为 在特定类型的所有元素之间共享。它们在元素 注册 时间应用。当然,构造函数对象中的方法也会转到元素类型的原型。

特定于元素实例:其他一切

从元素创建开始定义的其他方法特定于该元素实例。此外,如果您使用 Polymer.Base.create(tag, obj)obj 中的所有属性和方法都将应用于创建的元素(使用 in 关键字,即没有访问器)。因此,obj 可以根据上下文在不同的元素实例之间共享。

结论

Polymer 创建者希望我们在不同元素类型之间共享方法(以及更多)的标准方式是使用 Behaviors。但是,如果您拥有所有或大多数元素都使用的功能,则扩展 Polymer.Base 是一个不错的选择。