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

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

我为两个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;
}

等等

我有几个问题：

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

最佳答案

看起来你误解了代码检测库是如何工作的,当然这与理解窗口对象有关.

在浏览器中,javascript环境窗口是全局对象.所有变量都定义为全局窗口对象的属性,除非它们是在具有var关键字的函数中定义的.

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

如果您使用< script>包含它们,默认情况下会执行哪些库？ tag将自己定义为全局变量.因此,使用Backbone.js,您将为您定义Backbone全局变量,并且它将作为window.Backbone提供,因为window是全局对象.

同样,Angular将定义角度全局变量,Zepto将定义Zepto,依此类推.

因此,您应该能够通过它定义的全局变量检测任何库.

但需要注意的是,在现代javascript应用程序中,库不一定会注册全局变量.它们可以在该应用程序的范围(函数)内定义.因此,检查window.Libraryname并不保证页面不使用此库.实际上,在这种情况下检测库可能是一项非常困难的任务.

>框架/库太多,因此您可以创建列表,也可以找到任何维护列表的人.然后,您将查看框架定义的全局变量,以便您可以将它们作为该框架的标识符进行查找.
>正如我在上面解释的那样,angular是全局变量,也可以作为window.angular.如果你创建一个范围角度变量,比如function(){var angular =“my angular”; },你仍然可以使用window.angular获得全局的.
>该代码的维护者可能会发现两个或多个定义Backbone全局变量的库.只有我们了解的Backbone,包括同步功能.这可能是他们另外检查Backbone.sync是一个函数的原因.他们不能在不检查Backbone的情况下检查Backbone.sync功能,因为在非骨干网页上会导致错误.
类似地,使用Underscore,可能有许多库定义全局_变量,因此我们可以通过检查其中一个方法来确定它是Underscore库.
>正如我上面提到的,库不一定会定义全局变量,在这种情况下,您将无法自动检测它们.例如,您可以使用库作为Browserify或RequireJS的依赖项,库很可能不会注册任何全局变量.

angularjs

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

相关文章