含聚合物元素的助焊剂结构 [英] Flux architecture with polymer elements
问题描述
助焊剂体系结构在Web应用程序中正在发展，聚合物元件也在发展.
是否有使用助焊剂体系结构的聚合物应用实例?
我一直在考虑将Flux模式与(聚合物)Web组件一起使用.到目前为止，我已经提出了三种可能的解决方案，它们都与您的方式不同，所以这里是它们:
免责声明，我使用的是 Reflux 库，而不是Facebook的库. >
动作和元素存储
我的第一个尝试是将Flux模式制作为元素，以便需要访问存储并调用动作的任何视图都将其导入.
<dom-module id="a-view">
<template>
<my-actions id="actions"></my-actions>
<my-store model="{{model}}"></my-store>
<span>{{model.property}}</span>
<button on-click="executeAction"></button>
</template>
</dom-module>
<script>
Polymer({
is: 'a-view',
executeAction: function() {
this.$.actions.doSomething({});
}
});
</script>
<my-actions>和<my-store>只是封装了动作和存储.这种方法有一些缺点.首先，潜在地创建了许多非视觉元素，这可能会对性能产生不利影响.另外，如果这些元素应该是Polymer元素，则创建这些元素可能会很棘手，因为它们需要静态.有关完整示例，请参见此存储库
没有助焊剂的助焊剂
最近，我再次意识到什么是Web组件.使用WC，您的主要API是浏览器，即元素，属性和事件. Flux本质上是事件驱动的数据流.那么，为什么不使用自定义事件在自定义元素之间进行通信呢?这是我的昨天的小家伙
的摘录<template is="dom-bind">
<a-view clicks="[[clicks]]" id="one"></a-view>
<a-view clicks="[[clicks]]" id="two"></a-view>
<a-view clicks="[[clicks]]" id="three"></a-view>
<a-store click-history="{{clicks}}"></a-store>
</template>
<script>
Polymer({
is: 'a-view',
properties: { clicks: Object },
fireClick: function() {
// invoking action is simply firing an event
this.fire('a-view-click', {});
}
});
Polymer({
is: 'a-store',
attached: function(){
document.addEventListener('a-view-click', function(ev) {
// do work and update store here
}.bind(this));
}
});
</script>
这很好，因为它不以任何方式仅限于Polymer.可以使用本机API或其他库创建自定义元素，并且只需与充当您的调度程序的浏览器进行通信即可.当然，这并没有给您开箱即用的同步方式，而是一种简单，干净的方式，没有任何混乱.
正如您将在Plunker上看到的那样，通过数据绑定存储更新.另一种可能性是触发另一个事件，尽管我不确定哪个会更好，什么时候会发生
使用Polymer的行为
最后，我刚刚有了一个主意，该主意通过将行为/存储自定义元素替换为行为而得到了改进.尚无代码，但这是一个草图:
var MyActionsBehaviour = PolymerFlux.createActions({ /*...*/ });
var MyStore = PolymerFlux.createStore({ /*...*/ });
Polymer({
is: 'a-view',
behaviours: [ MyActionsBehaviour, MyStore ],
onClick: function() {
this.behaviourAction.invoke({});
}
}});
Polymer({
is: 'a-store',
behaviours: [ MyActionsBehaviour, MyStore ],
attached: function() {
this.behaviourAction.listen(function() {
// 1. do work
// 2. update views
});
}
}});
我将视图更新部分留为空白.它可能通过发出事件信号来发生，但是另一种可能性是触发另一个动作(Reflux具有嵌套动作).另外，我目前仍将PolymerFlux.createActions和PolymerFlux.createStore留给您发挥想象力；).确切的内部构造取决于您选择的Flux实现.
A flux architecture is trending in web applications and so is polymer elements.
Is there any example how to make a polymer application, which use flux architecture?
I've been thinking about using the Flux pattern with (Polymer) Web Components. Up to date I have come up with three possible solutions, all different from your way, so here they are:
DISCLAIMER I use Reflux library and not the Facebook's one.
Actions and Stores as elements
My first attempt was to make Flux pattern into elements so that any view, which need access to a store and invokes actions simply imports them.
<dom-module id="a-view">
<template>
<my-actions id="actions"></my-actions>
<my-store model="{{model}}"></my-store>
<span>{{model.property}}</span>
<button on-click="executeAction"></button>
</template>
</dom-module>
<script>
Polymer({
is: 'a-view',
executeAction: function() {
this.$.actions.doSomething({});
}
});
</script>
<my-actions> and <my-store> simply encapsulate actions and stores. There are some downsides to this method. First, potentially numerous non-visual elements are created, which can have detrimental effect on performance. Also creating those elements can be tricky if they should be Polymer elements, because they need static state. For a complete example see this repo
Flux without Flux
Recently I realized, again, what Web Components really are. With WC, your main API is the browser, namely elements, attributes and events. And Flux essentially is an event-driven data flow. So why not use Custom Events to communicate between custom elements? Here's an excerpt from my yesterday's plunk
<template is="dom-bind">
<a-view clicks="[[clicks]]" id="one"></a-view>
<a-view clicks="[[clicks]]" id="two"></a-view>
<a-view clicks="[[clicks]]" id="three"></a-view>
<a-store click-history="{{clicks}}"></a-store>
</template>
<script>
Polymer({
is: 'a-view',
properties: { clicks: Object },
fireClick: function() {
// invoking action is simply firing an event
this.fire('a-view-click', {});
}
});
Polymer({
is: 'a-store',
attached: function(){
document.addEventListener('a-view-click', function(ev) {
// do work and update store here
}.bind(this));
}
});
</script>
This is nice, because is not limited in any way to Polymer. Custom elements can be created with native API or other library and simply communicate with browser acting as your dispatcher. Of course this doesn't give you ways of synchronization out of the box, but is a simple and clean way without any clutter.
As you will see on Plunker, store updates by data-bindings. Another possibility is to fire off another event, though I'm not sure which would be better or when
Use Polymer's behaviors
Finally I've just had an idea, which improves upon the first, by replacing action/store custom elements by behaviors. There's no code yet, but here's a sketch:
var MyActionsBehaviour = PolymerFlux.createActions({ /*...*/ });
var MyStore = PolymerFlux.createStore({ /*...*/ });
Polymer({
is: 'a-view',
behaviours: [ MyActionsBehaviour, MyStore ],
onClick: function() {
this.behaviourAction.invoke({});
}
}});
Polymer({
is: 'a-store',
behaviours: [ MyActionsBehaviour, MyStore ],
attached: function() {
this.behaviourAction.listen(function() {
// 1. do work
// 2. update views
});
}
}});
I left the view updating part blank. It would likely take place by signalling an event but another possibility would be firing another action (Reflux has a nice concept of nested actions). Also I'm currently leaving the PolymerFlux.createActions and PolymerFlux.createStore for your imagination ;). The exact internals would ofc depend on the Flux implementation you choose.
这篇关于含聚合物元素的助焊剂结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
