RubyLouvre
commented
7 years ago 1.1.1的节点排序算法
function updateChildren(lastVnode, nextVnode, parentNode, context, mountQueue) {
let lastChildren = lastVnode.vchildren,
nextChildren = flattenChildren(nextVnode), //nextVnode.props.children;
childNodes = parentNode.childNodes,
hashcode = {},
hasExecutor = mountQueue.executor;
if (nextChildren.length == 0) {
lastChildren.forEach(function(el) {
var node = el._hostNode;
if (node) {
removeDOMElement(node);
}
disposeVnode(el);
});
return;
}
lastChildren.forEach(function(el, i) {
let key = el.type + (el.key || "");
if (el._disposed) {
return;
}
let list = hashcode[key];
el._index = i;
if (list) {
list.push(el);
} else {
hashcode[key] = [el];
}
});
nextChildren.forEach(function(el) {
let key = el.type + (el.key || "");
let list = hashcode[key];
if (list) {
let old = list.shift();
if (old) {
el.old = old;
if (!list.length) {
delete hashcode[key];
}
}
}
});
var removed = [];
for (let i in hashcode) {
let list = hashcode[i];
if (Array.isArray(list)) {
removed.push.apply(removed, list);
}
}
removed.sort(function(a, b) {
return a._index - b._index;
});
var queue = hasExecutor ? mountQueue : [];
nextChildren.forEach(function(el, index) {
let old = el.old,
ref,
dom;
removeNodes(removed, true);
if (old) {
delete el.old;
if (el === old && old._hostNode && !contextHasChange) {
//cloneElement
dom = old._hostNode;
if (dom !== childNodes[index]) {
parentNode.replaceChild(dom, childNodes[index]);
return;
}
} else {
dom = updateVnode(old, el, lastVnode, context, queue);
if (!dom) {
dom = createDOMElement({ vtype: "#comment", text: "placeholder" });
replaceChildDeday(
[old, el, lastVnode, context, queue],
dom,
parentNode
);
}
}
} else {
dom = mountVnode(null, el, lastVnode, context, queue);
}
ref = childNodes[index];
if (dom !== ref) {
insertDOM(parentNode, dom, ref);
}
if (!hasExecutor && queue.length) {
clearRefsAndMounts(queue);
}
});
removeNodes(removed);
}
function removeNodes(removed, one) {
while (removed.length) {
let removedEl = removed.shift();
let node = removedEl._hostNode;
if (node) {
removeDOMElement(node);
}
disposeVnode(removedEl);
if (one) {
break;
}
}
}
function replaceChildDeday(args, dom1, parentNode) {
setTimeout(function() {
var dom2 = updateVnode.apply(null, args);
parentNode.replaceChild(dom2, dom1);
});
}
function insertDOM(parentNode, dom, ref) {
if (!dom) {
return console.warn("元素末初始化"); // eslint-disable-line
}
if (!ref) {
parentNode.appendChild(dom);
} else {
parentNode.insertBefore(dom, ref);
}
}
1.1.2的节点排序算法，通过一次循环，同时构建三个辅助对象，actions, removeHits, fuzzyHits 第二次循环，实现所有节点排序，第三次循环，实现多余节点的移除。