Question

作为How to extend multiple elements with Polymer和Polymer multiple inheritence/composition的后续内容，根据他们的回答，我想知道是否可以跨多个Web组件（以及多个导入）共享mixin以重用功能。

Mixins似乎是在多个自定义元素之间共享功能的唯一方式。但是，您似乎只能在一次导入中使用mixin。这意味着，如果你有一个mixin，它给web组件一个特定的功能（假设draggable），如果它不在同一个导入中，就不可能将它混合到Polymer元素的构造中。

也许我在那里遇到了问题，但如果没有，感觉mixins的使用也不是很灵活，因为我仍然无法在网络组件之间共享功能。

更新

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

假设我们有一个mixin应该在多个组件之间共享，但组件分布在许多导入上。所有人要做的就是在window对象的自己的导入中定义mixin。例如：

shared.html

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

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

MY-component.html

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

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

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

我希望能帮助别人。我会写一篇关于它的博客文章，并将它链接到这里。

更新2

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

Answer 1

建议使用类似全局的组件。
创建一个<name-you-like>并使用get / set来更改它（也可以使用属性，尽管它们只是 ~~sad~~ 字符串）。

来自Polymer API guide的

您会看到这样的工作（好看）示例：

 <polymer-element name="app-globals">
  <script>
  (function() {
    // these variables are shared by all instances of app-globals
    var firstName = 'John';
    var lastName = 'Smith';

    Polymer({
       ready: function() {
         // copy global values into instance properties
         this.firstName = firstName;
         this.lastName = lastName;
       }
    });
  })();
  </script>
</polymer-element>

和他们一起使用javascript es5 getters / setters如上面提到的情况看起来像是

 <polymer-element name="app-globals">
  <script>
  (function() {
    // these variables are shared by all instances of app-globals
    var firstName = 'Arnold';
    var lastName = 'Schwarzenegger';

    Polymer({
       ready: function() {
         // copy global values into instance properties
         this.firstName = firstName;
         this.lastName = lastName;
       },
       get fullTerminatorName() {
         return this.firstName + ' ' + this.lastName;
       }
    });
  })();
  </script>
</polymer-element>

I'll be back.

Answer 2

现在Behaviors功能解决了这个问题。

示例：

MY-behavior.html：

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

MY-element.html：

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

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

MY-另一element.html：

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

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

是否可以在Polymer中跨Web组件（和导入）共享mixin？

2 个答案: