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