为什么我们需要单页应用程序？ [关闭]答案

【问题标题】：Why do we need a Single Page Application? [closed]为什么我们需要单页应用程序？ [关闭]
【发布时间】：2013-05-14 13:58:49
【问题描述】：

Single Page Application (SPA) 来找我们了。很多新东西也随之而来，比如路由、客户端页面生命周期、MVC 模式、MVVM 模式、MV* 模式……还有一些 Javascript 模式也来到了我们身边，比如AMD pattern、@987654323 @, Facade,..

还开发了许多 SPA 框架和库。我们可以在互联网上找到其中的一些。它们是AngularJs、Reactjs、BackboneJs、DurandalJs、.. 以及许多第三方组件，使 Javascript 编码更容易，如RequireJs、Amplifyjs、BreezeJs...

但我只是想为什么我们需要 SPA？因为它被视为在开发 Web 应用程序时引入了一些新的复杂事物。尽管有 SPA，我们可以使用传统的 web 应用程序，每次请求每个加载页面。我只是看到了一个好处，比如我们可以轻松地在移动设备上运行它并适应新的 Web 应用程序开发趋势。有人可以更清楚地解释一下吗？

还有一件事，如果我们使用大量第三方组件来组成一个 SPA。那么它是否使这个 Web 应用程序保持一致？我认为它应该为在我们的 Web 应用程序中维护一个巨大的组件而变得复杂。你怎么看？

欢迎所有建议。

【问题讨论】：

您能考虑缩小您的问题范围吗？你在这里问了几个问题，其中大部分是相当主观的。因此，您的问题可能会被关闭。如果您有具体问题可以客观回答，请将此问题编辑下来表达出来。
“白屏，滚动到顶部，在移动收音机上等待 5 秒”是一种失败的体验。你失去了思想份额、销售量，并浪费了你试图打动的人的时间。现在的网站很复杂，SPA 不需要重新解释 css、字体等。拥有重试逻辑也不错。
很多 SPA 框架...我会说它是主要的一个 - AngularJs，所有其他的结合起来比单个 AngularJs 占据更少的市场份额。如果你想学习 SPA 尤其是 AngularJS，请查看this tutorial。

标签： javascript design-patterns reactjs single-page-application amd

【解决方案1】：

我认为，考虑到用户今天使用的设备数量以及每种设备的能力和局限性，这是大多数网站应该朝着这个方向发展的方向。

重要提示：

在阅读其余内容之前，请了解此概念是建立在网络设计基本原则的基础之上的。为了为所有设备和情况设计一个单页应用程序，它不能作为一个单页应用程序专门运行。您必须建立一个能够在功能非常有限的最基本浏览器上工作的基础，并根据用户设备的功能增强用户体验。

这可能会为您带来更多的工作，但您将能够满足更多和更多样化的受众，这比将专门为现代桌面或手机浏览器构建的 Web 应用程序放在一起更令人印象深刻。

减少加载时间和/或重量

单页应用程序更能减少页面的加载时间和从服务器到客户端的数据传输量。

此方法影响最大的一些功能包括：

第一次加载后存储任何全局功能，
允许更轻松的页面之间的数据传输和更复杂的用户界面
当您只需要特定组件时，无需在回发后加载整个页面的成本

过度复杂化的机会增加

这种设计方法可能会导致开发人员的懒惰和来自最终用户的更多干扰。作为开发人员，请确保您的 UI 能够完成其工作（获取、显示和提交到服务器），并且服务器完成它的工作（提供、验证和提交到数据库）。大多数最终用户不会尝试使用 javascript 文件中的信息来破坏您的系统，但在我看来，包含有关您的数据结构的信息是自找麻烦。

从强大的架构开始！

与任何网页一样，数据处理可以直接移至服务处理程序而不是页面，这可能会导致架构利用以下层：

数据库（数据存储）
BL（数据处理和传输）
用户界面（数据显示和用户交互）

页面处理服务

在我看来使用服务几乎是网站中组织和调制代码的要求。向后兼容网站中使用的标准 get 和 post 方法也可以使用这些服务来访问代表业务对象而不是页面的服务。 这允许您的代码在涉及相同对象的模块之间更通用。

对单页应用程序的更新变得简单，因为您可以初始化任何 UI 以获取 get 或 post 方法并使用 AJAX 方法执行它们，而不是导致事件回发，因此是单页实例。

使用这些服务来处理 UI 事件的一个副作用是，除了生命周期事件之外，您无需在代码隐藏文件中处理事件。生命周期事件对于处理和修改相关数据以根据情况显示以及修改返回的 html 以减轻用户设备上的负载很有用。

延迟加载！

任何复杂的网站都会带有复杂的模块和大量独特的组件。

您从使用单页应用程序中获得的一个好处是，您可以选择将加载时间推迟到 ajax 进程，并在您喜欢应用程序的任何部分时执行此操作（即第一次尝试使用模块，死机）初始页面加载后的时间等），使初始加载更快，处理时间更可控。

我的最佳实践列表

至于最佳实践。相当多可以并且应该对打算使用这种方法的设计进行优化，例如：

及时存储信息，在不再相关时删除
仅在需要时通过 ajax 加载脚本、html 和 js 文件
如果可以的话，在另一个页面上使用加载的数据，而不是为每个新“页面”重新加载
UI 的极简数据结构，因为它是一种用于显示而不是用于处理的方法。
不要沉迷于 UI 上的验证，因为您的服务应该已经构建为验证提交给它的任何信息

这些优化有助于加载时间、数据处理和对象关联。显然，这不是一个完整的列表，但它是构建单页应用程序的良好开端。

最后，我建议研究一下为一个网站设计的概念，以帮助打下坚实的基础。之后，剩下的就是比较简单的增强了。（提示：其中一项增强功能是捕获导致回发的所有操作，并使用这些信息来构建异步调用）。

这方面有各种各样的信息，还有各种各样的库可供使用，但我建议尽可能使用您自己的代码来实现基本功能并进入解决您的问题并进行一些研究的库代码，而不是尝试使用通用库代码实现复杂的系统。以他们的代码为例，可能会为您的特定情况带来更小的开销和更强大的代码。

祝你好运！

【讨论】：

Loadtime：听说过5G和4G吗？浪费数周时间优化加载时间可能根本没有回报。听说过http 2吗？ generic service：应该总是这样。唯一的区别是SPA来回发送json。但最终你必须使用 js 框架来呈现你的页面。这就是通用的。但是：需要付费的页面渲染是由客户端完成的。服务器上的计算成本更低。像这样具有巨大流量的重量级应用程序更便宜。这是肯定的。
我同意这些陈述。如果您有任何 cmets 可以改进这个答案，超出我根据我的经验所展示的内容，我将不胜感激。就我个人而言，我对 4G 或 5G 的了解还不够，无法进一步增加，我也没有足够的优化经验来增加这种效果。
@Toskan：这不是绝对的。 CPU 的速度、计算机 RAM 和网络速度一直在快速增长。也许每隔几年就会翻一番，但人类对计算机施加的计算负载也在同步增长。在谈论可用的并发硬件时，单页应用程序仍然会有所作为并提供更好的用户体验。总体而言，在 MVC 架构中，随着浏览器越来越成熟，客户端机器越来越快，更多的任务正在转移到客户端。
@gm2008 请引用说明单页应用程序提供更好的用户体验的参考资料。恕我直言，用户甚至不会意识到差异。 ux.stackexchange.com/questions/61013/…
gmail 可能就是一个很好的例子。你开始写一封电子邮件，例如你点击compose然后你开始写作。在文本正文中输入文本。现在点击sent emails 或类似链接。加载页面时，单击返回文本内的文本正文。您将意识到加载仅发生在收件箱中，但不会影响撰写电子邮件部分。这种行为可能是 SPA 可以得分的地方。