虚拟DOM

avaon会在DOMReady对.ms-controller节点进行outerHTML操作之前是直接用outerHTML,但后来发现outerHTML在各个浏览器下差异性太大了.IE6-7会对colgroup, dd, dt, li, options, p, td, tfoot, th, thead, tr元素自闭合让我的htmlPaser跪掉于是写了htmlfy,手动取每个元素nodeName, attrName, attrValue, nodeValue来构建outerHTML

第2阶段,将这个字符串进行parser,转换为虚拟DOM这个阶段对input/textarea元素补上type属性,ms-*自定义元素补上ms-widget属性,对table元素补上tbody,在ms-for指令的元素两旁加上<!—ms-for—>,<!—ms-for-end—>占位符,并将它们的之间的元素放到一个数组中(表明它们是循环区域)并去掉所有只有空白的文本节点

第3个阶段,优化,对拥有ms-属性的虚拟DOM添加dynamic属性表明它以后要保持其对应的真实节点,并对没有ms-属性的元素添加skipAttrs属性,表明以后不需要遍历其属性。 如果它的子孙没有ms-*或插值表达式或ms-自定义元素,那么还加上skipContent，表明以后不要遍历其孩子.

这三个属性,dynamic用于节点对齐算法,skipAttrs与skipContent用于diff算法

第4个阶段, 应用节点对齐算法, 将真实DOM中无用的空白节点移除,并插入占位符,并将需要刷新的元素保持在以应的拥有dynamic属性的虚拟DOM中

第5个阶段,放进render方法中,render方法里面再调parseView,parseView会调每个指令的parse方法将虚拟DOM树转换为一个$render方法

第6个阶段,执行$render方法,生成新的虚拟DOM,与最早的那个虚拟DOM树diff,一边diff一边更新真实DOM.

以后VM的属性发生变动,就直接执行第6个阶段.