Objetos como espacio de nombres

Categories:

Hay ocasiones en  que al momento de incluir otra librería – o código – en JavaScript, algunas variables o funciones tienen el mismo nombre y hay que hacer algunos ajustes al código (cambiar el nombre de las funciones o variables) para determinar cómo se va a ejecutar el código (cuál es el código que se va a usar y, si se van a utilizar ambos, cambiar el nombre de alguna función o variable y volverla a asociar con alguna acción del usuario o del código que se esté ejecutando en ese momento).

Una forma para prevenir o corregir esta situación es utilizar un objeto para envolver el código. De esta manera, para poder utilizar las variables o funciones, primero se tiene que hacer referencia al objeto y después mandar llamar la funcionalidad requerida.

Ejemplo:

Función  en JavaScript que se utiliza para validar el nombre de un usuario.

html

<input type='text' id='nombre' name='nombre' 
onblur='validar_nombre()' />

JavaScript

function validar_nombre() { 
    var input_nombre = document.getElementById('nombre')
    var nombre_valido = false    
    var validarNombreCompleto =  /^[a-zA-Z -]{5,}$/
  	if (!validarNombreCompleto.test(input_nombre.value)) {
  		input_nombre.style.border = "1px solid #C66"
      nombre_valido = false
  	} else {
  		input_nombre.style.border = "1px solid #6C6"
      nombre_valido = true
  	}	
    return nombre_valido
}

Función que utiliza un objeto llamado dummy  como espacio de nombres.

Dentro del espacio de nombres pueden existir más funciones o variables.

html

<input type='text' id='nombre' name='nombre' 
onblur='dummy.validar_nombre()' />

JavaScript

var dummy = { 
  validar_nombre: function() { 
    var input_nombre = document.getElementById('nombre')
    var nombre_valido = false
    var validar_nombre_completo = /^[a-zA-Z -]{5,}$/ 
    if (!validar_nombre_completo.test(input_nombre.value)) { 
      input_nombre.style.border = "1px solid #C66" 
      nombre_valido = false
    } else { 
      input_nombre.style.border = "1px solid #6C6" 
      nombre_valido = true
    } 
   return nombre_valido 
  } 
}

¿Qué sucede si el objeto ya estaba definido anteriormente?

Para evitar que se sobrescriba el objeto lo que podemos hacer es asignar al objeto el mismo valor si ya está definido y, si no está definido asignamos un objeto nuevo.

JavaScript

/*
Si ya se está utilizando el objeto dummy se almacena 
en la misma variable para evitar que se sobrescriba
 y se pierda el código que estaba definido. 
*/
 var dummy = dummy || {}
/*
Ya que se definió como objeto, ya sea que 
se utilizó un objeto previamente definido o que 
se declaró un nuevo objeto se le asocia la funcionalidad.
*/
dummy.validar_nombre = function() { 
    var input_nombre = document.getElementById('nombre')
    var nombre_valido = false
    var validar_nombre_completo = /^[a-zA-Z -]{5,}$/ 
    if (!validar_nombre_completo.test(input_nombre.value)) { 
      input_nombre.style.border = "1px solid #C66" 
      nombre_valido = false
    } else { 
      input_nombre.style.border = "1px solid #6C6" 
      nombre_valido = true
    } 
   return nombre_valido 
}

Al trabajar con objetos directamente no es necesario tener definida una clase y crear una instancia.
Además de que se puede agregar más funcionalidad al objeto si es necesario.

En caso de que se quiera quitar funcionalidad (métodos) al objeto en el momento de que se está ejecutando el script se puede hacer con delete.

JavaScript

delete dummy.validar_nombre