在开发 Polymer Web App 时,我有需要遵守的最佳实践问题。
假设我有一个 Todo 应用程序。主要元素 my-main-task
负责在这些元素之间切换:列出
所有任务、查看
单个任务、创建 >新建
任务、编辑
任务和删除
任务。
我的问题是:new
元素必须单独使用firebase-document
或iron-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 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)完成,而向上数据流(子级到父级)应为作为一个事件完成。这对于元素的可重用性至关重要,因为元素之间的耦合要低得多。
关于web - polymer 应用最佳实践,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40318594/