如何知道它是否是单页应用程序?

时间:2017-11-10 18:31:56

标签: javascript html single-page-application web-technologies

我对网络技术的经验非常少,只知道基本的HTML和CSS。我有一个任务,我应该评估一个网站,并确定可以帮助改善网站的网络技术。我想弄清楚的第一件事是我选择的是多页应用程序还是单页应用程序。我已经在谷歌搜索了几个小时的代码,这些代码是典型的'对于SPA,但还没有发现除此之外的任何东西:

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Single Page Sliding Layout - Design Shack Demo</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="https://designshack.net/favicon.ico">
<link rel="icon" href="https://designshack.net/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>

这表明它是SPA吗?还是我完全偏离轨道? 这是网站,如果这有助于: http://www.mrbottles.com/

谢谢!

/即将脱掉所有头发的人

1 个答案:

答案 0 :(得分:3)

SPA-单页应用程序

前体

要摆脱的一件事:有单页应用程序单页网站。尽管两者可能有相似之处,但还是有区别的。

单页网站是一个试图将所有内容放在一个页面上的网站,您通常在页面上滚动以转到其他部分,并且经常在您后面跟随一个粘性导航并告诉您正在进行的部分。同样,单击导航通常是一个锚链接,它将使您停留在页面上,无需重新加载即可跳到该部分(无需使用JavaScript即可完成此操作)。

单页应用程序通常在发生页面交互或导航时以两种形式出现。一种味道是URL中将带有#,其中#字符后面的内容会在交互时发生变化。这与单击锚点时的“单页网站”相似,除了通常动态加载内容而不是页面滚动到页面的一部分之外。另一个利用称为浏览器历史状态的东西。 javascript无需更改窗口即可更改页面的路径。

您为什么要关心 ?您的任务是什么,您要完成什么?大多数人关心知道页面是否为SPA,因为他们正在确定其产品是否可以与客户的网站一起使用的可行性。最终,您想知道内容是否正在动态加载。如果您的产品修改了页面上的内容,但是内容正在更改,则没有真正的好方法可以在SPA导航/内容更改后再次触发代码。在不知道原因的情况下,很难回答这个问题,但是我将尝试涵盖广泛的范围。

如何检测SPA?

并没有真正说明您是要手动检测还是以编程方式检测SPA。不幸的是,没有设置任何标志,只是因为您发现一个框架并不意味着该框架正在被用来使该页面成为SPA。

手动检测SPA

检测SPA的最直接方法是手动检查它。

手动检测SPA的步骤
  1. 打开开发人员工具/检查器
  2. 重新加载页面或导航到页面
  3. 注意请求的时间表/瀑布
  4. 单击您关注的链接或其他互动
    • 如果时间轴刷新并导致页面重新加载,则它不是SPA
    • 如果时间轴显示您的互动之后的第一个匹配项和其他匹配项,则您有SPA。
以编程方式检测SPA

这很复杂,因为SPA可以挂接事件,甚至在您试图侦听该页面是否为SPA时也可以防止事件冒泡或传播。

以下是我想到的一些检测SPA的想法。


当窗口离开时,您可以确定将要重新加载。此时,您可以说该页面不是SPA。如果您进行了交互并希望重新加载发生,但没有,那么您就有SPA了。

window.onbeforeunload = function(event) {
  var text = 'Not a SPA!';
  event.returnValue = text; 
  return text;
};

  • 您可以观看历史记录状态。如果发生更改,那么您将拥有SPA
  • 您可能会想到一些疯狂的链接/元素单击事件观察器,该观察器会延迟任意时间,并且如果时间过去并且触发了定时事件,则可能是SPA,否则页面会消失并且事件永远不会触发。这不是很好,因为您必须等待一些任意时间。如果您不想要足够长的时间并且页面运行缓慢并且仍然无法导航怎么办?