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

问题描述 投票:1回答:1

我对网络技术的经验非常少,只知道基本的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/

谢谢!

/即将把头发拉出来的人

javascript html single-page-application web-technologies
1个回答
3
投票

SPAs - Single Page Applications

先导

有一点是摆脱困境:有单页应用程序和单页网站。虽然两者都有相似之处,但是有区别。

单页网站是一个试图将所有内容放在一个页面上的网站,您通常会滚动浏览页面以进入其他部分,并且通常会有一个粘性导航跟随您并告诉您您所在的部分。另外点击导航通常是一个锚点链接,它会让你在页面上跳转到没有重新加载的部分(这可以不用javascript完成)。

当页面交互或导航发生时,单页应用程序通常以两种形式出现。一种风格是URL中会有一个#,其中#字符后面的内容会在交互时发生变化。单击锚点时,这类似于单页网站,除了内容通常是动态加载而不是页面滚动到页面的某个部分。另一个使用称为浏览器历史状态的东西。 javascript能够在不重新加载窗口的情况下更改页面的路径。

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

我如何检测SPA?

没有真正说明您是否尝试手动检测或以编程方式检测SPA。不幸的是,没有可以设置的标志,只是因为你发现一个框架并不意味着它被用来使页面成为一个SPA。

Manually Detecting a SPA

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

Steps to Manually Detect SPA
  1. 打开开发人员工具/检查员
  2. 重新加载页面或导航到它
  3. 请注意请求的时间轴/瀑布
  4. 单击您关注的链接或其他交互 如果时间线刷新并导致页面重新加载,那么它不是SPA 如果时间线显示您的互动后的第一次点击和其他点击,那么您有一个SPA。
Programmatically Detect a SPA

这可能很复杂,因为SPA可以挂钩事件,甚至可以防止它们冒泡或传播,如果您正在尝试收听以确定该页面是否为SPA。

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


当窗口导航时,您可以确定即将进行重新加载。此时您可以说该页面不是SPA。如果您进行了互动并希望重新加载,但没有,那么您就拥有SPA。

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

  • 你可以看一下历史状态。如果发生变化,那么您有一个SPA
  • 您可能会想出一些疯狂的链接/元素点击事件观察器,它会延迟一段任意时间,如果时间过去而且定时事件会触发,那么它可能是SPA,否则页面会导航并且事件永远不会完成触发。这不是很好,因为你必须等待一段任意的时间;如果你不想要足够长的时间并且页面速度很慢并且还在导航之后怎么办?
© www.soinside.com 2019 - 2024. All rights reserved.