javascript - 为什么我们需要单页应用程序？

Question

很难说出这里问的是什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或言辞激烈，无法以目前的形式合理回答。如需帮助澄清此问题以便可以重新打开，visit the help center .




8年前关闭。




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

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

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

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

欢迎提出所有建议。

Answer 1

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

重要提示:

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

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



减少加载时间和/或重量

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

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

第一次加载后存储任何全局功能，

允许更轻松的页面之间的数据传输和更复杂的用户界面

当您只需要特定组件时，无需在回发后加载整个页面的成本

增加过度复杂化的机会

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

从强大的架构开始!

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

数据库(数据存储)

BL(数据处理和传输)

用户界面(数据显示和用户交互)

页面处理服务

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

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

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

延迟加载!

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

使用单页应用程序的一个好处是，您可以选择将加载时间推迟到 ajax 进程，并在您喜欢应用程序的任何部分时这样做(即第一次尝试使用模块，初始化后的死时间)页面加载等)，使初始加载更快，处理时间更可控。

我的最佳实践 list

至于最佳实践......有很多优化可以而且应该对打算使用这种方法的设计进行，例如:

存储信息，当不再相关时删除

仅在需要时才通过 ajax 加载脚本、html 和 js 文件

使用加载到另一个页面上的数据(如果可以)而不是为每个新“页面”重新加载

UI 的极简数据结构，因为它是一种显示方式而不是处理方式。

不要痴迷于 UI 上的验证，因为您的服务应该已经构建为验证提交给它的任何信息

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

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

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

祝你好运!