当我在chrome控制台中使用angular。*以及它为何起作用时会发生什么？

Question

我正在编写一个小脚本来自动化页面上的用户操作，一旦页面打开就应该在chrome控制台中运行，并且有一个表单在检查了所有文本输入之前无法提交，仅当用户将光标放入输入并键入内容时才会进行检查。然后我在互联网上发现我可以执行此代码，这会触发检查字段所需的处理程序：

var $e = angular.element(document.getElementsByName("username")[0]);
$e.triggerHandler('input');

所以我的问题是：chrome如何知道angular.element（）函数是什么？是不是应该只知道“纯粹”（如果我可以这么说）javascript？

Answer 1

chrome如何知道angular.element()函数是什么？

简而言之，我会说 angular.js 有一个名为angular的全局对象，它在全局窗口对象的angular命名空间中有几个可用的方法。

这与角度相同，其他库如jquery是用javascript编写的。它只在加载页面时在浏览器中运行。因此，当浏览器加载每个资产时，它还会获得存储的方法，如angular.element()，这些方法可以在页面中使用，并且可以在浏览器的控制台中实现。它有一份DOM的副本。

就像jquery一样，当jquery在浏览器中加载时，jQuery对象$()也可以在页面和控制台中使用。

Answer 2

Chrome由V8 Javascript引擎提供支持。当请求网页时，请说index.html请求，大致执行流程如下：

1. 下载HTML文档。
2. 开始解析HTML文档。
3. HTML解析达到<script src="angular.js" ...
4. angular.js已下载并解析。
5. HTML解析到达<script src="main.js" ...
6. main.js已下载，解析并运行。
7. HTML文档的解析结束。

当达到第4点时，下载并解析angular.js源代码。在此阶段，创建global object angular，jQuery Lite作为angular.element加载，所有其他角度相关函数加载angular全局对象。

现在在第6点，您的main.js已下载并运行。在您的文件中，您有以下行，

var $e = angular.element(document.getElementsByName("username")[0]);
$e.triggerHandler('input');

当V8 JS引擎解析并运行第一行时，它知道angular，因为angular.js文件被解析并附加了窗口angular。一旦引擎知道窗口中有一个名为angular的对象，显然它可以访问element对象附带的angular。

链接以了解如何加载和执行javascript。

1. SO关于加载订单和执行的链接。
2. 另一个是here
3. How do browsers execute javascript

希望你能理解。