The virtual DOM is just a JS Object. It is virtual and needs to be converted into a real Dom object using JS.Copy the code

What are the advantages of the virtual DOM

  1. Reduce DOM manipulation

    1. The virtual DOM can combine multiple operations into one operation.

    2. Virtual DOM With DOM diff, redundant operations can be omitted

  2. cross-platform

    The virtual DOM can become not only a DOM, but also applets and iOS applications, because the virtual DOM is essentially a JS object

Copy and paste to HTML can be achieved, effective test

<! doctypehtml>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>virtualDom</title>
</head>
<body>
<div id="app"></div>
<script>
    /** * create element *@param Type type *@param Props parameters *@param Children child node = array | | * / text
    class Element {
        constructor(type, props, children) {
            this.type = type;
            this.props = props;
            this.children = children; }}// Create the element
    function createElement(type, props, children) {
        return new Element(type, props, children);
    }


    / / virtual Dom
    const vDOM = createElement('ul',
        {
            class: 'list'.style: 'width: 300px; height: 300px; background-color: orange'
        },
        [
            createElement('li',
                {class: 'item'.'data-index': 0},
                [
                    createElement('p', {class: 'text'},'Option 1'])
                ]),

            createElement('li',
                {class: 'item'.'data-index': 1},
                [
                    createElement('p', {class: 'text'}, [
                        createElement('span', {
                            class: 'text'},'Second list option'
                        ])
                    ])
                ]
            ),

            createElement('li',
                {class: 'item'.'data-index': 2},'Third list option']]);/** * Render function virtual DOM into real nodes *@method render
     * @param VDOM Virtual DOM object *@return Returns the real node */
    const render = (vDOM) = > {

        // Parse assignment to fetch the type, argument, and child nodes
        const {type, props, children} = vDOM;

        // Get the root node and convert the following virtual type to a node
        const el = document.createElement(type);

        // Iterate over attributes
        Object.keys(props).forEach(key= > {
            // Sets the properties and values of the node
            setAttrs(el, key, props[key]);
        });

        children.map(child= > {
            // If you generate from Element then render?
            // Yes: virtual node to element
            // No: Create a text node
            child = child instanceof Element
                ? render(child)
                : document.createTextNode(child);

            // Add all to each level parent element, up to the top node
            el.appendChild(child);
        });

        return el;
    };

    /*** * The node hangs the attribute *@method setAttrs
     * @param Element node *@param The property attribute *@param Value Indicates the value following the attribute */
    function setAttrs(element, property, value) {
        switch (property) {
            // Maybe an input field
            case 'value':
                // The value attribute is not currently tested
                if (element.tagName === 'INPUT' || element.tagName === 'TEXTART') {
                    // The value of the input field is value, not innerText
                    element.value = value;
                } else {
                    element.setAttribute(property, value);
                }
                break;
            // If it is a style
            case 'style':
                element.style.cssText = value;
                break;
            // The default is to set the properties and values
            default:
                element.setAttribute(property, value);
                break; }}const realElement = render(vDOM);

    // Get the App element
    const App = document.querySelector('#app');

    // Successful conversion of virtual DOM to real DOM
    App.appendChild(realElement);

</script>
</body>
</html>

Copy the code