Contenido

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

4 Dic

aNieto2k hace 5408 días en: javascript, Programacion, webdev

+ 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: "https://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.

  • gbt29 gbt29

    @2 diciembre 4th, 2008 at 4:03 am 

    
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: "https://www.anieto2k.com",
	    title: "Hola",
	    onclick: function(){
	        alert("Hola");
	    },
		style: {
			color: "#444",
			fontSize: "26px"
		}
	},document.body);

    xD

    Responder

  • gbt29 gbt29

    @3 diciembre 4th, 2008 at 4:14 am

    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

    Responder

  • inyaka inyaka

    @4 diciembre 4th, 2008 at 3:54 pm

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

    Responder

  • aNieto2k aNieto2k

    @5 diciembre 4th, 2008 at 4:10 pm

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

    Responder

  • zazk zazk

    @6 diciembre 4th, 2008 at 11:03 pm

    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

    Responder

  • Ignacio Ignacio

    @7 diciembre 5th, 2008 at 10:42 am

    Buenísima idea. Muchas gracias.

    Responder

  • Jose Jose

    @8 diciembre 5th, 2008 at 6:50 pm

    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.

    Responder

  • gbt2908 gbt2908

    @9 diciembre 7th, 2008 at 12:49 am

    @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

    Responder

  • gbt2908 gbt2908

    @10 diciembre 7th, 2008 at 1:29 am

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

    Responder

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

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.

wordpress. themes wordpress.plugins wordpress.hacks Wordpress webkit usabilidad tweet themes Safari prototype plugins plugin PHP optimización Opera navegadores MooTools lightbox jquery.plugin jquery javascript itouch iphone internet explorer imagenes IE8 IE6 HTML5 HTML hack google.chrome google framework flash firefox3 firefox firebug estandares CSS3 CSS canvas ajax Accesibilidad 2.7 2.6