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

Question

我想要一个我定义的自定义元素,以便Polymer.IronScrollTargetBehavior在Polymer 2中使用.

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

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

在Polymer 2 升级指南中,它说你应该:

将"behavior"实现为返回类表达式的mixins.

在链接的文章中,它解释了如何使用以下语法进行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.mixinBehaviors(behaviors, klass)其中
- behaviors是行为对象或行为数组
- klass是Element类,将Polymer 2混合行为用作mixin .

即

<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>

有关更多详细信息,请在Polymer源代码中搜索mixinBehaviors方法: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分离到自己的文件中,然后在组成使用mixins的元素时将其作为Html Import依赖项引用.