JavaScript es un lenguaje muy dinámico que nos ofrece un montón de maneras de trabajar con él, incluso combinarlas. A mi la que me parece en la actualidad la mejor manera es usar un framework MVC, MVR, MV?, como son Backbone, EmberJS o Mozart. Por otro lado si hablamos de una web o una aplicación muy pequeña y sencilla, como por ejemplo webs de 3 o 4 páginas de información y poco más, considero interesante plantear simplemente el uso del Javascript Orientado a Eventos sin mucho más.
¿De qué trata?
Esta manera de programar se basa en poner la fuerza de nuestra web en los eventos, la estructura básica serían una serie de funciones que son llamadas por una serie de eventos (del DOM o generados por acciones que pasan en nuestro JS). Realmente es en lo que se basa JavaScript, que aunque algunos piensan que está orientado a objetos, realmente está basado en objetos y más bien orientado a eventos.
Al hacer ésto separamos toda la pequeña lógica de nuestra web y podemos hacer un montón de funciones modulares, además de ser totalmente independientes el evento de la función en si. Nos aporta una mayor facilidad para modificar y mantener la web además de poder reaprovechar fácilmente la mayoría de las funciones para otras pequeñas webs.
De manera que este archivo de eventos sería una versión muy simplificada de lo que conocemos como controlador en Java y las funciones separadas podrían llegar a interpretarse como una simplificación de un modelo, sin querer ponerlos por igual pero como ejemplo identificativo de lo que estamos hablando.
Por ejemplo cuando tocas en un elemento del menú se dispararía un evento tap o click que al capturarlo llamaríamos a la función dedicada a navegar. Cuando añades un elemento en una lista se dispararía un evento de ítem añadido y al capturarlo se muestra en otro sitio más ese ítem, etc.
¿La estructura?
En mi opinión, lo ideal para este tipo de planteamiento es un archivo en el que nos vamos a dedicar simplemente a capturar eventos y a llamar a las diferentes funciones. Este archivo podría tener una estructura parecida a la de este ejemplo.
// FIILE Events.js
// Global variables
var $window = $(window);
var $document = $(document);
var $wrapper = $('#wrapper'); // example div id="wrapper"
var $sidebar = $('#sidebar'); // example aside id="sidebar"
var $footer = $('#footer'); // example footer id="footer"
var $menu = $('#menu'); // example nav id="menu"
var List1 = [];
var List2 = [];
// etc..
// Events
(function(){
$menu.find('li').on('click', menuAction);
$('#specialItem').on('mouseenter', specialAction);
$sidebar.on('mouseleave', toggleSidebar);
$sidebar.on('mouseenter', toggleSidebar);
// etc...
})();
Para las funciones puedes hacer por cada función un archivo distinto sin miedo a tener muchos archivos pero evitando repeticiones de código, además deberíamos hacerlos lo más modulares posibles de manera que cogiendo esa función en un contexto distinto funcionara igual de bien.
// FIILE specialAction.js
function specialAction(){
console.log('Awesome result');
}
// FIILE toggleSidebar.js
function toggleSidebar(e){
$el = $(e.currentTarget);
$el.toggleClass('sidebar-hide');
}
Lógicamente los códigos de estos ejemplos son muy simples y poco útiles.
Si miramos nuestro directorio de archivos debería tener un aspecto similar a este
|-- js
|-- events.js
|
|-- min
| |-- javascript.min.js
|
|-- functions
| |-- menuAction.js
| |-- specialAction.js
| |-- toggleSidebar.js
| |-- etc.....js
Cosas a tener en cuenta
Como he comentado antes, deberíamos tener muy en cuenta la modularidad de nuestras funciones. Es mejor varias funciones que hagan cosas sencillas y unirlas en otras más generales como hemos visto en el ejemplo.
Por supuesto al final de todo vamos a concatenar, minificar y ofuscar todo así que no hay problema en usar 200 ficheros pequeños para funciones.
Siempre que podamos debemos encapsular el código. Aunque es uno de los puntos flacos de esta manera de trabajar, como comentaré más adelante, podríamos encapsular las funciones pequeñas, en cambio las más generales no.
Conclusiones
Esta manera de hacer las cosas tiene una serie de puntos fuertes y otros no tanto:
Puntos débiles:
– Para la gente que viene de otros entornos de programación muy distintos, creo que les va a gustar más bien poco por lo que he visto de la gente que suele trabajar con PHP, C# etc..
– El código está muy poco encapsulado.
– Para webs grandes no lo veo viable.
Puntos fuertes:
– Es muy sencillo de usar si estás acostumbrado a trabajar en web.
– Mucho más fácil de implementar que otros modelos.
– Sencillo y rápido para webs pequeñas.
– Fácil de mantener a pequeña escala.
– Al ser funciones modulares si dentro de un tiempo las mejoras son fáciles de actualizar sin variar el funcionamiento.
Finalmente:
Finalmente reiterar que lo veo muy interesante para pequeñas webs que sabes que no van a crecer demasiado, por ejemplo portafolios, webs de aplicaciones para dispositivos, webs temporales etc..
Espero leer vuestra opinión al respecto, que se que habrá de muchos tipos muy variados y si alguno lo prueba que me comente sus conclusiones.