最近在學vue 所以仿寫了一些render函數的虛擬dom,還是挺有意思的:)

function createElement(tag, prop, children) {if (!(this instanceof createElement)) {return new createElement(tag, prop, children)}if (Object.prototype.toString.call(prop) === "[object Array]") {children = prop;prop = {};}this.tag = tag;this.prop = prop;this.children = children;var count = 0;this.children.forEach(function(item) {if (item instanceof createElement) {count += item.count;}count++;})this.count = count;}createElement.prototype.render = function() {var tag = this.tag;var prop = this.prop;var children = this.children;var dom = document.createElement(tag);for (item in prop) {dom.setAttribute(item, prop[item]);}children.forEach(function(child) {if (child instanceof createElement) {var childDom = child.render();} else {var childDom = document.createTextNode(child);}dom.appendChild(childDom);})return dom;}

以上為代碼片

測試節點如下

var dom = createElement("div", {class: "demo"}, ["you are", createElement("p", {id: "lala"}, ["gorgeous"])]);console.log(dom.render());

得出結果

原文地址：博客內容

轉載于:https://www.cnblogs.com/suedar/p/8506320.html

總結

以上是生活随笔為你收集整理的仿写简单的vue虚拟dom的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。