Implement Virtual-DOM rendering

Idle all right, study a little something virtual DOM rendering related Later ES6 try to achieve a bit.

Title: Given a tree structure of JSON, achieve VDOM

let demoNode = {
    tagName: 'ul',
    props: {'class':'list'},
    children: [
        {
            tagName: 'li',
            props: {'class':'item'},
            children: ['Three Kindom']
        },
        {
            tagName: 'li',
            props: {'class':'item'},
            children: ['START GAME']
        }    
]}复制代码

Ideas:

1. Define a parent class, the DOM tree may be generated inside the element instance into subclasses.

2. Define the render function of the parent class to the VDOM rendered real DOM.

--------------------------------- beautiful dividing line ------------- ---------------------------------

Next, we use the code to implement it step by step.

Element first define a class, and then define his constructor

class Element {

    constructor(props){
  
    }


}复制代码

Next we define his initialization method is a method subclass instantiated.

(Here one might ask why instances into subclasses?)

(Also used as a subclass render function to render themselves, so by the binary tree depth-first traversal way to the "sub-class - subclass> subclass -> The last sub-class" should be instantiated as Element subclass. to inherit the parent class by __proto__. that is the render method.)

class Element {

    constructor(props){
      this.init(props)
    }

    init(props){
        this.tagName = props.tagName || ''
        this.props = props.props || {}
        this.children = props.children || []
        let _child = []
        this.children = this.children.map((child) => {
            if(typeof child == "object" ){
                child = new Element(child)
            }
            return child
        })
    }
}复制代码

We define again render his method.

1. Create a current node

2. The property assigned to the current node

3. traversed his children.

(1) If it is a subclass of Element, it proved to be generated DOM VDOM. Then go to the recursive method to create and initialize render him.

(2) If it is not a subclass of Element, it proved to be the value of the last node. Direct assignment can be.

class Element(){

    constructor(props){...}

    init(props){...}

    render(){             
        let ele = document.createElement(this.tagName)        
        for (let propsName in this.props){            
            ele.setAttribute(propsName, this.props[propsName])        
        }        
        this.children.forEach(function(item ,index){            
            let childELement = null 
            if( item instanceof Element){
                childELement = item.render()
            }else{
                childELement = document.createTextNode(item)
            }
            ele.appendChild(childELement)
        })
        return ele
    }}复制代码

By the above definition of class, our virtual DOM rendering it done. You can run try.

let demoElement = new Element(demoNode)；

document.body.appendChild(demoElement.render())；复制代码

Reproduced in: https: //juejin.im/post/5cff172b51882570ec017348

Implement Virtual-DOM rendering

Guess you like