如何检测页面中使用的 JS 框架/库？

Question

我希望能够检测页面使用的所有框架/库，以帮助了解何时动态生成内容等。

我下载并解压了两个 Chrome 扩展程序的源代码，Library Detector 和 Appspector。看起来他们只是简单地调用window.FUNCTION_NAME_HERE，例如：

'Backbone.js': function () {
  return window.Backbone && typeof(window.Backbone.sync) === 'function';
},
'Underscore.js': function () {
  return window._ && typeof(window._.identity) === 'function' &&
    window._.identity('abc') === 'abc';
},
'Spine': function () {
  return window.Spine;
},
'Angular': function () {
  return window.angular;
},
'Ning': function () {
  return window.ning;
},
'Zepto': function () {
  return window.Zepto;
}

等等

我有几个问题：

1. 每个调用的框架（例如“Spine”、“angular”）的标识符是什么？有没有办法通过 AJAX 或其他方式检索这些信息，这样我就不必手动输入它们了？
2. 我真的不明白window.angular 是什么意思，除了它返回角度对象或无。我知道如果可以通过 window 对象访问 angular 函数，AngularJS 已经加载，但我不确定作为 window 的成员函数意味着什么。
3. 为什么 Backbone 和 Underscore 的过程与其他的不同？您怎么知道该使用哪一个？
4. 我尝试在使用 React 的 Uber 主页上运行这两个扩展，但它们都没有检测到 React。当我尝试console.log(window) 时，也没有列出 React 对象。为什么会这样？在这些情况下我如何才能检测到框架？

Answer 1

您似乎误解了代码检测库的工作原理，当然这与理解 window 对象有关。

在浏览器 javascript 环境中，window 是全局对象。所有变量都定义为全局 window 对象的属性，除非它们是在带有 var 关键字的函数中定义的。

假设您访问一个使用 jQuery 库的页面，打开浏览器控制台并输入 jQuery。那应该用一个函数来响应，jQuery就是。本质上，jQuery 是一个在全局范围内定义的变量，它可以通过变量名作为变量使用，也可以作为 window 对象的属性使用：window.jQuery。

如果您将它们包含在<script> 标签中，默认情况下库所做的是将它们自己定义为全局变量。因此，使用 Backbone.js，您将为您定义 Backbone 全局变量，它可以作为 window.Backbone 使用，因为 window 是全局对象。

同样，Angular 会定义angular 全局变量，Zepto 会定义Zepto，以此类推。

因此，您应该能够通过其定义的全局变量检测任何库。

但需要注意的是，在现代 javascript 应用程序中，库不一定要注册全局变量。它们可以在该应用程序的范围（功能）内定义。出于这个原因，检查window.Libraryname 并不能保证页面没有使用这个库。事实上，在这种情况下检测库可能是一项非常困难的任务。

1. 框架/库太多，因此您需要自己创建列表或找到维护该列表的任何人。然后，您将查看框架定义了哪些全局变量，因此您可以将它们作为该框架的标识符。
2. 如上所述，angular 是全局变量，也可用作window.angular。如果您创建一个作用域angular 变量，例如function (){ var angular = "my angular"; }，您仍然可以使用window.angular 获得全局变量。
3. 有可能该代码的维护者发现了两个或更多定义Backbone 全局变量的库。而且只有我们知道的 Backbone 包含 sync 函数。这可能是他们另外检查 Backbone.sync 是一个函数的原因。他们不能只检查Backbone.sync 函数而不首先检查Backbone，因为在非主干页面上会导致错误。
   同样，对于 Underscore，可能有许多库定义了全局 _ 变量，因此我们可以通过检查其中一个工作方法来确定它是 Underscore 库。
4. 如上所述，库不一定会定义全局变量，在这种情况下，您将无法自动检测到它们。例如，在现代 javascript 应用程序中，您可以将库用作 Browserify 或 RequireJS 的依赖项，在这种情况下，库很可能不会注册任何全局变量。