我相信这是大多数网站在考虑用户今天使用的设备数量以及每种设备的能力和局限性时应该采取的方向。
重要的:
在阅读本文的其余部分之前,请了解这个概念是建立在 Web 设计的基本原则的基础之上的。为了为所有设备和情况设计一个单页应用程序,它不能作为一个单页应用程序专门运行。您必须建立一个基础,以便在功能非常有限的最基本浏览器上工作,并根据用户设备的功能增强用户体验。
这可能会为您带来更多的工作,但您将能够满足更多和更多样化的受众,这比将专门为现代桌面或手机浏览器构建的 Web 应用程序放在一起更令人印象深刻。
减少加载时间和/或重量
单页应用程序更能减少页面的加载时间和从服务器到客户端的数据传输量。
此方法的一些影响最大的功能包括:
- 首次加载后存储任何全局功能,
- 允许更轻松的页面之间的数据传输和更复杂的用户界面
- 当您只需要特定组件时,无需在回发后加载整个页面的成本
过度复杂化的机会增加
这种设计方法可能会允许开发人员的懒惰和来自最终用户的更多干扰。作为开发人员,请确保您的 UI 完成了它的工作(获取、显示和提交到服务器)并且服务器完成了它的工作(提供、验证和提交到数据库)。大多数最终用户不会尝试使用 javascript 文件中的信息来破坏您的系统,但在我看来,包含有关您的数据结构的信息是自找麻烦。
从强大的架构开始!
与任何网页一样,数据处理可以直接移动到服务处理程序而不是页面,这可能导致使用以下层的架构:
- 数据库(数据存储)
- BL(数据处理和传输)
- 用户界面(数据显示和用户交互)
页面处理之上的服务
在我看来,使用服务几乎是网站中组织和调制代码的要求。向后兼容网站中使用的标准 get 和 post 方法也可以使用这些服务来访问代表业务对象而不是页面的服务。这允许您的代码在涉及相同对象的模块之间更通用。
然后,对单页应用程序的更新变得简单,因为您可以初始化任何 UI 以获取 get 或 post 方法并使用 AJAX 方法执行它们,而不是导致事件回发,因此是单页实例。
使用这些服务处理 UI 事件的一个副作用是,除了生命周期事件之外,您无需在代码隐藏文件中进行事件处理。生命周期事件对于处理和修改相关数据以根据情况显示以及修改返回的 html 以减轻用户设备上的负载很有用。
延迟加载!
任何复杂的网站都会带有复杂的模块和大量独特的组件。
您从使用单页应用程序中获得的一个好处是,您可以选择将加载时间推迟到 ajax 进程,并且只要您喜欢应用程序的任何部分(即第一次尝试使用模块,初始后的死区时间)就可以这样做页面加载等),使初始加载更快,处理时间更可控。
我的最佳实践清单
至于最佳实践..可以而且应该对打算使用此方法的设计进行很多优化,例如:
- 存储信息,当不再相关时删除
- 仅在需要时通过 ajax 加载脚本、html 和 js 文件
- 使用在另一个页面上加载的数据,而不是为每个新“页面”重新加载
- UI 的极简数据结构,因为它是一种显示而非处理的手段。
- 不要沉迷于 UI 上的验证,因为您的服务应该已经构建为验证提交给它的任何信息
这些优化有助于加载时间、数据处理和对象关联。显然这不是一个完整的列表,但它是构建单页应用程序的良好开端。
最后,我建议研究为一个网站设计的概念,以帮助建立一个坚实的基础。之后,剩下的就是比较简单的增强了。(提示:其中一项增强功能是捕获导致回发的所有操作,并使用这些信息来构建异步调用)。
有关于这方面的各种信息,以及各种要使用的库,但我建议尽可能使用您自己的代码来实现基本功能,并进入解决您的问题的库代码并进行一些研究,而不是试图用通用库代码实现一个复杂的系统。以他们的代码为例可能会为您的特定情况带来更小的开销和更强大的代码。
祝你好运!