javascript - 在 Polymer 2 中使用 JS Mixins 应用行为

Question

我想要我定义的自定义元素在 Polymer 2 中具有 Polymer.IronScrollTargetBehavior。

在 Polymer 1 中，这可以通过将其添加到 behaviors 数组中来完成:

Polymer({
    is: 'my-element',
    behaviors: [Polymer.IronScrollTargetBehavior]
});

在 polymer 2 upgrade guide ，它说你应该:

Implement "behaviors" as mixins that return class expressions.

在链接的文章中，它解释了如何将以下语法用于混合:

let MyMixin = (superclass) => class extends superclass {  
    foo() {
        console.log('foo from MyMixin');
    }
};

class MyClass extends MyMixin(MyBaseClass) {  
    /* ... */
}

我基本上明白这里发生了什么(尽管我发现 mixin 语法很难让我全神贯注)，并且我可以获得示例代码。

我没能做到的是将这个概念应用到 Polymer.IronScrollTargetBehavior，并为它创建一个 mixin。由于该行为已被定义为一个对象，我不知道将其放入何处。

那么，我该如何在这种情况下实现正确的混合，或者如果我走错了路，我该如何将定义的 Polymer 行为之一应用到我在 Polymer 2 中的自定义元素？

Answer 1

您可以通过扩展将 Polymer 2 混合行为用作混入 Polymer.mixinBehaviors(behaviors, klass) 其中
- behaviors 是行为对象或行为数组
- klass 是元素类。

即

<dom-module id="element-name">
  <template><!-- ... --></template>
  <script>
    class MyElement extends Polymer.mixinBehaviors([MyBehavior, MyBehavior2], Polymer.Element) {
     static get is() { return 'element-name' }
     /* ... */
    }
    customElements.define('element-name', MyElement);
  </script>
</dom-module>

有关更多详细信息，请搜索 mixinBehaviors 方法的 Polymer 源代码:polymer/lib/legacy/class.html

值得一读:https://www.polymer-project.org/2.0/docs/upgrade#mixins