Contenido

create(), creación de elementos más rápido

4 dic

+ 10

Haciendo pruebas con el extend() que hablamos el otro día he dado con un sistema muy sencillo y cómo para crear elementos en Javascript.

function extend(m, e){
    var e = e || this;
    for (var x in m) e[x] = m[x];
    return e;
};

function create(type, opt){
	return extend(opt,document.createElement(type));
}

Usando extend() y esta pequeña función llamada create(), podemos hacer cosas como estas.

create("a",{
    innerHTML: "Hola",
    href: "http://www.anieto2k.com",
    title: "Hola",
    onclick: function(){
        alert("Hola");
    }
});

Actualización

gbt29, nos muestra una versión más completa de la función.

function create(type, opt, parent){
	// Creamos el elemento
	var el = document.createElement(type) ;

	// Si le pasamos estilos los tratamos aparte, extendemos.
	if (opt.style) 
		extend(opt.style,el.style);

	// Borramos los estilos de las opciones pasadas
	delete opt.style;

	// Extendemos el elemento
	extend(opt,el);

	// Si indicamos el padre, le insertamos al hijo
	if (parent)
		parent.appendChild(el);

	// Devolvemos el elemento creado.
	return el;
}

Tratamos los estilos aparte ya que se trata de un miembre del elemento de solo lectura, por ese motivo los extendemos previamente y posteriormente borramos los estilos para exteder el resto del elemento.

  • 
    function create(type, opt, parent){
    	return ( ((el = document.createElement(type) || true) && opt.style ? extend(opt.style, el.style, delete opt.style) : 0 ) || true) && extend(opt,el,parent?parent.appendChild(el):0);
    }
    
    create("a",{
    	    innerHTML: "Hola",
    	    href: "http://www.anieto2k.com",
    	    title: "Hola",
    	    onclick: function(){
    	        alert("Hola");
    	    },
    		style: {
    			color: "#444",
    			fontSize: "26px"
    		}
    	},document.body);
    

    xD

  • perdon, es asi:

    
    function create(type, opt, parent){
    	return ( ((el = document.createElement(type) || true) && opt.style)?extend(opt.style,el.style,delete opt.style):0 ) || 1 ? extend(opt,el,parent?parent.appendChild(el):0) : 0;
    }
    

    no estaba devolviendo el objeto creado antes

  • no entendi ¿para que sirve esto? osea ¿en que lo podemos aplicar?

  • @gbt29: Buenísimo!, no había pensado en el style.

    He quedado perfecta, me la apunto.
    @inyaka: Pues sirve para crear elementos más rápidamente. Osea en lugar de hacer algo asi:

    
    var s = document.createElement("script");
    s.src = "...";
    s.type="text/javascript";
    document.body.appendChild(s);
    

    podrías hacer algo asi:

    
    create("script", {
         src: "...",
         type: "text/javascript"
    }, document.body);
    
  • Y no sólo más rápidamente, creo que es una buena pŕactica enviar como parametros de un objeto y crear una codificación más elegante

  • Buenísima idea. Muchas gracias.

  • Me intriga saber los motivos por los que el código de gbt29 está ofuscado u ofusca mi mente. Por cierto, hay una pequeña errata, falta una var el por algún lado, vamos es una suposición, ya que a la vista del código los mismo se pretende algún side-effect que no alcanzo a ver, alguna extraña sinergia entre la global el (que es en este momento) y ese misterioso true que aparece como segundo operador del primer || de la ‘schemeatica’ sentencia.

  • @Jose no es que este ofuscado, es solo una mala constumbre que tengo de meter todo el codigo en un oneliner aprovechando algunas singularidades de javascript para hacerlo (en un blog las listaban, no recuerdo cual)

    el codigo para que lo entiendas es este:

    
    function create(type, opt, parent){
    	var el = document.createElement(type);
    	if(opt.style){
    		extend(opt.style, el.style);
    		delete opt.style
    	}
    	if( parent ){
    		parent.appendChild(el)
    	}
    	extend( opt, el );
    }
    

    en el anterior script se correria en ese orden

  • *faltó un return el; en la ultima linea

    en realidad aprovecha la sintaxis corta de if, boolean ? val1 : val2 donde si boolean es true devuelve val1, sino, devuelvo val2 y que en javascript la sintaxis obj1 || obj2 devuelve obj2 si obj1 no esta definido

    lo primero que hice es que el script defina el dentro del primer if:
    de esto:

    
    var el = document.createElement(type);
    if(opt.style){
    	extend(opt.style, el.style);
    	delete opt.style
    }
    

    a esto:

    
    if( (el = document.createElement(type) || true) && opt.style ){
    	extend(opt.style, el.style);
    	delete opt.style
    }
    

    que funciona igual, solo que no define el con var (y sus consecuencias)

    después hice que se borre opt.style cuando intente resolver el valor de un tercer parámetro de la función extend del estilo (javascript no tiene problema si se pasa un parámetro mas o menos de los que requiere una función)

    osea de esto:

    
    extend(opt.style, el.style);
    delete opt.style;
    

    a esto:

    
    extend(opt.style, el.style, delete opt.style);
    

    luego hice lo mismo con parent.appendChild(el);, solo que le agregue un if parent
    de esto:

    
    if( parent ){
    	parent.appendChild(el);
    }
    extend( opt, el );
    

    a esto:

    
    extend( opt, el, parent ? parent.appendChild(el) : 0 );
    

    luego cambié la sintaxis del if por la forma corta y junté el extend con el return, de esto:

    
    if( (el = document.createElement(type) || true) && opt.style ){
    	extend(opt.style, el.style, delete opt.style);
    }
    extend( opt, el, parent ? parent.appendChild(el) : 0 );
    return el;
    

    a esto:

    
    ( (el = document.createElement(type) || true) && opt.style ? extend(opt.style, el.style, delete opt.style) : 0 );
    return extend( opt, el, parent ? parent.appendChild(el) : 0 );
    

    por ultimo junte las dos partes de esta forma:
    parte1 || 1 ? parte2 : 0;
    agregandole un || 1 para que siempre se corra la parte 2 y quedo así:

    
    function create(type, opt, parent){
    	return ( (el = document.createElement(type) || true) && opt.style ? extend(opt.style, el.style, delete opt.style) : 0 ) || 1 ? extend( opt, el, parent ? parent.appendChild(el) : 0 ) : 0;
    }
    

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.