js虛擬DOM DIFF演算法實現

test.html:

const attrs = 'attrs';

const text = 'text';
const remove = 'remove';
const replace = 'replace';
let index = 0;
function diff(oldtree, newtree); //補丁
let index = 0; //開始比較的節點
//遞迴樹 比較後的結果放到補丁包中
walk(oldtree, newtree, index, patches)
return patches;
}//屬性比較
function diffattr(oldattrs, newattrs)
//新舊屬性對比
for(let key in oldattrs)
} for(let key in newattrs) } 
return patch;
}function walk(oldnode, newnode, index, patches))
}else if(isstring(oldnode) && isstring(newnode)))
} }else if(oldnode.type === newnode.type))
} //子節點 遍歷
diffchildren(oldnode.children, newnode.children, patches);
}else)
} //有補丁
if(currentpatch.length > 0)
}function diffchildren(oldchildren, newchildren, patches))
}function isstring(node)

let allpatches;

let index = 0; //需要補丁的索引
function patch(node, patches)
function patchwalk(node))
//有補丁
if(currentpatch)
}//給對應節點對應補丁
function dopatch(node, patches)else
}break;
case 'text':
console.log(item.text)
node.textcontent = item.text
break;
case 'replace':
let newnode = (item.newnode instanceof element) ? render(item.newnode) : document.createtextnode(item.newnode);
node.parentnode.replacechild(newnode, node)
break;
case 'remove':
break;
default:
break;
} })
}

虛擬dom diff演算法

通過render函式解析jsx，將其轉換成 vdom結構var vdom content 初次渲染 vdom vdom渲染成 真實dom render函式 資料更改了data.name 駿哥 vdom content 使用diff演算法比對兩次vdom,生成patch物件diff演算法是比較兩個檔案...

虛擬dom diff演算法

虛擬dom是什麼？需求 有乙個變數 count 的初始值時 0，經過一系列運算，得到10001，然後將結果寫入box中 var box document.queryselector box 我們可能會這麼寫 var count 0 console.time a for var i 0 i 10001...

虛擬Dom diff演算法

1.虛擬dom樹的遍歷 2.parent節點下的children的比較 3.diff完成之後對真實3.dom的操作時機 虛擬dom的遍歷 虛擬dom說到底只是一顆樹形結構，對於樹的遍歷我們知道有深度遍歷和廣度遍歷 一 指代不同 1 深度優先遍歷 是對每乙個可能的分支路徑深入到不能再深入為止，而且每個...