User:恒温/单页面应用
单页应用程序 (SPA)是一种 网页应用程序 或 网站 ，适合于单个 网页， 目的是提供一个和桌面应用程序相似的用户体验。 在一个单页面应用中，无论是所需要的代码是HTML、 JavaScript还是CSS都在一次页面加载中获取，[1] 或者通常根据用户动作动态加载有关的资源并按需要加入到网页中。 尽管 位置的哈希 或 HTML5 历史API 可用于在应用中提供独立逻辑页的感性和导航，网页在这个过程中不会重新加载，也不控制跳转到另一个网页。[2] 和单页面应用交互通常会涉及到和网络服务器动态通信。
历史
[编辑]虽然早在2003年就被讨论过了，但是单页面应用的起源还是不太清楚. [3] Stuart (stunix) Morris于2002年4月写了具有同样的目标和功能的独立网站slashdotslash.com。[4] 同年晚些时候Lucas Birdeau, Kevin Hakman, Michael Peachey和Evan Yeh在美国专利8,136,109中描述了单页面应用的实现。 [3]
JavaScript可以用于在网络浏览器中显示用户接口 (UI)，运行应用逻辑，以及和网络服务器进行通信。有成熟的开源库可以用来建立一个SPA，这样可以减少开发人员不得不编写的JavaScript代码量。
技术实现
[编辑]即使应用需要和服务器进行通信，还是有各种技术可用于让浏览器保持单页面。
JavaScript框架
[编辑]诸如 AngularJS Ember.js, Meteor.js，ExtJS 和 React 这些网络浏览器JavaScript框架都已经采纳了SPA原则。
- AngularJS 是一个纯粹的客户端框架。 AngularJS的模板是基于双向 UI数据绑定的。 数据绑定是一种让模型变化时更新视图，和在视图变化时更新模型的自动实现的方式。 HTML模板在浏览器中被编译。 编译的阶段创建纯粹的HTML代码，然后浏览把这段HTML代码重新渲染到即时视图中去。这个步骤在后面的页面展现中重复进行。 在传统的服务器端HTML编程的中，如控制器和模型这样的概念和服务器进程进行交互来生成新的HMTL视图。 在AngularJS框架中，控制器和模型状态在客户端浏览器中被维护。 因此，新网页都能够在不和服务器交互的情况下产生。
- Ember.js 是一个基于模型-视图-控制器（MVC)软件架构模式的客户端JavaScript网络应用框架。 它把常用语言的优点和最佳实践融入到一个提供丰富的对象模型，陈述式双向数据绑定，计算属性，由Handlebars.js提供支持自动更新的模板和管理应用状态的路由等特性的框架中，让开发者能够创建可扩展的单页应用。
- Meteor.js 是专为SPAs设计的全栈(客户端-服务器)JavaScript框架。 它具有更简单的数据结合的角度，屑或ReactJS,引用错误：
<ref>标签中未填内容的引用必须填写name属性 ，并使用 分布式数据协议引用错误：<ref>标签中未填内容的引用必须填写name属性 并 发布订阅的图案 自动传播数据的变化向客户实时不需要开发人员来编写任何同步码。 全面反应堆确保所有层，从数据库的模板，更新时，自动必要的。 生态系统的软件包，例如 服务器的端呈现引用错误：<ref>标签中未填内容的引用必须填写name属性 地址问题的搜索引擎优化。 - Aurelia 是一个JavaScript客户框架，用于移动设备、桌面和网络。 它是相似的人们的生活产生了重要，但是新的，更多符合标准，并使用了一种模块办法。 Aurelia是写下一代 写的。
Ajax
[编辑]最突出的技术目前正在使用的 Ajax的。引用错误：<ref>标签中未填内容的引用必须填写name属性 主要使用的 程序/件的对象(deprecated)目从JavaScript其他阿贾克斯的方法包括使用框架或脚本HTML要素。 受欢迎的图书馆等 jQuery，其正常化，Ajax行为跨浏览器从不同的制造商，进一步推广阿贾克斯的技术。
Web sockets
[编辑]Web sockets 是一个双向状态的实时客户机-服务器通信技术部分5的规范，优于阿贾克斯在性能方面的引用错误：<ref>标签中未填内容的引用必须填写name属性 和简单性。
服务器发送活动
[编辑]服务器发送事件 (小规模企业是由这类企业的种种)是一个技术服务器，从而可以启动数据传输的浏览器的客户。 一旦最初的连接已经建立，一个事件流仍然开放，直至关闭。 小规模企业是由这类企业的种种发送了传统的HTTP和具有多种功能，这web sockets缺乏设计的诸如自动重新连接、事件标识，以及能够发送任意的事件。引用错误：<ref>标签中未填内容的引用必须填写name属性
浏览器的插件
[编辑]虽然这种方法已经过时，步调用服务器也可以是取得使用浏览器插在技术，例如 Silverlight, 闪光，或 Java小的。
数据传输(XML，JSON和阿贾克斯)
[编辑]请求到服务通常导致原始数据(例如， XML 或 JSON)，或者新 HTML 正在返回。 在该情况下HTML是返回的服务器，JavaScript在客户更新的一部分区域DOM(文件的对象模型).引用错误：<ref>标签中未填内容的引用必须填写name属性 时，原始数据是返回的，往往是一个端-端JavaScript XML /(XSL)的处理(在这种情况下象一个 模板)用于翻译的原始数据转HTML，然后将使用更新的一部分区域DOM。
服务器架构
[编辑]轻型服务器架构
[编辑]一个SPA移动的逻辑，从服务的客户。 这个结果中的作用的网络服务器不断演变成一个纯粹的数据API或网络服务。 这个建筑转变，在某些圈子，已经创造了"薄服务器架构"来突出这一复杂性已经从服务器向客户、与参数，这最终降低了整个系统的复杂性。
重型有状态服务器架构
[编辑]服务器保存在必要状态的存在的客户国家的网页。 在这种方式，当时的任何请求命的服务器(通常用户的行动)、服务器发送的适当HTML和/或JavaScript的具体变化带来的客户的新希望的国家(常常增加或删除/更新的一部分客户DOM)。 在同一时间，国家在服务器更新。 大多数的逻辑是执行在服务器上，并HTML通常也呈现在服务器上。 在某些方面，服务器模拟网络浏览器，收活动并执行三角洲的变化服务器的国家都自动传播客户。
这种方法需要更多的服务器的存储器和服务器的处理，但其优点是简化的发展模式，因为a)应用程序通常是完全编码的服务器，并b)数据和用户界面的国家在服务器共用相同的存储空间无需定制的客户/服务器的沟通桥梁。
重型无状态服务器架构
[编辑]这是一个变种状态服务器的方法。 客户页发送数据表示其目前状态的服务器，通常是通过阿贾克斯的请求。 使用这个数据、服务器能够重建客户国家的一部分网页需要加以修改和可以生成必要的数据或代码(例如，允许或JavaScript)，这是向客户返回来把它带到一个新的国家，通常修改页面DOM树根据客户的行动，其动机的请求。
这种方法要求更多的数据被发送给服务可能需要更多的计算资源每请求的部分或完全重建客户页的国家在服务器中。 同时，这种做法更易于扩展，因为没有按客户的页面数据保存在服务器，因此，阿贾克斯可以将请求分派给不同的服务器节点，不需要会议的数据共享或服务器的亲和力。
本地运行
[编辑]一些水疗中心的执行可以从一个地方文件中使用的 文件URI方案中。 这使用户能够下载的SPA从一个服务器和运行该文件从一个地方的存储装置，而不取决于服务器的连接性。 如果这样一个SPA要存储和更新数据，它必须使用基于浏览器的 网络存在。 这些应用程序从中受益的进步提供与 HTML5的。[4]
单页面应用模型的挑战
[编辑]因为水疗中心是一个演进，远离国籍页重新模式，浏览器最初是专为，一些新的挑战已经出现。 每个这些问题有一个有效的解决方案[5] ：
搜索引擎优化
[编辑]因为缺乏JavaScript执行上爬虫一些受欢迎的 网络搜索引擎,[10] SEO(优化搜索引擎)在历史上提出的一个问题，面向公众的网站希望采用SPA模型。[11]
从2009年至2015年， 谷歌网站管理员中 提出并建议一个"阿贾克斯爬方案"[12][13] 使用的一个初始感叹号中段标识符为有状态的 AJAX 页(#!). 特别的行为必须实现的水疗站点，以允许提取的相关元数据搜索引擎的履带。 搜索引擎，不支持这个网址散方案，散列网址上的温泉仍然是看不见的。 这些"散列爆炸"Uri已被认为有问题的一些作家包括杰尼分享至朋友圈地W3C的，因为它们使页面访问那些没有 JavaScript 活在他们的浏览器。 他们还破 HTTP referer 的标题，如浏览器是不允许发送的片段标识在Referer头。[14] 在2015年，谷歌弃他们的散列的爆炸的AJAX爬行的建议。[15]
或者，应用可能呈现的第一页服务器的负载和随后的网页的更新客户。 这个传统上是困难的，因为呈现代码，可能需要写在一个不同的语言或框架的服务器和客户。 使用逻辑较少的模板，截编写从一种语文到另一个，或使用相同的语言在服务器和客户可能有助于增加量的代码，可以共享。
因为搜索引擎优化的兼容性并不是微不足道的水疗中心，这是值得注意的水疗中心通常不使用的情况下，搜索引擎编制索引是一种要求，或可取的。 使用情况包括应用程序面的私人数据的背后隐藏着一个 身份认证 系统。 在该情况下，这些应用消费品，往往是一个经典的网页重新绘的模型用于将应用程序的着陆页和营销网站，其提供足够的元数据的应用程序出现的一击一个搜索引擎查询。 博客，支持论坛和其他传统的网页重新绘制文物往往围坐在温泉，可以种搜索引擎的有关条款。
另一个方法中使用的服务器中心网框架，如基于Java ItsNat 是呈现的任何超文本的服务器使用相同的语言和模板的技术。 在这种方法，服务器就知道精确的DOM国家在客户的任何或大或小的页面更新的要求产生的服务器，以及运输由阿贾克斯，的确切JavaScript code带来的客户网页的新的国家执行DOM方法。 开发人员可以决定哪些网页的国家必须通过可搜索蜘蛛网的搜索引擎优化的和能够产生所需的国家在装载时间产生纯HTML而不是JavaScript。 在这种情况下的ItsNat框架，这是自动的，因为ItsNat保持的客户DOM树在服务器作为一个Java W3C DOM树；渲染这DOM树在服务器生成纯HTML在装载时间和JavaScript DOM行动，阿贾克斯的请求。 这种双重性是非常重要的搜索引擎优化，因为开发者可以建立，同Java的代码和纯粹基于HTML模板所需DOM国家在服务器；在页面负载时，常规HTML是由ItsNat使这DOM状态的搜索引擎优化兼容。 为1.3版本的，[16] ItsNat提供了一个新的无国籍模式中，以及客户DOM不是在服务器上保留因为与无国籍模式中客户多国家是部分或完全重建的时服务器上处理任何Ajax请求基于需要的数据由客户发送通知服务器的流DOM状态；无国籍模式中还可以搜索引擎优化兼容的，因为搜索引擎优化的兼容性发生在装载时最初的页面不受影响状态或无国籍的模式。
有一对夫妇的解决方法，使它看起来就像网站的可搜索的。 两者都涉及创建独立HTML网页镜的内容。 服务器可以创建一个基于HTML版网站，并提供，以爬虫，或者它可以使用一个无头的浏览器，如PhantomJS运行JavaScript应用程序及输出的所得HTML。
这些都需要相当多的努力，并可以最终放弃维护头痛的大型复杂的网站。 也有潜在的SEO的陷阱。 如果服务器生成HTML被认为是太不同的水疗中心内容，那么该网站将被处罚。 运行PhantomJS输出HTML可以减缓的反应速度的网页，其中一些是为其搜索引擎–谷歌，特别是降级排名。[17]
客户端/服务端代码分离
[编辑]一种方法来增加量的代码，可以共用服务器和客户之间是使用一种逻辑-小模板语言喜欢 胡子 或 把手的。 这种模板可以呈现不同的主语言，例如 红宝石 在服务器和 JavaScript 在的客户。 然而，仅仅共享模板通常需要工作重复的 业务逻辑 使用的选择正确的模板，并填入数据。 呈现的模板可能有负面业绩的影响时，才更新一小部分的页面，如价值的文本输入内的一个大型的模板。 更换整个模板也可能会干扰用户的选择或标位置，此处仅更新的改变价值可能不会。 为了避免这些问题，应用程序可以使用 UI数据绑定 或颗粒状 DOM 操纵，只有在更新相应的部件的网页，而不是重新呈现整个模板。
浏览器历史
[编辑]有一个SPA是，通过的定义，'一个单页的'，该模型休息浏览器是设计为一页历史上航行使用向前/后的按钮。 这提出了一个可用性障碍时，一种用户按下按钮回，希望前面的屏幕国家内的温泉，而是应用程序的单页卸载和以前的页面的浏览器的历史记录。
传统的解决方案用于水疗中心已经改变浏览网址的散列 段标识符 合当前的屏幕状态。 这是可以实现的JavaScript，并使网址的记录事件，以建立内的浏览器。 只要温泉能够重建相同的屏幕状态从中包含的信息URL散，预期后按钮行为是保留。
进一步解决这一问题，5说明已采 pushState 和 replaceState 提供程序访问，实际的网址和浏览器的历史。
分析
[编辑]分析工具，例如 谷歌分析 依赖整个新网页载在浏览器，发起一个新的页面负荷。 温泉不以这种方式工作。
之后的第一页载，随后的所有网页和内容的改变都是内部处理的应用，这应该只是一个叫功能以更新的分析包。 没有电话所述的功能，浏览器永远不会触发一个新网页载，没有得到增加的浏览器的历史和分析软件包已经没有知道谁是做什么的网站上。
为单页面应用添加页面加载
[编辑]它可以加入网页载的事件来一个温泉使用5历史API；这将有助于集成分析。 困难来管理并确保这一切都是被跟踪，准确地说，这涉及检查失踪报告和双条目。 一些框架提供开放源的分析的集成处理的大多数主要分析供应商。 开发者可以将它们纳入应用程序，并确保一切正常，但是没有需要做的一切，从头开始。
初始化加载的速度
[编辑]单页应用程序都有一个较慢的第一页，载于基于服务器的应用。 这是因为第一载有带来的框架和应用程序的代码之前呈现的需要看作为HTML在浏览器。 一个基于服务器的应用程序，就具有推出必要HTML浏览器，减少延迟和下载时间。
加快页加载
[编辑]有一些方法，加速初始载荷的一个SPA，例如沉重的方法来缓和懒惰-装模块需要的时候。 但它不能够得到从事实上，它需要下载的框架，至少有一些应用程序的代码，并将最有可能打API于数据的显示之前的东西在浏览器。 这是一个付钱给我，现在，还付我钱以后的'折衷方案。 这个问题的性能和等待时间仍然是一个决定，开发人员必须做到的。
页面生命周期
[编辑]一个水疗中心是充分载入初次页面负荷然后页区域更换或更新页面的碎片加载服务器上的需求。 避免过度的下载的未使用的功能、一个水疗通常会逐步下更多的功能，因为他们成为需要，无论是小碎片的网页，或完整的画面模块。
在这样一种比喻之间存在"各国"在一个水疗和"网页"在一个传统的网站。 因为"国航"在同一页面相似页的导航，在理论上，任何基于页面的网站可以转化为单一页取代在同一页上唯一的改变的部分的结果进行比较连续的网页在非泉。
SPA做法的网络类似于 单一的文件接口 (SDI)介绍技术的流行在当地的桌面应用程序。
参考
[编辑]- ^ Flanagan, David, "JavaScript - The Definitive Guide", 5th ed., O'Reilly, Sebastopol, CA, 2006, p.497
- ^ Fixing the Back Button: SPA Behavior using Location Hash. [2016-01-18] （美国英语）.
- ^ US patent 8,136,109. [2002-04-12].
- ^ Unhosted web apps.
- ^ The Single Page Interface Manifesto. [2014-04-25].
- ^ Derby. [2011-12-11].
- ^ Sails.js. [2013-02-20].
- ^ Tutorial: Single Page Interface Web Site With ItsNat. [2011-01-13].
- ^ HTML5
- ^ What the user sees, what the crawler sees. [January 6, 2014].
the browser can execute JavaScript and produce content on the fly - the crawler cannot
- ^ Making Ajax Applications Crawlable. [January 6, 2014].
Historically, Ajax applications have been difficult for search engines to process because Ajax content is produced
- ^ Proposal for making AJAX crawlable. Google. October 7, 2009 [July 13, 2011].
- ^ (Specifications) Making AJAX Applications Crawlable. Google. [March 4, 2013].
- ^ Hash URIs. W3C Blog. May 12, 2011 [July 13, 2011].
- ^ Deprecating our AJAX crawling scheme. Official Google Webmaster Central Blog. [2017-02-23] （美国英语）.
|work=和|newspaper=只需其一 (帮助) - ^ ItsNat v1.3 release Notes. [2013-06-09].
- ^ Holmes, Simone (2015).
外部链接
[编辑]- 多页面网络应用到单页Ajax接口的迁移(代尔夫特技术大学): http://arxiv.org/abs/cs/0610094
- 单页宣言界面
[[Category:网络应用程序]]