什么是Mixin以及何时在聚合物中使用它？

Posted 2021-04-12

我是Polymer框架的新手，并且正在检查我们是否可以继承其中的多个类，然后我遇到了Mixin的想法。我仍有一些关于它的混淆。我需要很好的例子来解释组合，多重继承和Mixin的作用来实现它。我将非常感谢你的帮助。

谢谢

答案

混入

mixin是一个抽象的子类;即子类定义，可以应用于不同的超类以创建相关的修改类族。 - Gilad Bracha和William Cook，基于Mixin的继承

简单来说，类表达式mixins允许您在元素之间共享代码而无需添加公共超类。在Polymer中，mixin看起来类似于典型的Polymer原型，可以定义生命周期回调，声明的属性，默认属性，观察者和事件监听器。

这是一个简单的例子

SelectedMixin = function (superClass) {
return class extends superClass {

    static get properties() {
        return {
            isSelected: {
                type: Boolean,
                value: false,
                notify: true,
                observer: '_selectedChanged'
            }
        };
    }

    _selectedChanged(selected) { 
        // do something
    }

    getSelectedItems() {
        // do something
    }
   }
}


class MyElement1 extends SelectedMixin(Polymer.Element) { 

      hightligh(){
            const selected = this.getSelectedItems();
            // do something
      }
}

class MyElement2 extends SelectedMixin(Polymer.Element) { 

    sort(){
        const selected = this.getSelectedItems();
        // do something
    }
}

你可以看到我们重复使用SelectedMixin有两个元素，而不需要复制两个元素中的代码。如果您有多个mixin，那么您可以像这样使用它们

class MyElement extends MixinB(MixinA(Polymer.Element)) { ... }

您可以从here了解更多关于mixins的信息

聚合物2还支持以与mixin类似的方式起作用的行为。

行为

Polymer 1支持使用称为behavior的共享代码模块扩展自定义元素原型。

行为的简单示例可以这样写

<script>
SelectedBehavior = {

  properties: {
    isSelected: {
      type: Boolean,
      value: false,
      notify: true,
      observer: '_selectedChanged'
    }
  },

  _selectedChanged: function(selected) {
      // do something 
  },
};
<script>

<script>
  Polymer({
     is: 'my-element',
     behaviors: [SelectedBehavior]
  });
<script>

在聚合物2中，这些行为不能再像这样使用了。相反，你像这样使用它们

<script>

  class MyElement extends Polymer.mixinBehaviors(
     [SelectedBehavior] , Polymer.Element) 
  {
      static get is() { return 'my-element' }
  }
</script>