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

Question

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

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

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

在 Polymer 2 upgrade guide 中，它说您应该：

将“行为”实现为mixins that return class expressions。

在链接的文章中，它解释了如何为 mixins 使用以下语法：

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

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

我主要了解这里发生的事情（尽管我发现很难理解 mixin 语法），并且我可以获取示例代码来工作。

我无法将这个概念应用到Polymer.IronScrollTargetBehavior，并为它创建一个mixin。由于该行为已经被定义为一个对象，我不知道该放在哪里。

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

Answer 1

您可以通过扩展将 Polymer 2 混合行为用作 mixin Polymer.mixinBehaviors(behaviors, klass)哪里
- behaviors 是行为对象或行为数组
- klass 是 Element 类。

即

<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

Answer 2

Polymer 2.0 有一个兼容层，它仍然支持旧的 Polymer 函数语法。大多数 2.0 预览元素（如果不是全部）仍保留旧语法。重大更改主要在 dom-module 标记中。

如果您正在编写新元素，建议您切换到基于类的语法。但是，如果您将 1.0 元素移植到 2.0 并且这些元素依赖于 Polymer 行为，我认为此时您没有太多选择，只能保留旧语法。

在基于类的语法中，您可以使用类似这样的方式流畅地模拟类 mixin 的 Element 多重继承

    let Mixin = (superclass) => new MixinBuilder(superclass);
    class MixinBuilder {  
        constructor(superclass) {
          this.superclass = superclass;
        }

        with(...mixins) { 
         return mixins.reduce((c, mixin) => mixin(c), this.superclass);
        }
    }

    const MyMixin = subclass => class extends subclass {
      _test(){

      }
    }

    const MyMixinTwo = subclass => class extends subclass {
      _testTwo(){

      }
    }

    class MyElement extends Mixin(Polymer.Element).with(MyMixin,MyMixin2) {
       static get is() { return 'my-element' }
    }  

您可以将 MixinBuilder 分离到自己的文件中，然后在组合使用 mixin 的元素时将其作为 Html 导入依赖项引用。