为什么喜欢构图而不是继承呢?每种方法都有哪些权衡取舍?什么时候应该选择继承而不是作文?
作为如何使用Polymer和Polymer多重继承/组合扩展多个元素的后续内容,基于他们的答案,我想知道是否可以跨多个Web组件(和多个导入)共享mixin以重用功能.
Mixins似乎是跨多个自定义元素共享功能的唯一方式.但是,您似乎只能在一次导入中使用mixin.这意味着,如果你有一个mixin,它给web组件一个特定的功能(比方说draggable
),如果它不在同一个导入中,就不可能将它混合到你的Polymer元素的构造中.
也许我在那里遇到了一些问题,但如果没有,感觉mixins的使用也不是很灵活,因为我仍然无法在Web组件之间共享功能.
更新:
正如斯科特·迈尔斯在他的评论出来指出,这是有可能在一个以上的进口使用混入.我只是不知道该怎么做,事实证明,这是非常直接的.
假设我们有一个mixin应该在多个组件之间共享,但组件分布在许多导入上.所有人要做的就是在window
对象的自己导入中定义mixin .例如:
shared.html
<script>
window.sharedMixin = {
// shared functionality goes here
};
</script>
Run Code Online (Sandbox Code Playgroud)
然后,在另一个导入中重用另一个组件中的mixin就像导入一样简单 shared.html
.
我-component.html
<link rel="import" href="path/to/shared.html">
Run Code Online (Sandbox Code Playgroud)
从那时起,sharedMixin
在该导入中可用作全局对象:
Polymer('my-component', Platform.mixin({
// my-component logic
}, sharedMixin);
Run Code Online (Sandbox Code Playgroud)
我希望能帮助别人.我会写一篇关于它的博客文章,并将它链接到这里.
更新2
我在这里写了一篇博文:http://pascalprecht.github.io/2014/07/14/inheritance-and-composition-with-polymer/
我知道有关于多重继承/组合的这个问题.但是,似乎这个问题更多的是关于如何从其他元素中的多个现有元素重用功能.显然,解决方案就是mixins.
我想知道,如何在不真正借用现有元素的情况下实际"装饰"现有元素.我们知道extends
可以使用这个属性来扩展Polymer的现有元素.
因此,使正常<button>
行为像a mega-button
一样简单,就像<button is="mega-button">
为它附加和编写组件一样简单.但事实证明,extend
多个元素是不可能的.所以类似的东西extends="foo bar"
不起作用.如果我想构建一个可以实际应用于不同元素的Web组件,该怎么办?
例如,我不想只扩展<button>
元素,mega-button
但也可能只是元素,<a>
以便它看起来像行为mega-button
?
mixin方法在这里并没有真正帮助(据我所知),因为它们不再为不同的Web组件提供共享逻辑.这意味着,您可以创建多个组件,并从mixin重用逻辑(打包在mixin中).
我需要的是一种创建一个可以应用于多个元素的Web组件的方法.
知道如何解决这个问题吗?
UPDATE
Addy回答了一些处理该用例的方法.这是基于一种方法的后续问题
如何在Polymer中注册我自己的元素时,如何找出要扩展的元素
另一个是否有可能在Polymer中分享Web组件(和导入)中的mixin?
更新2
我写了一篇文章,总结了我对聚合物遗传和组成的经验和学习:http://pascalprecht.github.io/2014/07/14/inheritance-and-composition-with-polymer/