是否有可能在Polymer中跨Web组件(和导入)共享混合?
作为如何基于他们的答案使用聚合物和聚合物多重继承/组合来扩展多个元素的后续,我想知道是否可以在多个Web组件(和多个导入)之间共享混合以重用功能。
Mixins似乎是跨多个自定义元素共享功能的唯一方式。 但是,似乎只能在一次导入中使用混入。 也就是说,如果你有一个mixin,它为web组件提供了一个特定的功能(比如draggable
),但如果它不在同一个导入中,就不可能将它混合到你的Polymer元素的构造中。
也许我在那里弄错了一些东西,但如果没有的话,感觉使用mixin也不是很灵活,因为我仍然无法在web组件之间共享功能。
更新:
正如斯科特·迈尔斯在他的评论出来指出,有可能在一个以上的进口使用混入。 我只是不知道该怎么做,事实证明,这是非常简单的。
假设我们有一个应该在多个组件之间共享的mixin,但组件分布在很多导入中。 所有人必须做的就是在window
对象上自定义该混入。 例如:
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/
建议使用类似全局的组件。
使一个<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 getters / 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>
我会回来的。
这现在由行为功能解决。
例:
我-behavior.html:
<script>
MyBehavior = {
properties: {},
listeners: [],
_myPrivateMethod: function(){}
// etc.
};
</script>
我-element.html:
<link rel="import" href="my-behavior.html">
<script>
Polymer({
is: 'my-element',
behaviors: [MyBehavior]
});
</script>
我 - 其他 - element.html:
<link rel="import" href="my-behavior.html">
<script>
Polymer({
is: 'my-other-element',
behaviors: [MyBehavior]
});
</script>
链接地址: http://www.djcxy.com/p/5327.html
上一篇: Is it possible to share mixins across web components (and imports) in Polymer?
下一篇: Commonly accepted best practices around code organization in JavaScript