polymer - 具有 polymer 元素的通量结构

Question

通量架构在 Web 应用程序中很流行， polymer 元素也是如此。

是否有任何示例如何制作使用助焊剂架构的 polymer 应用程序？

Answer 1

我一直在考虑将 Flux 模式与( polymer )Web 组件一起使用。到目前为止，我提出了三种可能的解决方案，它们都与您的方式不同，所以它们是:

免责声明 我使用 Reflux图书馆，而不是 Facebook 的图书馆。

---

作为元素的操作和存储

我的第一个尝试是将 Flux 模式制作成元素，这样任何需要访问存储和调用操作的 View 都可以简单地导入它们。

<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>简单地封装 Action 和存储。这种方法有一些缺点。首先，可能会创建大量非视觉元素，这会对性能产生不利影响。如果它们应该是 Polymer 元素，那么创建这些元素可能会很棘手，因为它们需要静态。有关完整示例，请参阅 this repo

---

无助焊剂

最近我再次意识到 Web 组件到底是什么。使用 WC，您的主要 API 是浏览器，即元素、属性和事件。而Flux本质上是一个事件驱动的数据流。那么为什么不使用 Custom Events在自定义元素之间进行通信？这是我的 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>

这很好，因为不以任何方式限制为 Polymer。可以使用 native API 或其他库创建自定义元素，并简单地与充当调度程序的浏览器进行通信。当然，这并没有为您提供开箱即用的同步方式，而是一种简单明了的方式，没有任何困惑。

正如您将在 Plunker 上看到的那样，通过数据绑定(bind)存储更新。另一种可能性是触发另一个事件，但我不确定哪个会更好或何时

---

使用 Polymer 的行为

最后我有了一个想法，通过用行为替换 Action /存储自定义元素来改进第一个想法。目前还没有代码，但这里有一个草图:

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
    });
  }
}});

我将 View 更新部分留空。它可能会通过发出事件信号来发生，但另一种可能性是触发另一个 Action (Reflux 有一个很好的概念 nested actions )。另外我现在要离开 PolymerFlux.createActions和 PolymerFlux.createStore为了你的想象力;)。确切的内部结构取决于您选择的 Flux 实现。