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

问题描述 投票:0回答:1

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

谢谢

javascript polymer multiple-inheritance polymer-2.x
1个回答
2
投票

混入

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>
© www.soinside.com 2019 - 2024. All rights reserved.