如何检测页面中使用的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已加载,但我不确定它甚至意味着什么才能成为窗口的成员函数.
3. 为什么Backbone和Underscore的程序与其他程序不同？你怎么知道使用哪一个？
4. 我尝试在Uber主页上运行两个扩展,它使用React,但都没有检测到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的依赖项，在这种情况下，库很可能不会注册任何全局变量。