function render(element, parentDOM) {

    //获取元素的类型与属性信息

    const { type, props } = element;

​

    //需要对Text类型元素做特殊处理

    const isTextElement = type === "TEXT ELEMENT";

​

​

    //调用浏览器API创建相应的DOM

    const dom = isTextElement

        ? document.createTextNode("")

        : document.createElement(type);

​

    //处理DOM上的事件监听，以on开头的属性为事件handler属性

    const isListener = name => name.startsWith("on");

​

    //调用浏览器API添加DOM事件处理函数

    Object.keys(props).filter(isListener).forEach(name => {

        const eventType = name.toLowerCase().substring(2); // 取两位后

        dom.addEventListener(eventType, props[name]);

    });

​

    //处理DOM上的普通属性

    const isAttribute = name => !isListener(name) && name != "children";

    Object.keys(props).filter(isAttribute).forEach(name => {

        dom[name] = props[name];

    });

​

    //处理React element上的特殊属性children

    const childElements = props.children || [];

​

    //递归的渲染每一个React元素

    childElements.forEach(childElement => render(childElement, dom));

    parentDOM.appendChild(dom);

}

​

const element = {

    type: "div",

    props: {

        id: "container",

        children: [

            {

                type: "span",

                props: {

                    children: [

                        {

                            type: "TEXT ELEMENT",

                            props: { nodeValue: "Foo" }

                        }

                    ]

                }

            },

            {

                type: "a",

                props: {

                    href: "/bar", children: [

                        {

                            type: "TEXT ELEMENT",

                            props: { nodeValue: "bar" }

                        }

                    ]

                },

            }

        ]

    }

};

​

render(element, document.getElementById("root"));

​

​