function node2Fragment(node,vm){ //这里是dom劫持,vue会新建一个文档片段来替换dom中本来的结点 var flag=document.createDocumentFragment(); //子节点 var child; while(child=node.firstChild){ //开始编译每个结点 compile(child,vm); //**appendchild方法会自动删除node对象的child结点 flag.appendChild(child) } return flag; }
在while循环中,看不太懂循环条件是如何变化的,也就是注释那句话“appendchild方法会自动删除node对象的child节点”不是很理解?望大神解释一下。
解决方案
这段代码按语义可能是vue框架渲染双向绑定 (viewModel-> view)的过程,
原理就是把原来类似这种dom
<div id="app"> <span v-bind:title="message"></span></div>
渲染成
<div id="app"> <span>this is a message</span></div>
关于appendChild()请移步MDN参考其文档
https://developer.mozilla.org...
附注 :如果被插入的节点已经存在于当前文档的文档树中,则那个节点会首先从原先的位置移除,然后再插入到新的位置.如果你需要保留这个子节点在原先位置的显示,则你需要先用Node.cloneNode方法复制出一个节点的副本,然后在插入到新位置.