#产业气象站#单页应用程序是如何打破网页设计的？全文共2297字

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

文章图片
“尝试一下Ember”他们说， “那会很有趣” 。
你知道万维网最初的设计理念吗？
利用超链接连接文档。
总体思路相当简单：网页浏览器从服务器请求一个文档，下载其内容并将其显示在屏幕上（通过CSS进行视觉增强）。
给定文档中的超链接指向另一个含新内容的文档，然后形成信息网。网页浏览器、爬虫程序、社交媒体和整个网络基础设施都围绕着这个简单的想法开展。
单页应用程序（SPAs）
单页应用程序是在JavaScript的帮助下，通过重写网页内容与用户进行交互的网络应用程序。与其说为每个用户交互加载一个全新的文档，不如说单页应用程序是从外部API下载必要的数据，通过减少加载时间来改善用户体验。这些应用程序对用户来说感觉更自然，因为其运作起来就如一个普通的桌面应用程序，而不是一个网站。
“单页应用程序”(singlepageapplication)一词在2002年最早出现。三年后， AJAX的引入为SPA的框架提供了基础，如Ember或Angular.每个框架都旨在解决一个明确定义的问题。当Angular的目标是那些已经熟悉HTML的网页设计师时， Ember则利用其“惯例优先原则”和2011年推出的ReactJS简化了样板代码，并采用基于组件的方法、代码重用和速度，脱离并阻断了网络
底层技术已经过时了

文章图片
来源：icourse163
React这样的框架使开发人员能够轻松地构建复杂的用户界面，但使用传统方法几乎不可能做到这一点。然而，运行浏览器的环境，在一定程度上是建立在静态网站的基础上的。
例如， URLs的概念对于基于文档的网站来说是有意义的，但是需要从SPA的角度重新考虑。 URLs通常是通过浏览器的历史API人工注入的；这看起来像是某种混合状态，而不是一个长期的解决方案。如果不谨慎处理，一些SPA会破坏浏览器中诸如前进和后退之类的简单功能，将导致不理想的用户体验。例如SPA的title元素这样最简单的事情，也需要使用JavaScript或服务器远端渲染方法进行特殊处理。
另一个问题是网络爬虫。谷歌已经采取了一些措施为单页应用程序编制索引，但谷歌员工JohnMueller表示仍有改进空间：
它并不总是完美的，当然了，也不容易。但是对一些网站来说，即便依赖于客户端渲染（只是JS ，没有服务器端渲染），还是可以良好运作。因人而异:)——JohnMueller
虽然Facebook创建了ReactJS ，但令人惊讶的是，他们的爬虫程序对于JavaScript的let和var的混合完全视而不见，平台上渲染SPA通常是不可见的（考虑到应用程序缺少服务器端呈现的代码）。
状态管理很棘手
采用单页方法通常是有益的，但是必须留心保留的应用程序状态带来的额外困难，而这在传统的无状态方法中是不存在的。以下场景虽然易于调试，但说明了此问题的最简形式：
·一个用户（Richard）访问了您刚刚制作的React单页应用程序，并且对您过去一个月的时间里挥汗如雨制作的快速标签切换控件感到非常惊讶。
·Richard切换到“注册”选项卡并且快速填写必要字段，成为该应用程序的荣誉会员
·作为会员， Richard现在可以看到两个额外的标签：Stories和ReadingList 。兴奋的Richard打开了Stories选项卡，并且迅速地将两个故事添加到了阅读列表中。
·然而，阅读别表中仍然显示0个故事，这使Richard感到困惑，于是他删除了自己的账户。