Hacer un framework

salbatore · #1 (**permalink**) 19/05/2010, 17:11

Hola foreros!,

La verdad es que no se mucho de javascript, es decir, no conozco mucho lo que es el javascript de manual, pero la verdad es que practicamente me estoy volviendo un poco loco en una web que tiene un monton de javascript. Algunos ya me conocereis por novato, mas o menos estoy todo el rato haciendo llamadas asincronas, validaciones, movimientos, clonaciones, transformaciones... Y me preguntaba.... sera posible hacer un pequeño framework.

Se que con js se pueden hacer un monton de cosas, pero muchas veces me encuentro haciendo sota caballo y rey todo el rato, jeje. Mi pregunta no es saber si es posible pues practicamente ya lo estoy niquelando, es si creeis que es mas correcto de otro modo.

Llevo como dos años con el js, y un poco mas con html y php, y creo que deberia respetar:

-Los menos id's posibles.
-Todo por class's.
-Sin absolutamente nada de codigo js en el <body></body>.
-Usar al maximo el uso del elemento activo, el this.

Bueno... creo que esas cuatro cosillas son importantes, jeje. Bueno el caso es que la web que estoy haciendo tiene cientos de formulario e interfaces que hacen todo tipo de filigranas... que por muy tontas, me encuentro con funciones en las dependiendo que clase posee el objeto actuo de un modo u otro, por lo que las funciones se hacen gigantescas... lo que no me gusta un pelo... jeje.

Asi que estas ultimas semanas he pensado hacer lo siguiente, bueno mas o menos ya esta terminado...:

Código HTML:

<div class='_ _onfocus_pintar(this.parentNode,red)'>Div con podereres magicos</div>

Todos los elementos con clase '_' son metidos en un array para adjudicarles todos los eventos. Es decir, que en todos los eventos sobre ese objeto se ejecutara una determinada funcion, por ejemplo en el ejemplo del div de arriba como tiene _onfocus_ en el evento focus se activara 'pintar' con las variables entre parentesis. Luego la funcion en particular pintar... ya se encargara de determinar las variables.

Me estoy enrollando demasiado... pero creo que se entiende... supongo que algun framework actuara de este modo... aunque nunca he usado ninguno, ;) .

PD: las validaciones no tienen problemas con meter tanta info en el class.

Bueno la pregunta del millon para los sabios: ¿os parece correcto?¿alguna pega?

Realmente llevo usando este sistema un tiempo y da gusto usarlo para imprimir elementos con eventos js en PHP... pues te ahorras poner script determinados... o id's por todas partes y demas...

¿Que pensais?... no sera por tiempo... que lo tengo a patadas... :D... ademas me lo paso bien, jeje... ah!... y no penseis que es solo para funciones sencillas... pues actualmente lo hago para validar formularios enteros, enviarlos por ajax... y recibir su informacion... de hacerlo de algun modo... ¿esta seria la forma mas chula... no?

Panino5001 · #2 (**permalink**) 19/05/2010, 21:44

Te comento mi punto de vista: meter todos esos metadatos en el atributo html class, más allá de que incumple con uno de tus objetivos, que es no ensuciar el código html, es un tanto chapucero.
Tendrías que estudiar un poco la estrategia de los frameworks. Te la resumo un poco: algunos lo que hacen es expandir las propiedades normales de los objetos html, otros lo que hacen es es añadirles una envoltura que es la que tiene las funcionalidades añadidas (indexan el objeto html dentro de un objeto mayor, que es el que tiene las propiedades y métodos que luego quieren aplicar al objeto html indexado), otros crean un objeto plantilla y luego lo usan para añadirle al objeto html las propiedades y métodos de ese objeto plantilla (una suerte de mixin).

Una vez que trabajaron con las funcionalidades a añadir a los objetos html, los frameworks se ocupan de brindar herramientas para referenciar un objeto html (necesitamos referenciarlo, es decir, ubicarlo y variabilizarlo para añadirle las funcionalidades extras, que son las que comentamos antes). Para eso, los frameworks suministran diversos soportes: selectores byClass, selectores byName, selectores xPath, etc.

Por último, los frameworks suministran funcionalidad extra como animación y soporte ajax. Y dentro de estos, algunos (los mejores:mootools, dojo) lo hacen de manera modular, mientras que otros (los peores: jquery y un poco menos prototype) lo tienen todo integrado en el núcleo, de manera que te obligan a cargar un montón de código que probablemente nunca uses para poder hacer las cosas más básicas.

Te dejo un par de enlaces para que leas y luego empieces a experimentar y puedas decidir, pero ya con una base un poco más sólida:
http://www.dustindiaz.com/javascript-no-no/
http://www.anieto2k.com/2008/09/28/c...rk-javascript/
http://www.alistapart.com/articles/javascript-mvc/
http://www.slideshare.net/Dmitry.Bar...script-library
PD: si no te conociera de otros mensajes, la frase "para los sabios" hubiera hecho que no te contestase.

salbatore · #3 (**permalink**) 19/05/2010, 23:01

Hola Panino5001,

He leido los link's y algun otro por google sobre el tema... y la verdad es que estoy un poco pensativo, jeje. Aunque tienta bastante el tener todo por clases. Cuando termine de pensarlo doy un toque.

Ah!... te sento mal lo de los sabios?... no entendi, jeje... yo simplemente miro mi codigo, luego el de cualquier respuesta con la que me ayudais... y buff... para mi sabios

. Bueno eso... que sabeis mas que yo... de hecho mira que intento responder a algunas dudas... pero como no sean muy muy faciles... me parecen que estan a años luz... todo se andara.

La razon de querer hacer el framework del modo que arriba he explicado era, no se como explicarlo bien, pero como tu has dicho "envoltura que es la que tiene las funcionalidades añadidas", eso es mas o menos lo hago bastante, pero mi pregunta era por ejemplo:

Tienes una validacion de un formulario, los input's que tengan clase "obligatory" tienen que tener un value no nulo, sino cuando se valide dara error. Es que vosotros no lo haceis de ese modo?.

Bueno... entiendo... que puedes tener script super determinados para una funcion, y que practicamente sabiendo un id o una determinada clase supongas todo el resto de las propiedades de su comportamiento, pero mi problema era que deseaba hacer un framework "sencillo" en el que simplemente añadiendo una clase... se le añadan las funciones js. Bueno... y todo esto procede del curro que tengo ahora que consiste en la creacion de muchos formulario dinamicos, en los que el usuario que los crea no quiere demasiadas complicaciones.

Pero en algo tienes razon.... toda la razon... es una chapuzilla... jeje... pero da un gusto!.

Hasta que termine el codigo y os cuento!.

Gracias como siempre!.

Panino5001 · #4 (**permalink**) 20/05/2010, 00:23

No me cayó mal, sólo que puedes ser malinterpretado y no recibir la ayuda esperada (cuando veo un post que dice sólo para expertos, como no me considero uno, lo salteo sin leerlo).
Respondiendo a tu consulta acerca de los formularios, lo que yo hago, para ganar tiempo ya que la única validación que cuenta es la que se realiza en el servidor, los valido, a veces de manera explícita con redirección y sesiones y otras vía AJAX. Lo que hago en el servidor es recorrer todas las variables POST con un bucle y verificar con in_array si alguna pertenece al array $noObligatorios, en cuyo caso uso el operador continue para saltarlo. Si en alguna de las iteraciones del bucle hay un error, uso el operador break y lanzo el error en el formulario ya sea vía redirección (creo una sesión con el mensaje de error y en el html verifico la existencia de la sesión para lanzar el error y borrarla luego para que no vuelva a lanzarse el error si el usuario recarga) o vía AJAX, analizando la respuesta cuando ejecuto el callback asociado a mi petición. Pero en ambos casos, el trabajo sucio lo hace el servidor.

Tecna · #5 (**permalink**) 20/05/2010, 08:45

Buenas,

yo no trabajo con frameworks, lo que hago es hacerme mis propias funciones para no tener que estar repitiendo código. Todo código que se repita varias veces es claramente mejorable y candidato a dar problemas. Que existan funciones gigantescas tampoco es bueno, es mejor dividir en varias y queda mas limpio. La asignación de eventos si debe hacerse en la misma función, pero lo de que todos los eventos del mismo objeto se ejecuten en la misma funcion no me parece una buena solución. La función que controla cada evento (su cancelación, propagación.. ) sólo se debería ocupar de eso y de llamar a otra que será la que realice las acciones asociadas al evento. La propiedad className sólo se debería usar para no tener que asignar estilos en el código javascript que es igual de mala práctica que asignarlos en el html (excepto en las poquísimas excepciones que pudiera ser necesario en cualquiera de los dos casos). También es mejor separar por completo el código javascript al igual que el css del html y así podrá ser reutilizado mas facilmente entre otras cosas. En cuanto a las validaciones está claro que la importante e imprescindible por seguridad es la que debe hacerse en el servidor, pero si se hace en javascript otra antes de enviar se ayuda al usuario a corregir los posibles errores antes y no se le hace perder tiempo.

salbatore · #6 (**permalink**) 20/05/2010, 13:31

Hola de nuevo...

Gracias por la ayuda!... dentro de unos dias... posteare un link con un ejemplo un poco mas preciso... aunque ya el tener todas las funcioncitas en un cajoncito me atrae las llame como las llame, jeje.

Bueno gracias a los dos.

Hasta pronto!.

oz_salva · #7 (**permalink**) 21/05/2010, 09:46

A mi no me gusta nada eso de 'ensuciar' los class de esa manera, estoy muy de acuerdo con Panino5001 salvo en el tema de que jquery es mediocre, a mi es el que más me gusta, y creo que es el más rápido con diferencia, mira como gestionan el tema de los eventos, y algún ejemplo de modelo vista controlador con jquery, así como el jquote

salbatore · #8 (**permalink**) 21/05/2010, 10:21

Hola de nuevo a todos!...

He estado pensando un poco... y teneis razon en que se ensucian un monton, jeje. Asi que me he decantado por hacerlo de un modo un poco mas elegante pero sin ser tan directo, por ejemplo acabo de terminar lo siguiente:

Código HTML:

Ver original<form class='validation asynchronous'></form>

Con el js... comprueba si es tiene validation, si lo tiene valida sus elementos y si es asynchronous pues lo envia medio ajax.

Bueno... hasta pronto!...

Como siempre super gracias!.