web - polymer 应用最佳实践

标签 web polymer polymer-1.0 web-component polymerfire

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

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

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

最佳答案

在最近的 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 repoOnline 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)完成,而向上数据流(子级到父级)应为作为一个事件完成。这对于元素的可重用性至关重要,因为元素之间的耦合要低得多。

关于web - polymer 应用最佳实践,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40318594/

相关文章:

Polymer CLI 构建内存不足

css - CSS 选择器中的/deep/and::shadow 是什么意思?

css - 减少 Polymer 的 paper-icon-item 中图标和文本之间的空间

polymer-1.0 - Polymer 1.0 dom-repeat 的问题

c++ - 为 Qt 应用程序提供 Web 用户界面的最佳方式?

grails - Grials:图片标签?

javascript - 通过重复创建 polymer 滑动页面

javascript - Polymer - 通过纸张复选框显示/隐藏 div

ios - 相当于 Safari 的 googlechrome ://myurl. com

javascript - 如何修改 Google map URL 以显示一组标记位置?