web - polymer 应用最佳实践

Question

在开发 Polymer Web App 时，我有需要遵守的最佳实践问题。

假设我有一个 Todo 应用程序。主要元素 my-main-task 负责在这些元素之间切换:列出所有任务、查看单个任务、创建 >新建任务、编辑任务和删除任务。

我的问题是:new元素必须单独使用firebase-document或iron-ajax保存数据，或者将其委托(delegate)给我的主任务？

Answer 1

在最近的 polymer 峰会(2016 年伦敦)上，有很多关于“惰性”(如延迟加载)的讨论。这意味着，您只加载/渲染您需要的内容，(在最好的情况下)没有其他内容。

这就是说，您的问题的简短答案是: new 元素应该自行保存数据，因为它是最合适的位置。

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

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

一些有用的引言:

The app "shell" is the minimal HTML, CSS and JavaScript required to power the user interface /.../

/.../ In general, your app should load the simplest shell possible but include enough meaningful page content with the initial download.

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

为了更进一步，让我们看一下 polymer 的样本 Shop app ( Github repo ， Online demo )。

如果您查看“app shell”元素 shop-app ( source code )，您可以看到它仅实现以下内容:

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

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

对于您的问题的长篇回答，让我们看一下结账页面，即 shop-checkout 元素 ( source code )。您可以看到，所有与表单相关的数据(即发布到服务器)都是在此元素内完成的，并且没有将任何内容委托(delegate)给应用程序 shell 元素。

另一个示例是 shop-list 元素 ( source code )。同样，您可以看到该元素自行检索数据，并且仅与应用程序 shell 元素交互以更改该部分。

最后，让我们举出上述 Shop 应用中也包含的另一个良好实践，即数据在应用内流动的方式。 polymer 峰会( Youtube video )对此有过一次有趣的演讲，其实质如下:尽可能使用单向数据绑定(bind)，除非确实必要，否则尽量避免双向数据绑定(bind)。为了实现这一点，向下数据流(父级到子级)应作为单向数据绑定(bind)完成，而向上数据流(子级到父级)应为作为一个事件完成。这对于元素的可重用性至关重要，因为元素之间的耦合要低得多。