Facebook Google+


Aporte [CoreJS] Framework JS mediante a componentes.
#1
Hola, que tal ? hace rato que no publico nada nuevo por aqui... y también demasiado tiempo sin estar creando nuevo contenido el cual pueda compartir. Pero recientemente estuve aprendiendo varios frameworks para JS de los cuales se encuentran tanto AngularJS 2 como ReactJS, y me intereso mucho la idea de crear algo similar, pero obviamente mucho mucho más simple... esto es como practica, y a su vez incorporando todo lo que seria el nuevo ECMAScript 6.

Antes de comenzar a especificar a que esta orientado el framework, quiero aclarar que este puede tener errores (bugs, obviamente) ya que solo es una practica que no me llevo mas de 1 hora realizarlo, por el simple hecho de que no se si vale la pena seguir desarrollandolo. 

¿ Como funciona ?

-Se basa en crear componentes, es decir ej "<MyComponente>" el cual puede contener un JSON con datos y lógica, y luego el plugin puede renderizarlos con los datos. Es decir, ese componente va a estar ligado a un "source" (JSON - Object JS) o no (esto es opcional); El cual va a tener un codigo HTML por el cual ser renderizado una vez que el plugin lo inicialice.

EJ:

INDEX.HTML
Código:
<!DOCTYPE html>
<html>
    <head>
        &lt;script type="text/javascript" src="core.js"&gt;&lt;/script>
    </head>
    <body>
        <h1>TEST</h1>
        
        <MyComponent></MyComponent>
        <MyComponent></MyComponent>

    </body>
</html>

Core.JS

Código:
class RenderDOM {
    constructor(){
        
    }

    renderHTML(codeHtml, element, createItem) {
        if ( (!codeHtml) || (!element))
            return;

        if ( (element.innerHTML === "" || (element.innerHTML && element.innerHTML.length > 0)) && !createItem  ){
            element.innerHTML = codeHtml;
        } else if ( createItem ){
            var DOMElement = document.createElement("DIV");

            DOMElement.id = element;
            DOMElement.innerHTML = codeHtml;

            document.body.appendChild(DOMElement);
        }
    }

    createComponent(componentName, codeHtml, source = null) {
        if ( !componentName || ! codeHtml)
            return;

        return { componentSelector: componentName, code: codeHtml, hasLogical: source ? true : false, source: source };
    }

    renderComponent(objComponent) {
        if ( ! objComponent || typeof (objComponent) != 'object'){
            return;
        }

        let obj = document.querySelectorAll(objComponent.componentSelector);
        if ( !obj ){
            return;
        }

        let code = objComponent.code;

        if ( objComponent.hasLogical ){
            for(let i in objComponent.source){
                if ( code.indexOf(i) >= 0 )
                {
                    let varName = "{{" + objComponent.code.split("{{")[1].split("}}")[0].split(".")[0] + "." + i + "}}";
                    code = code.replace(varName, objComponent.source[i]);
                }
            }
        }

        for(let i = 0; i < obj.length; i ++){
            obj[i].innerHTML = code;
        }
    }
}

document.addEventListener("DOMContentLoaded", () => {

    let datos = { message: "Hola a todos!", otro: "que tal a todos!" };

    let DOM = new RenderDOM();
    
    let component = DOM.createComponent("MyComponent", "<p style='color: red'>{{datos.message}}</p>" +
    "<p>{{datos.otro}}</p&gt;", datos);

    DOM.renderComponent(component);
});

Esto a la hora de ejecutarlo, debería de verse así:

[Imagen: 1483867598_ckeCw56LqM0jHiJ.png]

Cualquíer duda o consulta, pueden comentar, obviamente este código puede tener mejoras a futuro, de ser así, iré actualizando el hilo.

Saludos.
 
Reply
#2
Se ve excelente compañero! felicitaciones
 
Reply
#3
MUY bueno @iiJokeer, esperamos saber como sigue el proyecto
 
Reply
#4
Esta demasiado interesante, lo tienes en algun repo como GitHub o Bitbucket donde se puedan ver las nuevas versiones (actualizaciones) si las hay ? felciitaciones!
 
Reply
  


Salto de foro:


Browsing: 1 invitado(s)