HTML搞事儿！Angular教你秒变网页特效

别小看那些网页框架了，用起来速度飞快！说起编程，你有没有试过这种方式？

  {{title}}

export class AppComponent {
 title = 'angular';
}

这个不就是HTML原本应该干的事儿嘛?好，咱说说吧：到底是咋样通过Angular一招手，把那些看着复杂到不行的代码搞成咱们看着简单明了的网页特效的？等会儿我来揭晓答案！

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

看这儿Angular这个东西嘞，就是咱们只要把普通模板写为一长串指令，它就能够帮着咱们生成HTML代码。你得知道，这个过程可不只是简单地翻译这么简单，而是包含两步！

这里还有3个超级实用的函数，分别叫 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里面可以这样使用：

 

 
 function render() {
  elementOpen('div');
  text('div content');
   elementOpen('p');
   text('p content');
   elementEnd('p');
  elementEnd('div');
 }
 patch(document.getElementById('container'), render);
 

这个测试用例里，text()函数的参数被塞得满满登登的，虽然在真正运行的时候可能只会输出’text(Comp.title)’. 但要是我们换上浮点数或字符串啥的，咋处理让用户能改的情况？那我们是不是得重新弄个patch()函数呐？

头疼的问题就是DOM处理速度慢，文件多了的话，框架的性能可就拖后腿了。帮你想想看，下次咱们执行patch函数时，如果DOM树已经存在就直接拿来用，不用再整个新大树或者往里叉东西了，真的不费吹灰之力就能解决的事情！大家听懂没？期待本文对你们有所帮助呦，别忘了留下宝贵意见哈

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 firstChild = (currentParent as Element).firstElementChild;
  if (firstChild && firstChild.tagName.toLowerCase() === tagName) {
    currentParent = firstChild;
    return;
  }
  const element = document.createElement(tagName);
  currentParent!.appendChild(element);
  currentNode = element;
}
function text(textContent: string): void {
  if (currentNode!.textContent !== textContent) {
    currentNode!.textContent = textContent;
  }
}
function elementEnd(tagName: string): void {
  currentNode = currentParent;
  currentParent = currentNode!.parentNode;
}