javascript - 如何检测页面中使用的 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 是什么意思，除此之外它返回 Angular 对象或None。我知道如果可以通过窗口对象访问 Angular 函数，AngularJS 就会加载，但我真的不确定它甚至意味着成为窗口的成员函数。
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 ，在这种情况下，库很可能不会注册任何全局变量。