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

Por: Jaquelin

Jaquelin — Thu, 18 Dec 2008 23:09:44 +0000

Muy bueno, gracias .

Por: gbt2908

gbt2908 — Sun, 07 Dec 2008 00:29:26 +0000

*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;
}

Por: gbt2908

gbt2908 — Sat, 06 Dec 2008 23:49:49 +0000

@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

Por: Jose

Jose — Fri, 05 Dec 2008 17:50:19 +0000

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.

Por: Ignacio

Ignacio — Fri, 05 Dec 2008 09:42:35 +0000

Buenísima idea. Muchas gracias.

Por: zazk

zazk — Thu, 04 Dec 2008 22:03:44 +0000

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

Por: aNieto2k

aNieto2k — Thu, 04 Dec 2008 15:10:46 +0000

@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);

Por: inyaka

inyaka — Thu, 04 Dec 2008 14:54:44 +0000

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

Por: gbt29

gbt29 — Thu, 04 Dec 2008 03:14:42 +0000

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

Por: gbt29

gbt29 — Thu, 04 Dec 2008 03:03:02 +0000


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);