简单模拟Vue虚拟DOM

简单模拟Vue虚拟DOM

 <script>
        // 简单模拟Vue虚拟DOM
        function vElement(tageName, prop, children) {
            //判断调用者是否为vElement的实例
            if(!(this instanceof vElement)) {
                return new vElement(tageName, prop, children)
            }
            //判断prop是否为数组
            if(Object.prototype.toString.call(prop) === "[object Array]") {
                children = prop;
                prop = {}
            }
            this.tageName = tageName;
            this.children = children;
            this.prop = prop;
            //count记录总节点个数
            var count = 0;
            this.children.forEach(function(child, index) {
                if(child instanceof vElement) {
                    count += child.count;
                }
                count++
            })
            this.count = count;
        }

        //rendere()方法是将虚拟DOM渲染成真实dom
        vElement.prototype.render = function() {
            var el = document.createElement(this.tageName);
            var children = this.children;
            var prop = this.prop;
            for(var item in prop) {
                var curProp = prop[item];
                el.setAttribute(item, curProp);
            }
            children.forEach(function(child, index) {
                if(child instanceof vElement) {
                    var childDom = child.render();
                }else{
                    var childDom = document.createTextNode(child)
                }
                el.appendChild(childDom)
            })
            return el;
        }

        // 调用虚拟dom函数
        var dom = vElement("div", {class:"demo", id:"demo1"}, ["hello world", vElement("p", {class:"demo2"},["我是p标签"])]);

        console.log(dom)//虚拟dom
        console.log(dom.render());//真实dom
    </script>