資訊專欄INFORMATION COLUMN
摘要：前端芝士樹虛擬掛載是如何實(shí)現(xiàn)的問題描述給出如下虛擬的數(shù)據(jù)結(jié)構(gòu)，如何實(shí)現(xiàn)簡單的虛擬，渲染到目標(biāo)樹樣例數(shù)據(jù)渲染結(jié)果如下所示用實(shí)現(xiàn)
【前端芝士樹】虛擬DOM掛載是如何實(shí)現(xiàn)的 問題描述
給出如下虛擬dom的數(shù)據(jù)結(jié)構(gòu)，如何實(shí)現(xiàn)簡單的虛擬dom，渲染到目標(biāo)dom樹
//樣例數(shù)據(jù)
let demoNode = ({
tagName: "ul",
props: {"class": "list"},
children: [
({tagName: "li", children: ["douyin"]}),
({tagName: "li", children: ["toutiao"]})
]
});
渲染結(jié)果如下所示：
/**
* @param node
* @return {string}
* */
function RenderNode(node) {
let result="";
if(typeof node === "string"){
result += node;
} else if(Array.isArray(node)){
node.forEach(item => {
result += RenderNode(item);
});
}else{
let tag = node.tagName || "div";
let props = "";
if (node.props) {
let nodeProps = node.props;
for (let key in nodeProps) {
props += (` ${key}="${nodeProps[key]}"`);
}
}
if(node.children && node.children.length){
result = `<${tag + props}>${RenderNode(node.children)}`;
}
}
return result;
}
let renderHTML = RenderNode(demoNode);
console.log(renderHTML);
let main = document.getElementById("main");
main.innerHTML = renderHTML;
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/99156.html
摘要：提供了糟糕的支持，而雖然接近標(biāo)準(zhǔn)，但依舊未能完全正確的支持標(biāo)準(zhǔn)。盡管修復(fù)了許多的問題，但是依然延續(xù)實(shí)現(xiàn)中的其它故障主要是盒模型問題。因此大部分的聲明將觸發(fā)嚴(yán)格模式即依據(jù)標(biāo)準(zhǔn)的規(guī)則渲染網(wǎng)頁。 深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文將從盒模型開始，一步步涉及一些常見的前端筆試和面試點(diǎn) 主要參考自第一篇文章，然而筆者在讀的時(shí)...
摘要：圖在中應(yīng)用三數(shù)據(jù)渲染過程數(shù)據(jù)綁定實(shí)現(xiàn)邏輯本節(jié)正式分析從到數(shù)據(jù)渲染到頁面的過程，在中定義了一個(gè)的構(gòu)造函數(shù)。一、概述 vue已是目前國內(nèi)前端web端三分天下之一，也是工作中主要技術(shù)棧之一。在日常使用中知其然也好奇著所以然，因此嘗試閱讀vue源碼并進(jìn)行總結(jié)。本文旨在梳理初始化頁面時(shí)data中的數(shù)據(jù)是如何渲染到頁面上的。本文將帶著這個(gè)疑問一點(diǎn)點(diǎn)追究vue的思路。總體來說vue模版渲染大致流程如圖1所...
摘要：這里借鑒了一下的處理方式，我們把單獨(dú)模塊的包裝成一個(gè)函數(shù)，提供一個(gè)全局的回調(diào)方法，加載完成時(shí)候再調(diào)用回調(diào)函數(shù)。 感謝本文引用鏈接的各位大佬們，小菜鳥我只是個(gè)搬運(yùn)工 1.談一談你理解的vue是什么樣子的？ vue是數(shù)據(jù)、視圖分離的一個(gè)框架，讓數(shù)據(jù)與視圖間不會(huì)發(fā)生直接聯(lián)系。MVVM 組件化：把整體拆分為各個(gè)可以復(fù)用的個(gè)體 數(shù)據(jù)驅(qū)動(dòng)：通過數(shù)據(jù)變化直接影響bom展示，避免dom操作。 可以在...
閱讀 2660·2021-10-11 10:58
閱讀 1254·2021-09-29 09:34
閱讀 1660·2021-09-26 09:46
閱讀 3906·2021-09-22 15:31
閱讀 802·2019-08-30 15:54
閱讀 1533·2019-08-30 13:20
閱讀 1312·2019-08-30 13:13
閱讀 1557·2019-08-26 13:52
