基于组件的前端UI设计

Question

我们正在计划一个前端应用程序，您可以在这个阶段不断地添加/删除UI组件。您可以在适当的地方配置它们，并最终可以发布舞台(网页)。

1. 我们有一份零部件清单。对组件进行了分类。例如:标题、侧边栏。在库存中，它们将显示该类别中可用组件的预览(可能是图像)。

1. 一个项目可以从清单中添加到阶段(传统上是一个简单的网页)。这些阶段与库存类别有关。例如，在这个阶段，有一个“报头容器”，您可以在其中添加组件，仅用于报头库存。 每个类别都可能有自己的规则。例如，您不能在标题目录类别中的in“headers容器”(在stage/page中)中添加多个组件。但是，您可以在“侧栏容器”中添加任意数量的项。同样，每个组件都可能有自己的规则。每个组件可能呈现不同的并且可能有不同的配置选项。例如，您从具有徽标、背景图像的“报头目录”中添加一个标头组件。但另一个可能没有背景图像。除非组件有一个特性(例如背景图像)，否则它将无法在配置面板中使用。

1. 除在库存中预览外，上述所有组件都将始终工作。这意味着，一旦它们被添加到stage中，它们就是活动元素，就应该像在默认设置中那样工作(除非配置好)。他们将在后端服务中进行通信以获取/保存数据。

1. 持久化数据:我们还希望在(相同类型的)组件的切换中保存数据。例如，如果您在配置为拥有您的徽标的舞台上添加了一个标头组件，则切换到另一个标头组件(它也支持徽标)应该保留所选的旧徽标。

我也在想，如果我们能把每件事都做好，那就很好了。例如，徽标是一个组件，背景图像是一个组件。他们每个应该独立工作，使用自己的配置器( logo组件的文件上传按钮)、验证(检查logo组件的文件类型)等等。前面提到的每个标头组件都是由几个组件组成的容器，这些组件可以容纳任意数量的组件，并且可以作为这些组件之间的桥梁(例如将所有配置合并在同一个接口中，而不是单独合并)。

我现在的想法是：

1. Backbone.js
2. jQuery UI Widget工厂

但两者都需要大量的基本工作，在我们的结尾。是否有任何框架/库已经解决了我们正在试图解决的大部分问题或一些问题。我不确定基于Angular.js指令的解决方案在这里是否也很好。对此的任何建议都将受到高度赞赏。

Answer 1

如果我正确地理解了您，那么您希望构建一个类似于仪表板的功能。试着看一看sDashboard https://github.com/ModelN/sDashboard或商业选择，如https://github.com/ModelN/sDashboard http://www.droptiles.com/或剃须刀http://razorflow.com/。