10

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

谢谢！

/即将拔出所有头发的人

4

1 回答 1

17

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 an SPA!';
  event.returnValue = text; 
  return text;
};
  • 您可以挂钩/代理历史状态 API 以了解它们是否被调用。
  • 您可以查看历史状态。如果发生变化，那么你有一个 SPA
  • 你可以想出一些疯狂的链接/元素点击事件观察器，它会延迟一些任意时间，如果时间过去并且定时事件触发，那么它可能是一个 SPA，否则页面导航离开并且事件永远不会完成触发。这不是很好，因为您必须等待任意时间。如果您不想要足够长的时间并且页面很慢并且仍然导航离开怎么办？
于 2018-07-24T21:54:18.700 回答