dist/main.html

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5.   <meta name="viewport" content="width=device-width">
    6.   <title>JS Bin</title>
    7. </head>
    8. <body>
    11. <script src="./main.js">
    12. </script>
    13. </body>
    14. </html>

    // 实现解析jsx

    1. window.a = <div id="app" class="head">
    2.     <span>1</span>
    3.     <span>2</span>
    4.     <span><h1>3</h1><h1>4</h1></span>
    5.     hello
    6. </div>
    8. document.body.appendChild(window.a)
    10. function createElement(tagName, attributes, ...rest) {
    11.     let element
    12.     element = document.createElement(tagName)
    13.     if (typeof attributes === 'object' && attributes instanceof Object) {
    14.         for (const key in attributes) {
    15.             element.setAttribute(key, attributes[key])
    16.         }
    17.     }
    18.         for(const child of rest) {
    19.             if (typeof child == 'string') {
    20.                 child = document.createTextNode(child) 
    21.             }
    22.             element.appendChild(child)
    23.         }
    24.     return element
    25. }