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

Question

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

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

所以我的问题是：chrome 怎么知道 angular.element() 函数是什么？难道它不应该只知道“纯”（如果我可以这么说的话）javascript吗？

Answer 1

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文件被解析并附加到windows为angular。一旦引擎知道窗口中有一个名为angular 的对象，那么显然它可以访问与angular 对象关联的element。

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

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

希望你能理解。

Answer 2

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

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

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

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