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

Question

作为如何使用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>

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

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

推荐使用类似全局的组件。
创建 a<name-you-like>并使用 get/set 来更改它（您也可以使用属性，尽管它们只是悲伤的字符串）。

从Polymer API 指南中，您将看到如下工作（好看）示例：

 <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 getter/setter 来玩它们，例如在上面提到的情况下看起来像

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

我会回来的。