Question

我想要一个自定义元素，我在聚合物2中定义Polymer.IronScrollTargetBehavior。

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

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

在Polymer 2 upgrade guide中，它表示你应该：

实施＆＃34;行为＆＃34;为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，或者如果我在错误的路径上，如何将一个已定义的Polymer行为应用于Polymer 2中的自定义元素？

Answer 1

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分离到自己的文件中，然后在组成使用mixins的元素时将其引用为Html Import依赖项。

Answer 2

您可以通过扩展将Polymer 2混合行为用作mixins 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

在聚合物2中应用JS Mixins的行为

2 个答案: