是否可以在Polymer中跨Web组件(和导入)共享mixin? [英] Is it possible to share mixins across web components (and imports) in Polymer?

问题描述

作为如何使用Polymer扩展多个元素的后续操作和聚合物多重继承/组成，根据他们的回答，我想知道是否可以共享跨多个Web组件(和多个导入)的mixin以重复使用功能.

As a follow up to How to extend multiple elements with Polymer and Polymer multiple inheritence/composition, based on their answers, I wonder if it's possible to share mixins across multiple web components (and multiple imports) to reuse functionality.

Mixin似乎是跨多个自定义元素共享功能的唯一方法.但是，似乎您只能在一个导入中使用mixin.这意味着，如果您有一个mixin，它为Web组件提供了特定的功能(例如draggable)，如果不在同一导入中，则无法将其混合到Polymer元素的构造中.

Mixins seem to be the only way to share functionality across multiple custom elements. However, it seems like you can only use a mixin within one import. Which means, if you have a mixin, that gives a web component a specific functionality (let's say draggable), it's not possible to mix it into the construction of your Polymer element if it's not in the same import.

也许我在这里出了点问题，但如果不是，那感觉混合类的使用也不是很灵活，因为我仍然无法在Web组件之间共享功能.

Maybe I got something wrong there but if not, it feels like that the use of mixins isn't very flexible either, because I'm still not able to share functionality across web components.

更新:

正如Scott Miles在评论中指出的那样，有可能在多个导入中使用mixins.我只是不确定如何做到这一点，事实证明，这非常简单.

As Scott Miles pointed in his comments out, it is possible to use mixins in more than one import. I just wasn't sure how to do that and it turns out, that it's very straight forward.

比方说，我们有一个混合包，应该在多个组件之间共享，但是组件分布在许多导入上.所有要做的就是在window对象上的自己的导入中定义该mixin.例如:

Let's say we have a mixin that should be shared across multiple components, but components are distributed over many imports. All one has to do is to define that mixin in its own import on the window object. So for example:

shared.html

shared.html

<script>
  window.sharedMixin = {
    // shared functionality goes here
  };
</script>

然后，在另一个导入中的另一个组件中重用该mixin就像导入shared.html一样简单.

And then, reusing that mixin in another component in another import, is as simple as importing shared.html.

my-component.html

my-component.html

<link rel="import" href="path/to/shared.html">

从那时起，sharedMixin可以用作该导入中的全局对象:

From that point on, sharedMixin is available as global object within that import:

Polymer('my-component', Platform.mixin({
  // my-component logic
}, sharedMixin);

我希望对其他人有帮助.我会写一篇关于它的博客文章，并将其链接到这里.

I hope that helps others. I'll write a blog post about that and will link it here.

更新2

我在这里写了一篇博客文章: http://pascalprecht.github.io/2014/07/14/inheritance-and-composition-with-polymer/

I've written a blog post here: http://pascalprecht.github.io/2014/07/14/inheritance-and-composition-with-polymer/

推荐答案

行为功能.

示例:

my-behavior.html:

my-behavior.html:

<script>
  MyBehavior = {
    properties: {},
    listeners: [],
    _myPrivateMethod: function(){}
    // etc.
  };
</script>

my-element.html:

my-element.html:

<link rel="import" href="my-behavior.html">

<script>
  Polymer({
    is: 'my-element',
    behaviors: [MyBehavior]
  });
</script>

my-other-element.html:

my-other-element.html:

<link rel="import" href="my-behavior.html">

<script>
  Polymer({
    is: 'my-other-element',
    behaviors: [MyBehavior]
  });
</script>

这篇关于是否可以在Polymer中跨Web组件(和导入)共享mixin?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！