为什么我们需要单页应用程序?

时间:2013-05-20 03:44:26

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

Single Page Application(SPA)来找我们。它也带来了许多新的东西,比如路由,客户端的页面生命周期,MVC模式,MVVM模式,MV *模式......以及一些Javascript模式也像AMD pattern一样来到我们这里, SingletonFacade,..

还开发了许多SPA框架和库。我们可以在互联网上找到它的一些。它们是AngularJsReactjsBackboneJsDurandalJs,以及许多第三方组件,使Javascript编码更加轻松,如RequireJs,{ {3}},Amplifyjs ...

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

还有一件事,如果我们使用大量第三方组件来组合一个SPA。那么它是否为这个Web应用程序提供了一致性?我认为它应该是一个复杂的维护我们的Web应用程序内的巨大组件。你怎么看待这个?

欢迎所有建议。

1 个答案:

答案 0 :(得分:39)


我认为,考虑到当前用户使用的设备数量以及每种设备的能力和限制,这是大多数网站应该采用的方向。


重要提示:

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

这可能会为您带来更多的工作,但您将能够满足更大,更多样化的受众群体,这比投入专为现代桌面或手机浏览器专门构建的网络应用程序更令人印象深刻。< /强>



减少加载时间和/或重量

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

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

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

过度复杂的可能性增加

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

从强大的架构开始!

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

  • 数据库(数据存储)
  • BL(数据处理和传输)
  • 用户界面(数据显示和用户交互)

页面处理服务

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

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

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

延期加载!

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

使用单页应用程序可以获得的好处是,您可以选择将加载时间减少到ajax进程,并且只要您愿意为应用程序的任何部分(即首次尝试使用模块,初始页面加载后的时间等),使初始加载更快,处理时间更受控制。

我的最佳实践列表

至于最佳实践..对于打算使用此方法的设计,可以并且应该进行相当多的优化,例如:

  • 存储信息,在不再相关时删除
  • 仅在需要时通过ajax加载脚本,html和js文件
  • 使用在另一页上加载的数据,如果它可以而不是为每个新的&#34;页面重新加载&#34;
  • UI的极简主义数据结构,因为它是一种显示而非处理的手段。
  • 不要在用户界面上进行验证,因为您的服务应该已经构建,以验证提交给它的任何信息

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

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

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

祝你好运!