Angular怎样由模板生成DOM树

这篇文章将为大家详细讲解有关Angular怎样由模板生成DOM树，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司是专业的涪城网站建设公司，涪城接单;提供网站建设、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行涪城网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

Angular等现代Web框架极大的提高了开发效率,比如我们经常会在开发过程中写出类似下面的代码：

  {{title}}


export class AppComponent {
 title = 'angular';
}

这种模板写法并不是HTML原生支持的，那么Angular又是如何转换这些代码，并显示成我们期望的界面呢? 首先我们来看看Angular把上述代码编译成什么样子：

 ...省略了其他代码
 i0.ɵɵelementStart(0, "div");
 i0.ɵɵtext(1, " hello angular\n");
 i0.ɵɵelementEnd()
 ...省略了其他代码

可以看到，Angular把我们写的模板编译成指令的方式,然后通过这些指令生成对应的HTML.这个过程包含两个步骤：

1. 把模板编译成上面的产物

2. 执行产物代码生成HTML

本文主要围绕步骤二进行展开，步骤一的话可能会在后续另写一篇进行阐述。

观察上面的产物代码，我们不难发现有三个主要方法：elementStart、text、elementEnd.从它们的命名不难推测，这三个方法的作用分别是开始生成标签、内容赋值、闭合标签。下面我们来尝试自己实现这几个方法，最简单的基础版本大概会是这样：

let currentNode: Node | null = null;
let currentParent: Node | null = null;

function patch(host: Node | DocumentFragment, render: () => void): void {
  currentNode = host;
  render();
}

function elementOpen(tagName: string): void {
  currentParent = currentNode;
  const element = document.createElement(tagName);
  currentParent!.appendChild(element);
  currentNode = element;
}

function text(textContent: string): void {
  currentNode!.textContent = textContent;
}

function elementEnd(tagName: string): void {
  currentNode = currentParent;
  currentParent = currentNode!.parentNode;
}

然后在HTML中可以这样使用：