Trasteando con el DOM 5: objetos y escenarios

Cómo programar de forma ordenada mediante objetos

Tarsila do Amaral

archivado en: JavaScript / 6 octubre, 2014 / taller:

Seguimos con esta serie de javaScript para diseñadores. Esta entrada será teórica y quizás un tanto aburrida, pero espero que nos sirva para afianzar qué es un objeto y cómo programar de forma más ordenada.

Hasta ahora estábamos escribiendo todo el código js en funciones y así lo podemos hacer si solo utilizamos este lenguaje para algunos detalles de una página web, como validar un formulario o programar un carrusel de imágenes. Pero si estamos haciendo algo más complejo, como una aplicación web que puede tener miles de líneas, esta manera enseguida nos conduce a un pantano farragoso, imposible de mantener, conocido como código espagueti. La solución es usar un framework, como angular o backbone, o, igual de válido, trabajar con objetos.

En javaScript hay varias maneras de construir un objeto. Una de las principales es mediante la notación literal y otra es mediante una función constructora, que es la que me interesa que veamos ahora de forma sencilla, pero con cierto detalle.

Para entender qué son estas funciones constructoras podemos establecer una analogía con la teoría de las ideas de Platón. Este antiguo filósofo griego decía, quizás de forma metafórica, que todas las cosas eran una copia de unos objetos ideales que denominó ideas. Así, por ejemplo, existiría un caballo ideal que reúne todas las cualidades del caballo, todo lo que puede ser un caballo. Y luego existirían cada uno de los caballos que hay en la Tierra. Cada vez que nace un caballo es como si se creara una copia en concreto del caballo ideal. Dicho en javaScripteano:

var caballo = function() {

this.color;

var comer = function() {

zamparHierba;

}

}

var caballoEnConcreto = new Caballo();

caballoEnConcreto.color = "marrón";

Es decir, caballoEnConcreto es un objeto que es una instancia del objeto caballo y, por lo tanto, tiene todos sus métodos y propiedades. Para obtener esa instancia usamos el operador new: miCaballoEnConcreto es un nuevo Caballo.

Disgresión: todo es un objeto

En javaScript hay dos clases de cosas o «tipos». Unos son los llamados tipos primitivos, que son meros datos asociados a una variable. En función del tipo de datos que almacenan pueden ser tipos primitivos de la clase:

  • string: cadenas de texto.
  • number: números.
  • boolean: un valor booleano true o false.
  • null: nulos;
  • undefined: sin definir.

Por ejemplo, esto sería un tipo primitivo string:

var cadena = "Me encantan los gatos";

Las otras cosas que hay en javaScript son los tipos por referencia, que son objetos instanciados de una serie de superobjetos, que son:

  • array,
  • function,
  • date,
  • error,
  • RegExp,
  • y Object.

Así, por ejemplo, cuando declaramos un array en js:

var miArray = ['protones', 'neutrones', 'gluones'];

En realidad es como si estuviéramos escribiendo esto:

var miArray = new Array();

miArray = ['protones', 'neutrones', 'gluones'];

Bueno, pues ahora que sabemos algo mejor qué es un objeto en javaScript, volvamos al problema que planteaba al inicio de esta entrada: cómo organizar el código para que no sea un caos tremendo.

Objetos y escenarios

Hay tropecientas mil maneras de trabajar el DOM con javaScript sin un framework. La que voy a explicar ahora es la que más me convence y la que me ha demostrado ser más útil y escalable, pero puede haber otras igual de válidas o más. Y tras esta advertencia, al lío.

Normalmente, en una aplicación web no tienes ni una línea de HTML previa en el body, sino que vas construyendo las pantallas con javaScript. Como mucho, si es muy compleja, es recomendable emplear algún sistema de plantillas, como handelbars. En estos casos, a mí me resulta cómodo crear un objeto para cada escenario de la aplicación, es decir, para cada pantalla. Por ejemplo, si estuviéramos haciendo un carrito de la compra podríamos tener dos pantallas, una para mostrar los artículos y otra para pagarlos, y esto podríamos estructurarlo así:

/* Esta es la función de entrada en la aplicación, que llamamos desde un onload en el tag del body. Se pone al final de todo el código */

function init() {

// Declaramos un objeto instancia del primer escenario y llamamos a su método init

var carrito = new CarritoCompra();

carrito.init();

}

El escenario, es decir, el objeto CarritoCompra tiene al menos cuatro métodos: uno de entrada (init), otro para eliminar, o desbindear como se dice en argot, las escuchas, otro para pintar el HTML y un cuarto para bindear las escuchas una vez esté pintado el HTML.

var CarritoCompra = function() {

this.unbindEscuchas = function() {

/* Quitamos las escuchas. */

},

this.init = function() {

/* Pintamos y bindeamos */

this.pintaEscenario();

this.bindEscuchas();

},

this.pintaEscenario = function() {

/* Aquí pintaríamos la página con los métodos que vimos en entradas anteriores, como innerHTML. */

},

this.bindEscuchas = function() {

/* Y aquí pondríamos las escuchas, una de las cuales nos llevaría al siguiente escenario, pero antes de cambiar de escenario, quitamos estas escuchas y reseteamos este objeto definiéndolo como null */

this.unbindEscuchas();

carrito = null;

var pagarArticulos = new Pagos();

pagarArticulos.init();

}

};

Bueno, me ha quedado una entrada bastante espesa y no sé si es peor el remedio que la enfermedad xD, pero espero que en las próximas entradas de esta serie, todo este tinglado quede un poco más claro y además veremos cómo hacerlo mejor mediante clases y prototipos. En cualquier caso, seguro que sí será seguro es más divertido. De momento vamos a dejarlo aquí.

|| Tags: ,

valoración de los lectores sobre Trasteando con el DOM 5: objetos y escenarios

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (2 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.