Foros del Web » Programando para Internet » Javascript »

Aporte sencillo

Estas en el tema de Aporte sencillo en el foro de Javascript en Foros del Web. Buenas a todos, Voy a publicar una función que hice hace mucho. Que se puede mejorar pues no soy un crack del código, pero que ...
  #1 (permalink)  
Antiguo 26/12/2013, 10:21
Avatar de 0123  
Fecha de Ingreso: noviembre-2012
Ubicación: Entre la consola, el coda y un poco de photoshop
Mensajes: 263
Antigüedad: 7 años
Puntos: 10
Aporte sencillo

Buenas a todos,

Voy a publicar una función que hice hace mucho. Que se puede mejorar pues no soy un crack del código, pero que me ahorra muchísimo trabajo.

El caso es que he probado cantidad de librerías que hacen lo mismo, pero siempre usan muchos recursos, por que hacen mucho más de lo que yo necesito tal vez, o simplemente por que no les importa tanto.

Es una función para seleccionar elementos del DOM de forma sencilla. Muy parecida a CSSQuery, pero "usable", pues ya sabemos como devora ram este tipo de librerías.

Debería maquetar la función y dejarla bonita, pero si me pongo no la publico, jeje.

La función:

Código Javascript:
Ver original
  1. function G(r, e)
  2.     {
  3.         var N=function(o) {
  4.         var i = document.getElementsByTagName("*");
  5.         for (var p = 0; p < i.length; p++) 
  6.             {
  7.                 if (i[p] == o)return p;
  8.             }
  9.            return 0;
  10.         }
  11.         var GG=function(r, e)
  12.             {
  13.                 e = e || document;
  14.                 var  d = [];
  15.                 var k = r.split(",");
  16.                 for(var u = 0;u < k.length;u++)
  17.                     {
  18.                         var f = "*",w,x=0, g = 0, b = k[u].split(" ");
  19.                         var a = b[0];
  20.                         0 < b.length && (b.shift(), g = b.join(" "));
  21.                         "." != a.substr(0,1) ? (f = a, a = "") : a = a.replace(".", "");
  22.                         w = RegExp("(^|\\s)" + a + "(\\s|$)");
  23.                         for(var b = e.getElementsByTagName(f), c = 0;c < b.length;c++)
  24.                             {
  25.                                 x=0;
  26.                                 if(a=='')x=1;
  27.                                 else if(a!='' && w.test(b[c].className))x=1;
  28.                                 if(x==1)
  29.                                     {
  30.                                         if(g)d = d.concat(GG(g, b[c]));
  31.                                         else d[N(b[c])] = b[c];
  32.                                     }
  33.                             }
  34.                     }
  35.                 return d;
  36.             }
  37.         var x=GG(r,e);
  38.         var w=[];
  39.         var i=0;
  40.         for(var p in x)
  41.             {
  42.                 w[i]=x[p];
  43.                 i++;
  44.             }
  45.         return w;
  46.     }

Forma de usarla:

Código Javascript:
Ver original
  1. //selector:
  2.     //para seleccionar todos los elementos de la clase "hola":
  3.         x=G('.hola');
  4.     //para seleccionar todos los elementos de la clase "hola" dentro de otro elemento
  5.         x=G('.hola',mielemento);
  6.     //para seleccionar los elementos con clase "hola" y "mundo":
  7.         x=G('.hola,.mundo');
  8.     //para seleccionar los elementos con clase "hola" dentro de una tabla
  9.         x=G('table .hola');
  10.     //o dentro de una lista dentro de una tabla
  11.         x=G('table ul li .hola');
  12.     //para seleccionar todos los links:
  13.         x=G('a');
  14. //uso
  15.     x[0].innerHTML='HOLA MUNDO!';

Como digo, no es la panacea. Pero si no usas ningún framework te ahorras un trabajo muy grande. Se que existen muchas funciones muy parecidas, pero siempre que las he usado hacen que una web simple se vuelva "lentilla".

Me gustaría que alguien le diese un lavado de cara para que funcionase más rápido, pero yo tengo muchas limitaciones de conocimientos en Javascript. Solo queria que seleccionase por clase y por tag, podría seleccionar muchas mas cosas... pero no queria que fuese potente en ese aspecto.

Un saludo!... espero que alguien la use!, jeje y si alguien mejora su codigo seria la bomba!.

Me gustaria saber la opinión de esos "cracks del javascript", jeje.

pd: la he probado en ie6 y funciona, así como en navegadores modernos.

Última edición por 0123; 26/12/2013 a las 10:27
  #2 (permalink)  
Antiguo 26/12/2013, 10:32
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 8 años, 2 meses
Puntos: 396
Respuesta: Aporte sencillo

Buen aporte, aunque en ES5 (EmacScript 5) puedes hacer esto:

Código Javascript:
Ver original
  1. var $$ = document.querySelectorAll.bind(document);
  2.  
  3. $$('.movieImg, .preview')[0].innerHTML = "Hola mundo";

Además se puede dar soporte al ES5 con esto para los navegadores viejos.

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.

Última edición por jonni09lo; 26/12/2013 a las 11:01
  #3 (permalink)  
Antiguo 26/12/2013, 20:20
 
Fecha de Ingreso: diciembre-2013
Mensajes: 150
Antigüedad: 5 años, 11 meses
Puntos: 8
Respuesta: Aporte sencillo

Gracias por el aporte. Hace falta mas gente colaboradora en este foro. Yo aportare algo en cuanto tenga la capacidad de hacerlo.
__________________
¿Necesitas ayuda con algún algoritmo? Si tienes dudas, entonces visita: http://algoritmosypseudocodigo.blogspot.com/.
  #4 (permalink)  
Antiguo 27/12/2013, 01:41
Avatar de 0123  
Fecha de Ingreso: noviembre-2012
Ubicación: Entre la consola, el coda y un poco de photoshop
Mensajes: 263
Antigüedad: 7 años
Puntos: 10
Respuesta: Aporte sencillo

Hola jonni09lo,

No conocia ni el nombre de EmacScript 5, jeje. Y no lo entiendo la verdad... he leido en la wikipedia que es y demas, pero no llego a comprenderlo.

Mi pregunta es... ¿esa linea de codigo funciona en IE6?, es que me has dejado K.O., jeje.
  #5 (permalink)  
Antiguo 27/12/2013, 07:55
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 8 años, 2 meses
Puntos: 396
Respuesta: Aporte sencillo

Bueno creo que dar soporte a Internet Explorer 6 es una locura (si a mi me dicen loco por dar soporte a IE8 )

Pues ECmaScript (perdón por el error de typo) es un estándar que define una sintaxis de programación próxima del lenguaje C.

Al ser Javascript un lenguaje script, significa que es un lenguaje interpretado. El código que programamos en un archivo js o dentro de las etiquetas <script> es un simple texto y una vez descargado es el navegador quien está a cargo de ejecutarlo tras interpretarlo. Por esa razón, cada navegador es quien posee su propio interprete de javascript y es susceptible ser incompleto y no entender todo lo que habría podido codificar. (De allí viene los horrores de programar para IE < 9)

Para aquellos navegadores que no soporten la especificación de ECmaScript 5 (que es la última actualmente y que pronto vendrá la sexta edición) es el "helper" que te mostré ya que ese es proveerá de las herramientas para dar soporte a funcionalidades que el navegador no posee...

Se que funciona para IE8, más no sé si funcionará para versiones anteriores a este.

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #6 (permalink)  
Antiguo 27/12/2013, 12:03
Avatar de Aijoona
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Buenos Aires
Mensajes: 779
Antigüedad: 8 años, 6 meses
Puntos: 343
Respuesta: Aporte sencillo

querySelector y querySelectorAll *no son* parte de EcmaScript.

EcmaScript solo define aspectos del lenguaje, no APIs especificas (en este caso DOM).

JavaScript es un lenguaje, DOM es un API disponible para dicho lenguaje.
__________________
blog | @aijoona
  #7 (permalink)  
Antiguo 27/12/2013, 16:34
Avatar de 0123  
Fecha de Ingreso: noviembre-2012
Ubicación: Entre la consola, el coda y un poco de photoshop
Mensajes: 263
Antigüedad: 7 años
Puntos: 10
Respuesta: Aporte sencillo

Ahh!... gracias :D

Etiquetas: funcion, html, sencillo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 21:18.