Programación Orientado a Objetos con JavaScript

Algunos desarrolladores no usan JavaScript con Programación Orientada a Objetos (POO)  cuando crean aplicaciones, pero lo cierto es que mediante este enfoque de programación nos podemos ahorrar mucho tiempo y hacer nuestro código reutilizable para futuras aplicaciones. Veamos en este tutorial como hacer esto siguiendo un ejemplo práctico.

Creando la Clase

Vamos a crear la clase Temporizador. El siguiente código muestra como hacerlo:

// Declarando la clase "Temporizador"
var Temporizador = function()
{
    // ....        
    // Cuerpo de la clase
    // ....
}

Agregando Propiedades Públicas

Para agregar propiedades a la clase debemos usar la siguiente sintaxis, dentro de cuerpo de la clase, como se muestra a continuación:

// Declarando clase "Temporizador"
var Temporizador = function()
{        
    // Propiedad: Frecuencia de tiempo en milisegundos
    this.Intervalo = 1000;
    
    // Propiedad: Habilitar ó no el temporizador 
    this.Activo = new Boolean(false);
}

Como puedes apreciar hemos creado 2 propiedades (Intervalo y Activo) a la clase Temporizador y asignamos valores por defecto.

Agregar Eventos (si hubiera)

Ahora quizás deseemos agregar eventos a la clase. Para nuestra clase Temporizador vamos agregar el evento "Ejecucion" (que acción realizará el temporizador) que se ejecutará después de cada "intervalo". Los eventos se agregan de la misma forma que las propiedades públicas.

// Declarando clase "Temporizador"
var Temporizador = function()
{        
    // Propiedad: Frecuencia de tiempo en milisegundos
    this.Intervalo = 1000;
    
    // Propiedad: Habilitar ó no el temporizador 
    this.Activo = new Boolean(false);
    
    // Evento: Accion para el temporizador
    this.Ejecucion;
}

Agregar Variables Privadas

Necesitamos 2 variables privadas en la clase una para identificar el temporizador y la otra para instanciar la clase. Las variables privadas se agregan usando la palabra reservada ‘var’ antes del nombre de la variable.

// Declarando clase "Temporizador"
var Temporizador = function()
{        
    // Propiedad: Frecuencia de tiempo en milisegundos
    this.Intervalo = 1000;
    
    // Propiedad: Habilitar ó no el temporizador 
    this.Activo = new Boolean(false);
    
    // Evento: Accion para el temporizador
    this.Ejecucion;
    
    // Variable privada: Mantener el identificador del temporizador
    var temporizadorId = 0;
    
    // Variable privada: Mantener la instancia de esta clase 
    var instancia;
}

Agregar Funciones

Las funciones las podemos agregar de la misma forma que las propiedades públicas. Para nuestro temporizador necesitaremos 2 funciones, la primera llamada "Iniciar" para iniciar el temporizador y la segunda función "Detener" que detendrá el temporizador.

// Declarando clase "Temporizador" Declaring class "Timer"
var Temporizador = function()
{     
    // Propiedad: Frecuencia de tiempo en milisegundos
    this.Intervalo = 1000;
	
    // Propiedad: Habilitar ó no el temporizador 
    this.Activo = new Boolean(false);
	
    // Evento: Accion para el temporizador
    this.Ejecucion;
	
    // Variable privada: Mantener el identificador del temporizador
    var temporizadorId = 0;
	
    // Variable privada: Mantener la instancia de esta clase 
    var instancia;
	
    // Funcion: Inicia el temporizador
    this.Iniciar = function()
    {
	this.Activo = new Boolean(true);

        instancia = this;
	if (instancia.Activo)
	{
	    instancia.temporizadorId = setInterval(
	    function()
	    {
		instancia.Ejecucion(); 
	    }, instancia.Intervalo);
	}
    };
	
    // Funcion: Detener el temporizador
    this.Detener = function()
    {            
	instancia.Activo = new Boolean(false);
	clearInterval(instancia.temporizadorId);
    };
};

Puedes ver que se ha incorporado de funcionalidad al temporizador utilizando la funcion setInterval que se ejecuta una y otra vez en intervalos de x segundos, y la funcion clearInterval elimina la ejecución de sentencias asociadas a un intervalo indicadas con el método setInterval. Nuestra clase ahora esta lista para usarse.

Usando la Clase

Para usar la clase lo primero que debemos hacer es crear una instancia de Temporizador.

var objeto = new Temporizador();

Ahora asignamos valores a las propiedades si fuera necesario.

objeto.Intervalo = 300;

Asociamos código al evento mediante una función.

objeto.Ejecucion= mi_funcion;

function mi_funcion()
{
    // Lo que deseemos aqui
}

Ahora llamamos a la función "Iniciar" para iniciar el Temporizador.

objeto.Iniciar();

Para detener el temporizador en cualquier momento hacemos uso de la función "Detener".

objeto.Detener();

Ejemplo práctico final

<!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>Clase Temporizador en JavaScript</title>

<script language="javascript" type="text/javascript">
<!--
   // Declarando clase "Temporizador" 
   var Temporizador = function()
   {     
	// Propiedad: Frecuencia de tiempo en milisegundos
	this.Intervalo = 1000;
	
	// Propiedad: Habilitar ó no el temporizador 
	this.Activo = new Boolean(false);
	
	// Evento: Ejecucion
	this.Ejecucio
n;
	
	// Variable privada: Mantener el identificador del temporizador
	var temporizadorId = 0;
	
	// Variable privada: Mantener la instancia de esta clase 
	var instancia;
	
	// Funcion: Inicia el temporizador
	this.Iniciar = function()
	{
		this.Activo = new Boolean(true);

		instancia = this;
		if (instancia.Activo)
		{
			instancia.temporizadorId = setInterval(
			function()
			{
				instancia.Ejecucion(); 
			}, instancia.Intervalo);
		}
	};
	
	// Funcion: Detener el temporizador
	this.Detener = function()
	{            
		instancia.Activo = new Boolean(false);
		clearInterval(instancia.temporizadorId);
	};
   };
	
   // puesta en marcha de nuestra clase Temporizador
   var contador = 0;
   var objeto = new Temporizador();
   objeto.Intervalo = 50;
   objeto.Ejecucion = proceso;
   objeto.Iniciar();
	
   function proceso()
   {
      contador++;
      document.getElementById("contenido").innerHTML = contador;
		
      if (contador == 200) 
      {
         objeto.Detener();
      }
   }
	
//-->
</script>

</head>
<body>
   <div id="contenido">
   </div>
</body>
</html>

Vía Daily Coding