Alcançar Lite reagir e tornar o método createElement

função do createElement (tipo, configuração, crianças) {
   // 1. Crie um objeto 
  // 2. A configuração do parâmetro de objeto modificado 
  // 3. O parâmetro crianças como um atributo de adereços objeto 
  do deixar virtureDOM = {}; 
  virtureDOM. tipo = tipo; 
  virtureDOM.ref = || config.ref nulo ; 
  virtureDOM.key = || Config.key nula ; 

  a deixar os suportes = {}; // dom virtual dos suportes 
  para (const attr na configuração) { // iterar configuração removido chave cópia ref e os valores de atributo dos suportes na 
    SE (attr === 'chave' || attr === 'ref') Continuar ;
    else Os suportes [attr] = config [attr]; 
  } 

  const childrenLength = O arguments.length - 2; // criar uma pluralidade de parâmetros de transmissão pode ser considerado como terceiro início Crianças 
  SE (. childrenLength === 1 ) { 
    props.children = crianças; // Se apenas um terço parâmetro para que as crianças 
  } else  IF (childrenLength> 1. ) { 
    a deixar childArray = matriz (childrenLength); // se mais de um, ele é armazenado na matriz childArray 
    para (o deixe i = 0; eu <childrenLength; i ++ ) { 
      childArray [I] = argumentos [I + 2 ]; 
    } 
    props.children =childArray; 
  } 

  virtureDOM.props = Os adereços;
   retorno virtureDOM; 
} 

// colocar em elementos DOM objetos reais criados em uma página última 
função a render (virtureDOM, Container, o callback) { 
  o tipo let {,} Os adereços = virtureDOM || { }; 
  o deixar RealDom = document.createElement (tipo); 

  para (attr let nos adereços) {
     IF (props.hasOwnProperty (attr)!) INTERVALO ; // se não uma descrição da propriedade privada tem percorrido diretamente em protótipos IF (! adereços [attr]) a continuar ; // Se este não é um attr valor válido, continue procurando próxima 
    const val =
    Os adereços [attr];
     // processo se torna classe classname 
    IF (attr === 'className') realDom.setAttribute ( 'class' , Val); 

    a outra  IF (attr === 'crianças') { // processo de Crianças 
      IF ( typeof Val === 'string') { // Se apenas uma corda para que as crianças diretos para processar texto fora do 
        texto let = document.createTextNode (Val); 
        realDom.appendChild (texto); 
      } 
      else  IF (Val do instanceof o array) { // Se as crianças é um array, então tem que percorrer a matriz e, em seguida, tornando pontos 
        para (o deixe i = 0; I <val.length; i ++ ) {
           IF (typeof Val [I] === 'String' ) { 
            o texto let = document.createTextNode (Val [I]); 
            realDom.appendChild (texto); 
          } else { 
            a render (Val [I], RealDom); 
          } 
        } 
      } 
      else { // se as crianças têm apenas um e não um array ou uma string, então ele deve ser createElement fora do dom virtual. Recursiva 
        a render (Val, RealDom); 
      } 
    } 

    else  IF (attr === 'estilo') { // processar o atributo de estilo 
      IF (Val === '') Continuar ; // estilo possível é uma seqüência vazia 
      para ( deixe chiqueiroem Val) {
         IF (val.hasOwnProperty (STY)) RealDom [ 'estilo'] [STY] = Val [STY]; 
      } 
    } else realDom.setAttribute (attr, Val); // baseado em atributos de desempenho permitem setAttribute forneceu a estrutura do html 
  } 
  container.appendChild (RealDom); 
  o callback && o callback (); 
} 

const virtureDom2 = o createElement ( 'período' , 
  {}, 'Age 18 iS é!' ); 

const virtureDom = o createElement ( 'div' , 
  { 
    ID: 'Box' , 
    className: 'LP' , 
    estilo: {color:'vermelho'}, 
    -Chave: 12 , 
    ref: 'refs' 
  }, 'meu nome é LanPang' , virtureDom2); 


render (virtureDom, document.getElementById ( 'root'), () => console.log ( 'finish'));