首页 文章

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

提问于
浏览 次
8

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

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

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

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

将“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中的自定义元素？

javascript polymer polymer-2.x

2 回答

  • 7

    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依赖项引用 .

    回复于
  • 7

    您可以通过扩展 Polymer.mixinBehaviors(behaviors, klass) where将Polymer 2混合行为用作mixin

    • behaviors 是Behavior对象或行为数组
    • 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

    回复于

相关问题