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

时间:2018-02-08 10:34:03

标签: javascript polymer multiple-inheritance polymer-2.x

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

由于

1 个答案:

答案 0 :(得分:2)

Mixins

  

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

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

这是一个简单的例子

+----+-------------+
| Id | AccessoryId |
+----+-------------+
|  6 | NULL        |
|  8 | 6           |
+----+-------------+

您可以看到我们使用两个元素重用了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 } } ,而无需复制两个元素中的代码。 如果您有多个mixin,那么您可以像这样使用它们

SelectedMixin

您可以从here

了解有关mixins的更多信息

聚合物2也支持与mixin类似的行为。

<强>行为

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

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

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

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

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