Comunidad de diseño web y desarrollo en internet online

MVC y programación orientada a objetos en Javascript

Cada vez los programadores tenemos más y mejores herramientas para crear sistemas más potentes; no sólo novedosas tecnologías (como AJAX), sino también mejores patrones para escribir y organizar nuestro código. Esto hace que nuestras aplicaciones puedan volverse cada vez más escalables.

En PHP tenemos frameworks MVC como Codeigniter y otros más complejos como Symfony. Pero ¿Qué pasa con Javascript? cada día hay más aplicaciones que están basadas en Javascript (como Gmail) o tienen cientos de líneas de código JS. Y aunque usamos Jquery y otros frameworks, nuestro código termina siendo un sin fin de eventos y funciones globales o anónimas, que usan variables globales o HTML oculto para comunicarse entre sí.

En estos tips les daré una idea de cómo estructurar el Javascript de mejor forma, también usaremos Jquery Address, y otros plugins.

MVC (Modelo Vista Controlador) en Javascript con jQuery UI


Para comenzar utilizaré los "tabs" de Jquery UI para simular una interfaz que nos sirva de base.

Lo único que hay que hacer es descargar Jquery UI, en un HTML en blanco copiamos nuestras bibliotecas de JS y CSS y copiamos el codigo del primer ejemplo que es muy sencillo, el resultado debe quedar similar a éste:

Código :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>MVC en Javascript, parte 1: Controladores</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <base href="http://localhost/lab/" />
      <link rel="stylesheet" type="text/css" href="css/cupertino/jquery-ui-1.8.7.custom.css" />
      <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
      <script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
    <script type="text/javascript">         
         $(document).ready(function () 
         {         
            $( "#tabs" ).tabs();
         });
      </script>
  </head>
  <body>
      <div class="demo">

         <div id="tabs">
            <ul>
               <li><a href="#ruylopez">Ruy Lopez</a></li>
               <li><a href="#siciliana">Siciliana</a></li>
               <li><a href="#gambitoderey">Gambito de rey</a></li>
            </ul>
            <div id="ruylopez">
               <p>En ajedrez se llama apertura española o apertura Ruy López a una apertura de ajedrez que surge tras los siguientes movimientos (en notación algebraica):</p>
               <p><strong>1.e4 e5 2.Cf3 Cc6 3.Ab5</strong></p>
               <p>Está considerada dentro de las aperturas abiertas. Se la conoce como apertura Ruy López, debido a que fue el ajedrecista español Ruy López de Segura quien la popularizó en el siglo XVI. Ha sido objeto de muchos análisis por parte de los teóricos del juego y sus variantes son numerosas.</p>
               <p>En general, se considera que da a las piezas blancas una ventaja ligera y duradera.</p>
            </div>
            <div id="siciliana">
               <p>En ajedrez, se llama Defensa siciliana a la apertura  que resulta después de las jugadas iniciales 1.e4 c5. Debido a que las blancas abren el juego con el peón de rey y las negras no contestan con la misma jugada, se la considera una apertura semiabierta.</p>
               <p>La Defensa siciliana (ECO B20-B99) es, quizás, la que más posibilidades brinda para ganar contra 1.e4. Por supuesto, esta afirmación sólo tiene sentido entre los jugadores de elite, pero, gracias a ellos, los aficionados la consideran una gran defensa. Se trata de una de las defensas más estudiadas, todo un «laberinto» muy difícil de desentrañar, y muy engañoso. La defensa siciliana tiene muchas variantes forzadas que, si no se juegan con precisión por parte de quien las plantea, pueden llevar a la derrota.</p>
               <p>La Defensa siciliana debe su nombre al hecho de que en el siglo XVIII Jacob Henry Sarratt divulgase que el inventor de la defensa era el siciliano Pietro Carrera. Se la consideró una defensa menor hasta que Luis Charles de la Bourdonnais la empleó con éxito en su encuentro contra Alexander McDonnell en 1834. Su espaldarazo definitivo lo obtuvo de los grandes campeones de la segunda mitad del siglo XX.</p>
            </div>
            <div id="gambitoderey">
               <p>El gambito de rey es una apertura de ajedrez. Se caracteriza por los movimientos (en notación algebraica): <strong>1.e4 e5 2.f4</strong></p>
               <p>En realidad, tras estos movimientos existen multitud de aperturas y variantes, pero históricamente se engloban bajo la denominación común de gambito de rey.</p>
               <p>El movimiento se caracteriza por el ofrecimiento del peón al adversario; éste peón está del lado del rey (de ahí parte del nombre de la apertura). Las blancas ofrecen ese peón a cambio del dominio e iniciativa en el juego. Dentro del ajedrez actual se considera una línea minoritaria y muy arriesgada de jugar. Por otro lado era una de las aperturas más frecuentes en el siglo XIX por lo que se la considera, con un estilo de juego especialmente agresivo, el paradigma del ajedrez romántico. Como nota principal es la apertura jugada en La Inmortal.</p>
            </div>
         </div>

      </div>
  </body>
</html>



Bien, ya tenemos una interfaz útil y simple de navegar, pero nos faltan varias cosas importantes:

Primero, supongamos que hay un amigo a quien queremos enseñarle la defensa siciliana, aunque hagamos clic en la pestaña "siciliana" la URL del navegador seguirá siendo la misma. Por lo tanto no nos quedaría de otra que pasarle el link a nuestro amigo y pedirle que haga clic en la pestaña, parece sencillo, pero ¿Qué pasaría si el contenido estuviera muy escondido?

Para resolver el primer problema usaremos Jquery Address

Añadimos la siguiente cabecera a nuestro HTML:

Código :

<script type="text/javascript" src="js/jquery.address.min.js"></script>


Y el siguiente código Javascript, debajo de Tabs.tabs() (ve el código fuente del primer ejemplo):

Código :

   $('#tabs a').click(function()
   { 
      url = $(this).attr('href').replace(/^.*#/, '');
      
      $.address.value(url);
   });


Ejecutamos de nuevo el ejemplo (pueden verlo aquí) y ahora nos damos cuenta que la dirección del navegador cambia cada vez que hacemos clic en una pestaña. En otras palabras, cada pestaña tiene ahora una URL diferente que nos permite guardarla en favoritos o compartirla, también nos permite usar los botones "atrás" y "adelante" de nuestro navegador.

Aunque para que todo esto funcione nos hace falta algo más, Jquery address tiene un callback llamado "change" que se activa cada vez que se cambia la URL ya sea con una acción del navegador o usando $.address.value(url); usaremos este callback para completar la primera parte del ejemplo:

Código :

$.address.change(function(event)
{  
   tabUrl = event.value.replace(/^\//, '');
   Tabs.tabs("select", tabUrl);
});


Muchísimo mejor, combinando el callback de Jquery Address con el método Select de Jquery UI el navegador nos envía a la pestaña correspondiente aún si usamos los botones atrás o adelante o compartimos la URL a un amigo.

Código completo de MVC con Javascript y jQuery UI


Código completo (pruébalo o descárgalo):

Código :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>MVC en Javascript, parte 1: Controladores</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <base href="http://localhost/lab/" />
      <link rel="stylesheet" type="text/css" href="css/cupertino/jquery-ui-1.8.7.custom.css" />
      <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
      <script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
      <script type="text/javascript" src="js/jquery.address.min.js"></script>
    <script type="text/javascript">         
         $(document).ready(function () 
         {   
            var Tabs = $( "#tabs" );
            
            Tabs.tabs();
            
            $('#tabs a').click(function()
            { 
               url = $(this).attr('href').replace(/^.*#/, '');
               
               $.address.value(url);
            });

            $.address.change(function(event)
            {  
               tabUrl = event.value.replace(/^\//, '');
               Tabs.tabs("select", tabUrl);
            });
            
         });
      </script>
  </head>
  <body>
      <div class="demo">

         <div id="tabs">
            <ul>
               <li><a href="#ruylopez">Ruy Lopez</a></li>
               <li><a href="#siciliana">Siciliana</a></li>
               <li><a href="#gambitoderey">Gambito de rey</a></li>
            </ul>
            <div id="ruylopez">
               <p>En ajedrez se llama apertura española o apertura Ruy López a una apertura de ajedrez que surge tras los siguientes movimientos (en notación algebraica):</p>
               <p><strong>1.e4 e5 2.Cf3 Cc6 3.Ab5</strong></p>
               <p>Está considerada dentro de las aperturas abiertas. Se la conoce como apertura Ruy López, debido a que fue el ajedrecista español Ruy López de Segura quien la popularizó en el siglo XVI. Ha sido objeto de muchos análisis por parte de los teóricos del juego y sus variantes son numerosas.</p>
               <p>En general, se considera que da a las piezas blancas una ventaja ligera y duradera.</p>
            </div>
            <div id="siciliana">
               <p>En ajedrez, se llama Defensa siciliana a la apertura  que resulta después de las jugadas iniciales 1.e4 c5. Debido a que las blancas abren el juego con el peón de rey y las negras no contestan con la misma jugada, se la considera una apertura semiabierta.</p>
               <p>La Defensa siciliana (ECO B20-B99) es, quizás, la que más posibilidades brinda para ganar contra 1.e4. Por supuesto, esta afirmación sólo tiene sentido entre los jugadores de elite, pero, gracias a ellos, los aficionados la consideran una gran defensa. Se trata de una de las defensas más estudiadas, todo un «laberinto» muy difícil de desentrañar, y muy engañoso. La defensa siciliana tiene muchas variantes forzadas que, si no se juegan con precisión por parte de quien las plantea, pueden llevar a la derrota.</p>
               <p>La Defensa siciliana debe su nombre al hecho de que en el siglo XVIII Jacob Henry Sarratt divulgase que el inventor de la defensa era el siciliano Pietro Carrera. Se la consideró una defensa menor hasta que Luis Charles de la Bourdonnais la empleó con éxito en su encuentro contra Alexander McDonnell en 1834. Su espaldarazo definitivo lo obtuvo de los grandes campeones de la segunda mitad del siglo XX.</p>
            </div>
            <div id="gambitoderey">
               <p>El gambito de rey es una apertura de ajedrez. Se caracteriza por los movimientos (en notación algebraica): <strong>1.e4 e5 2.f4</strong></p>
               <p>En realidad, tras estos movimientos existen multitud de aperturas y variantes, pero históricamente se engloban bajo la denominación común de gambito de rey.</p>
               <p>El movimiento se caracteriza por el ofrecimiento del peón al adversario; éste peón está del lado del rey (de ahí parte del nombre de la apertura). Las blancas ofrecen ese peón a cambio del dominio e iniciativa en el juego. Dentro del ajedrez actual se considera una línea minoritaria y muy arriesgada de jugar. Por otro lado era una de las aperturas más frecuentes en el siglo XIX por lo que se la considera, con un estilo de juego especialmente agresivo, el paradigma del ajedrez romántico. Como nota principal es la apertura jugada en La Inmortal.</p>
            </div>
         </div>

      </div>
  </body>
</html>



Ahora, ¿Qué pasa si queremos usar AJAX para traernos el contenido de la pestaña o algún contenido específico dentro de una pestaña, cargar un tablero interactivo o cualquier otra opción usando todo el poder de Javascript?

En el siguiente tip, hablaré de ello :)

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate