javascript - Mixin 是什么以及何时在 polymer 中使用它？

Question

我对 Polymer 框架很陌生，正在检查我们是否可以从其中的多个类继承，然后我想到了 Mixin 的想法。我对此仍然有些困惑。我需要很好的例子来解释组合的思想、多重继承以及 Mixin 的作用来实现它。我将不胜感激您的帮助。

谢谢

Answer 1

混合

A mixin is an abstract subclass; i.e. a subclass definition that may be applied to different superclasses to create a related family of modified classes. - Gilad Bracha and William Cook, Mixin-based Inheritance

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

这是一个简单的例子

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 阅读有关 mixin 的更多信息

Polymer 2 还支持与 mixin 类似的行为。

行为

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

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

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

在 Polymer 2 中，这些行为不能再像这样使用了。相反，你可以像这样使用它们

<script>

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