新部件开发的任务和优势
这两个 JSON 文件还为我们提供了有关组件需要哪些附加依赖项才能在 Web 浏览器中正确显示的信息。 当我们查看 Ivy 生成的代码时，我们发现功能代码以及创建模板的说明可以在同一个 JavaScript 文件中找到。 使用 Ivy，控制器代码和用于渲染 HTML 树的代码最终位于一个文件中。 Ivy 引入了所谓的静态属性，它描述了组件、指令或管道及其元数据和结构。在我们的清单中，它是AppComponent 的ɵcmp属性。该属性需要一个组件定义，该定义是通过调用 Angular Core Framework 的函数ɵɵdefineComponent 获得的。如果我们查看调用该函数的对象，我们会看到 AppComponent_Template函数，它负责构建 HTML 模板。这会调用 Angular 框架的其他所谓模板函数，例如 ɵɵelementStart，它创建我 华侨资料 的 div HTML 节点，或者 ɵɵtext，它在我们的文档对象模型中创建文本节点。我们还可以看到我们的模板函数响应两种不同的状态：创建和更新。 虽然整个 HTML 是在第一个状态中构建的，但Update状态负责字符串插值，即将title变量的值实际插入到 HTML 中，以及整个更改检测。 还值得注意的是，字符 ɵ（希腊语 theta）是函数名称的一部分。这只是说，这是核心框架的私有 API，可能会在下一个候选版本的过程中发生变化，因此应谨慎使用此 API。 这个 API 是随 Ivy 一起引入的，但是我们现在可以从中获得什么捆绑包大小优势呢？ 为了回答这个问题，我们首先需要再次看看到目前为止如何使用 ViewEngine 渲染 HTML 结构。
https://zh-cn.frnumbers.com/wp-content/uploads/2024/04/over.png
如果我们查看一个非常简单的 HTML 模板和 ViewEngine 编译的 JavaScript 代码，我们会看到 JavaScript 文件中的函数调用，并以数组作为传输参数。该数组包含几个所谓的模板指令。例如，在elementRef指令中我们可以看到HTML节点div的确切结构。 图 3 - HTML 模板示例以及 ViewEngine 生成的关联 JavaScript 源代码 HTML 模板和 ViewEngine 生成的关联 JavaScript 源代码的示例 让我们看b摘自用于渲染组件的 Angular 框架 这意味着：对于模板代码中的每条指令，都会运行一个简单的 switch case，并调用相应的 HTML 渲染函数。这是解释器经常使用的设计方法，因此可能已在此处相应地实现。 然而，这种方法的主要缺点是无法在编译时确定哪些函数被调用来呈现 HTML 节点，哪些不是。
頁:
[1]