Angular与其他前端其他框架的不同之处

 

Angular的解析过程可以分为以下三个步骤:

1、首先HTML会被标准的浏览器API解析成DOM结构,因此模版必须符合标准的HTML格式。这与大部分前端框架不同时Angular是操作DOM而不是String;

2、随后Angular调用$compile()方法解析遍历DOM树,检索可以与directive匹配的DOM元素,将其一起添加到directive检索表中,directive已一定的优先级顺序进行排列,依次执行他们的compile()的方法进行编译;compile()可以改变DOM结构,并且生成link()方法; $compile() 返回一个包含所有directive的linking function 集合,为下面link阶段做准备。

3、link阶段会通过上面的linking function连接scope与template, dlinking function允许任何元素添加监听,以及观察scope的变化;


编译过程分成compile与link两部分的原因 

例子如下: 

  1. Hello `user`, you have these actions:   
  2. <ul>   
  3. <li ng-repeat="action in user.actions">   
  4. `action`.`description`   
  5. </li>   
  6. </ul>  

   首先Angular编译所有节点,检索directive,发现`user`是一个可以被填写的指令,随后在执行 ng-repeat时候出现问题,如果继续编译`action`.`description`,那么就会link到错误的scope上。这需要快速clone li元素,单独clone是不够的,还要能够编译li元素内部的指令。最简单的方式是clone一个li元素,编译一次,但是这样效率很慢,如果有100个li元素就会出现性能问题,因此统一到linking阶段对指令进行连接,可以大大提高运行性能。

 

   编译到ng-repeat,它会阻止angular继续编译下面内容,将编译li过程分离出来,编译li会生成link function包含li元素内所有指令,为附加到具体li元素的clone做准备。运行时候,ng-repeat会watch模型的变化,生成新的scope连接到里元素的clone上,并且调用link方法。


Compile function: 所有directive被识别和排序后执行编译,为了考虑性能问题,对公共DOM操作建议放在Compile function之中
link function:对具体DOM实例进行编译,可以给cloned的DOM元素添加监听以及从scope复制内容到DOM中。