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

单页应用程序 (SPA)已经到了我们面前。 还有很多新的东西,比如路由,客户端的页面生命周期,MVC模式,MVVM模式,MV *模式,以及一些Javascript模式,像AMD模式 , Singleton , Facade ,..

许多SPA框架和图书馆也被开发出来。 我们可以在互联网上find它的一些。 他们是AngularJs , Reactjs , BackboneJs , DurandalJs ,以及很多第三方组件,使得Javascript编码更加简单,就像RequireJs , Amplifyjs , BreezeJs …

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

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

所有的build议都欢迎。


我认为这是大多数网站在考虑用户使用的设备数量以及各自的能力和局限性时应该考虑的方向。


重要:

在阅读其余部分之前,请理解这个概念是build立在networkingdevise基本原理的基础上的。 为了为所有设备和情况devise单页面应用程序,它不能作为一个单独的页面应用程序来运行。 您必须build立一个基础,在最基本的function非常有限的浏览器上工作,并根据其设备的function提升用户体验。

这可能会为你带来更多的工作,但你将能够满足更大,更多样化的观众,这比将专门为现代桌面或手机浏览器构build的networking应用程序集中在一起更令人印象深刻。



减less加载时间和/或重量

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

这种方法中影响最大的特征包括:

  • 一旦第一次加载时,存储任何全局function,
  • 允许在页面和更复杂的用户界面之间更容易的数据传输
  • 当您只需要特定的组件时,消除回发后加载整个页面的成本

增加复杂的机会

这种devise方法可能会使开发人员感到懒惰,并使最终用户产生更多的干扰。 作为一名开发人员,请确保您的用户界面完成工作(获取,显示并提交到服务器),并确保服务器完成工作(提供,validation和提交到数据库)。 大多数最终用户不会尝试使用JavaScript文件中的信息来破坏您的系统,但包括您的数据结构的信息在我看来是要求麻烦的。

从一个强大的build筑开始!

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

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

服务在页面处理

在我看来, 使用服务对于网站中有组织和调制的代码来说是非常必要的。 向后兼容的网站中使用的标准获取和发布方法也可以使用这些服务来打击代表业务对象而不是页面的服务。 这允许你的代码在涉及同一个对象的模块之间更一般化。

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

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

延期加载!

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

使用单个页面应用程序所带来的好处是,您可以select将加载时间降低到ajax进程,并随时随地为应用程序的任何部分执行此操作(即首先尝试使用模块,在初始化页面加载等),使初始加载速度更快,处理时间更受控制。

我的最佳做法清单

至于最佳实践,对于打算使用这种方法的devise,可以并且应该做出相当多的优化,例如:

  • 存储信息,消除不再相关的时候
  • 只在需要的时候通过ajax加载脚本,html和js文件
  • 使用加载在另一个页面上的数据,而不是重新加载每个新的“页面”
  • 用户界面最简单的数据结构,因为它是一种显示和不处理的手段。
  • 不要在UI上进行validation,因为你的服务应该已经被构build来validation提交给它的任何信息

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

最后,我build议研究一个网页的devise概念,以帮助打下坚实的基础。 之后,剩下的就是比较简单的增强。 (提示:其中一个增强function是捕获所有导致回发的操作,并使用信息来构buildasynchronous调用)。

关于这方面的各种信息,以及各种types的库都可以使用, 但是我build议尽可能使用自己的代码获得 基本的function,进入解决问题的库代码,并进行一些研究,而不是试图用通用的库代码来实现一个复杂的系统。 使用他们的代码作为例子可能会导致更小的开销和更强大的代码为您的具体情况。

祝你好运!