全文共2297字，预计学习时长7分钟

来源：Pexels

“尝试一下Ember”他们说，“那会很有趣”。

你知道万维网最初的设计理念吗？

利用超链接连接文档。

总体思路相当简单：网页浏览器从服务器请求一个文档，下载其内容并将其显示在屏幕上（通过CSS进行视觉增强）。

给定文档中的超链接指向另一个含新内容的文档，然后形成信息网。网页浏览器、爬虫程序、社交媒体和整个网络基础设施都围绕着这个简单的想法开展。

单页应用程序（SPAs）

单页应用程序是在JavaScript的帮助下，通过重写网页内容与用户进行交互的网络应用程序。与其说为每个用户交互加载一个全新的文档，不如说单页应用程序是从外部API下载必要的数据，通过减少加载时间来改善用户体验。这些应用程序对用户来说感觉更自然，因为其运作起来就如一个普通的桌面应用程序，而不是一个网站。

“单页应用程序”(single page application)一词在2002年最早出现。三年后，AJAX的引入为SPA的框架提供了基础，如Ember或Angular. 每个框架都旨在解决一个明确定义的问题。当Angular的目标是那些已经熟悉HTML的网页设计师时，Ember则利用其“惯例优先原则”和2011年推出的ReactJS简化了样板代码，并采用基于组件的方法、代码重用和速度，脱离并阻断了网络

底层技术已经过时了

来源：icourse163

React这样的框架使开发人员能够轻松地构建复杂的用户界面，但使用传统方法几乎不可能做到这一点。然而，运行浏览器的环境，在一定程度上是建立在静态网站的基础上的。

例如，URLs的概念对于基于文档的网站来说是有意义的，但是需要从SPA的角度重新考虑。URLs通常是通过浏览器的历史API人工注入的；这看起来像是某种混合状态，而不是一个长期的解决方案。如果不谨慎处理，一些SPA会破坏浏览器中诸如前进和后退之类的简单功能，将导致不理想的用户体验。例如SPA的title元素这样最简单的事情，也需要使用JavaScript或服务器远端渲染方法进行特殊处理。

另一个问题是网络爬虫。谷歌已经采取了一些措施为单页应用程序编制索引，但谷歌员工John Mueller表示仍有改进空间：

它并不总是完美的，当然了，也不容易。但是对一些网站来说，即便依赖于客户端渲染（只是JS，没有服务器端渲染），还是可以良好运作。因人而异 :)——John Mueller

虽然 Facebook创建了ReactJS，但令人惊讶的是，他们的爬虫程序对于JavaScript的let和var的混合完全视而不见，平台上渲染SPA通常是不可见的（考虑到应用程序缺少服务器端呈现的代码）。

状态管理很棘手

采用单页方法通常是有益的，但是必须留心保留的应用程序状态带来的额外困难，而这在传统的无状态方法中是不存在的。以下场景虽然易于调试，但说明了此问题的最简形式：

· 一个用户（Richard）访问了您刚刚制作的React单页应用程序，并且对您过去一个月的时间里挥汗如雨制作的快速标签切换控件感到非常惊讶。

· Richard切换到“注册”选项卡并且快速填写必要字段，成为该应用程序的荣誉会员

· 作为会员，Richard现在可以看到两个额外的标签：Stories和Reading List。兴奋的Richard打开了Stories选项卡，并且迅速地将两个故事添加到了阅读列表中。

· 然而，阅读别表中仍然显示0个故事，这使Richard感到困惑，于是他删除了自己的账户。

在“过去”，实现技术方面可能涉及两个不同的文档：stories.php和reading-list.php。这两个都有一个明确定义的生命周期——Richard在浏览器中打开一个链接，程序运行几秒钟，并且用HTML源代码进行响应，甚至Facebook的爬虫程序也可以读取。

单页应用程序的环境中，通常只有一个程序——app.js，它在执行之前被转移到Richard的浏览器。然后，浏览器把逻辑操作转换为DOM元素。

对Richard来说，他所经历的问题是由于状态管理不当造成的。程序员更新了按钮的状态（现在显示为已添加到读取列表中），但忘记更新列表中的项目数。这个问题虽然很容易解决，但随着应用程序规模的增大，问题就会变得更加棘手。JavaScript社区并不是唯一一个需要处理状态管理的社区——大多数移动开发人员也熟悉这个问题。像Redux这样的工具在一定程度上会减少因为这个问题而导致的困扰，但往往会给项目引入样板文件和复杂性。

网页开发人员正从一个技术堆栈快速转移到另一个技术堆栈。与更传统的方法相比，单页应用程序在屏幕转换方面提供了出色的用户体验，因此正在成为一种趋势。

来源：Pexels

新的框架和库几乎每天都在发布，然而只是为了解决孤立的问题。真正的而进步是调整浏览器和万维网，使之更适合单页应用程序。

在这之前，人们只会对下一个“小题大做”的事件进行炒作。

留言 点赞 关注

我们一起分享AI学习与发展的干货
欢迎关注全平台AI垂类自媒体 “读芯术”

（添加小编微信：dxsxbb，加入读者圈，一起讨论最新鲜的人工智能科技哦～）

​单页应用程序是如何打破网页设计的？相关推荐

  1. jsp 构建单页应用_如何使用服务器端Blazor构建单页应用程序

    jsp 构建单页应用 介绍 (Introduction) In this article, we will create a Single Page Application (SPA) using s ...

  2. razor页面跳转_如何在Blazor中使用Razor页面创建单页应用程序

    razor页面跳转 In this article, we are going to create a Single Page Application (SPA) using Razor pages ...

  3. SPA （单页应用程序）

    单页Web应用 编辑 单页Web应用(single page web application,SPA),就是只有一张Web页面的应用.单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程 ...

  4. 低代码Web应用程序构造方法-ASP.NET Core 2.2单页应用程序（SPA）

    目录 介绍 网格记录在编辑/添加上的持久性 以下步骤用于创建单页应用程序(SPA) 在SQL Server Management Studio中创建数据库 打开Visual Studio社区2019 ...

  5. spa 搜索引擎_网站seo-SEO的单页应用程序（SPA）生存指南

    JavaScript库与JavaScript框架 解开SPA背后的技术最终将我们引向JavaScript库和框架的主题. 问一个开发人员"库和框架之间有什么区别",你会得到很多有趣 ...

  6. 如何在单页应用程序Angular 7中使用FastReport Core Web报表

    2019独角兽企业重金招聘Python工程师标准>>> 下载FastReport.Net最新版本 单页应用程序的概念正在寻找越来越多的支持者.最着名的单页框架之一是Angular,它 ...

  7. 淘宝客静态单页_单页应用程序的Spring Boot静态Web资源处理

    淘宝客静态单页 诸如gulp和grunt之类的Javascript构建工具确实让我大吃一惊,我看着这些工具的构建脚本之一,发现很难理解它,并且无法想象从头开始编写其中一个构建脚本. 这就是yeoman ...

  8. 单页应用程序的Spring Boot静态Web资源处理

    诸如gulp和grunt之类的Javascript构建工具确实让我大吃一惊,我看着这些工具的构建脚本之一,发现很难理解它,无法想象从头开始编写其中一个构建脚本. 这就是yeoman出现的地方,它是一种 ...

  9. 使用Vanilla.js构建单页应用程序（SPA）网站

    目录 项目 带有模块的组织代码 以可观察的方式应对变化 支持声明式数据绑定 将幻灯片(Slides)托管和加载为"页面" 使用路由器处理导航 带有CSS3动画的转换时间线 管理&q ...

  10. 带有Upida/Jeneva的ASP.NET MVC单页应用程序（前端/AngularJS）

    目录 介绍 背景 基本结构 JS控制器 HTML视图 查看容器 结论 参考 下载源3.4 MB 在Codeplex上下载最新版本和更多示例 参见工作示例 介绍 在上一篇文章中,我演示了如何使用WebA ...

最新文章

  1. PHP获取POST数据的几种方法汇总
  2. java栈 类 堆_详细介绍Java中的堆和栈
  3. Vue 中computed 与 methods 区别
  4. Spring Boot （八）MyBatis + Docker + MongoDB 4.x
  5. Java 并发（JUC 包-05）
  6. STS创建Spring Boot项目实战(Rest接口、数据库、用户认证、分布式Token JWT、Redis操作、日志和统一异常处理)
  7. Solving environment: failed conda all InvalidVersionSpecError: Invalid version spec: =2.7报错
  8. linux 0.11根文件系统,构建一个最小Linux根文件系统
  9. 新版gsp计算机系统全套资料,新版GSP对计算机系统的需求表
  10. 如何在 Unity Editor 中录制游戏界面
  11. 2021年终总结：鲜花怒马少年时，一日看尽长安花
  12. app上架苹果市场流程
  13. ios越狱，impactor无法使用的替代方案
  14. html布局直接填充,css实现自动填充布局
  15. H5移动端前置摄像头成像方向错误，横屏方向错误
  16. C语言作业——歌手比赛系统
  17. MATLAB小波变换图像处理简单示例
  18. 张五常经济学三大公理
  19. 000 高数预备知识
  20. 对人工智能未来发展的思考

热门文章

  1. Removing unused resources requires unused code shrinking to be turned on 解决
  2. 上升沿判断语句_股票上升趋势中回调买入技巧，强势股顺势横盘突破买入法
  3. 翟菜花：从风流到下流，杜蕾斯新文案为何被人口诛笔伐？
  4. [渝粤教育] 广东-国家-开放大学 21秋期末考试土木工程施工10516k1
  5. shell训练营日常打卡DAY1
  6. FPGA设计之门控时钟
  7. 分享: Vue微信浏览器ios音乐自动播放
  8. java sof栈泄露_java虚拟机(四)--内存溢出、内存泄漏、SOF
  9. chromeOS运行Steam Alpha版
  10. android缩放组件,Android可放大缩小的图片浏览缩放控件