1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8.   <style>
    9.     .dialog{
    10.       width: 300px;
    11.       height: 300px;
    12.       margin:30px auto;
    13.       border:1px solid #333;
    14.       padding:30px;
    15.     }
    16.   </style>
    17. </head>
    18. <body>
    19.   <!-- 
    20.     Dom操作 为啥比较慢？ 
    21.     1. 臃肿 有年限
    22.     2. 图形输出
    23.   -->
    24.   <div id="root">
    25.     <p></p>
    26.     <Cmp1 click="fn1" mouseover="fn2"></Cmp1>
    27.     <UserLogin></UserLogin>
    28.   </div>
    30.   <script>
    32.     // 组件渲染
    33.     function render(options) {
    34.       let root;
    35.       // 判断属性类型
    36.       if(typeof options.root === 'string') {
    37.         root = document.querySelector(options.root);
    38.         if(!root) {
    39.           throw new Error(`找不到根元素 ${options.root}`)
    40.         }
    41.       } else if(options.root instanceof HTMLElement) {
    42.         let tags = options.root.getElementsByTagName('*');
    43.         tags = Array.from(tags);
    44.         // 找出自定义组件标签
    45.         tags.forEach(element => {
    46.           // 找到这是自定义组件
    47.           if(element.constructor === HTMLUnknownElement){
    48.             for (let cmpName in options.components) {
    49.               if(cmpName.toUpperCase() === element.nodeName) {
    50.                 let CmpCls = options.components[cmpName];
    51.                 // 生成一个类的实例
    52.                 let cmp = new CmpCls();
    56.                 let res = cmp.render();
    58.                 // 获取组件定义的 属性和方法
    59.                 if(element.hasAttribute("click")){
    60.                   res.addEventListener('click', options.method[element.getAttribute("click")])
    61.                 }
    62.                 if(element.hasAttribute("mouseover")){
    63.                   res.addEventListener('mouseover', options.method[element.getAttribute("mouseover")])
    64.                 }
    66.                 element.parentNode.replaceChild(res, element);
    67.               }
    68.             }
    69.           }
    70.         });
    71.       }
    72.     }
    74.     // 抽象的父类
    75.     class Component {
    77.       render() {
    78.         throw new Error('render is required');
    79.       }
    81.     }
    83.     class Cmp1 extends Component {
    84.       render() {
    85.         let div = document.createElement('div');
    86.         div.innerHTML = '我是cpm1';
    87.         return div;
    88.       }
    89.     }
    91.     class UserLogin extends Component{
    92.       render() {
    93.         let div = document.createElement('div');
    94.         div.className = 'dialog';
    95.         div.innerHTML = '我是login';
    96.         return div;
    97.       }
    98.     }
    100.     render({
    101.       root: document.querySelector('#root'),
    102.       components: {
    103.         Cmp1,
    104.         UserLogin
    105.       },
    106.       method: {
    107.         fn1:() => {console.log('我是cpm1,你点击了我');},
    108.         fn2:() => {console.log('我是cpm1,你碰到我了');}
    109.       }
    110.     })
    113.   </script>
    114. </body>
    115. </html>