4

在开发 Polymer Web App 时，我有一些最佳实践问题需要考虑。

假设我有一个 Todo 应用程序。主要元素my-main-task负责在这些元素之间切换：list所有任务、view单个任务、创建new任务、edit任务和delete任务。

我的问题是：元素必须使用or自己new保存数据或将其委托给?firebase-documentiron-ajaxmy-main-task

4

1 回答 1

4

在最近的 Polymer 峰会（London 2016）中，有很多关于惰性的讨论（如在惰性加载中）。这意味着，您只加载/渲染您需要的内容，（在最好的情况下）没有其他内容。

这就是说，对您的问题的简短回答是：new元素应该自己保存数据，因为它是最合适的地方。

至于长答案，请耐心等待。

在Google Developer 的 Web Fundamentals页面上，实际上有一个名为The App Shell Model的架构模式。此模式实际上描述了您的my-main-task元素。

一些有用的引用：

应用程序“shell”是驱动用户界面所需的最小 HTML、CSS 和 JavaScript /.../

/.../ 通常，您的应用程序应尽可能加载最简单的 shell，但在初始下载时包含足够有意义的页面内容。

话虽如此，将保存新项目的逻辑放入应用程序外壳元素（在您的情况下为my-main-task元素）是不明智的。

更进一步，让我们看一下 Polymer 的示例Shop 应用程序（Github 存储库， 在线演示）。

如果您查看“app shell”元素shop-app（源代码），您会发现它只实现了以下内容：

  • 基本页面布局（侧边栏、内容）
  • 路由
  • 购物车数据
  • 购物车逻辑

在这种特殊情况下，购物车数据和逻辑被放入 shell 元素，因为它在所有页面中使用，但除此之外没有其他业务逻辑在那里实现。

至于你的问题的长答案，让我们看一下Checkout页面，即shop-checkout元素（源代码）。您可以看到，所有与表单相关的数据（即发布到服务器）都在此元素内完成，并且没有任何内容委托给 app shell 元素。

另一个例子是shop-list元素（源代码）。同样，您可以看到此元素自行检索数据，并且仅与应用程序外壳元素交互以更改该部分。

最后，让我们举一个同样包含在上述 Shop 应用程序中的良好做法，即数据在应用程序内流动的方式。Polymer 峰会（Youtube 视频）对此进行了一次有趣的讨论，其本质如下：尽可能使用单向数据绑定，除非确实必要，否则尽量避免双向数据绑定。为此，向下的数据流（父到子）应该作为单向数据绑定来完成，而向上的数据流（子到父）应该作为事件来完成。这对于元素的可重用性至关重要，因为元素之间的耦合要低得多。

于 2016-10-29T18:25:20.823 回答