Creación de un Componente

Uno de los inconvenientes de usar variables y funciones globales es que todos los elementos de la aplicación pueden modificar esos elementos. Eso significa que algún programa, por error, podría modificar los datos sin hacer todas las validaciones que requiere el sistema. Podría eliminar o modificar datos de forma equivocada. Además, como el cambio se puede hacer en cualquier parte del programa, detectar y resolver este tipo de errores es muy díficil.

Declarando un scope

En Javascript típicamente se maneja un alcance a nivel de función. Antes de ES2015, esta era la única opción. Eso significa que para limitar el acceso a una variable es necesario definir una función.

El siguiente código crea un arreglo mediante una función anónima. Ese arreglo ya no es accesible desde afuera de la función.

(function(){ var cities = [ { "id" : "1", "nombre" : "Bogota" }, { "id" : "2", "nombre" : "Cali" }, { "id" : "3", "nombre" : "Medellin" } ]; })()

Creando funciones con un closure

Dentro de una función, se pueden crear otras funciones. Estas funciones "heredan" las variables definidas en el scope de la función que las contiene. Esto se denomina un "closure".

(function(){ var cities = [ { "id" : "1", "nombre" : "Bogota" }, { "id" : "2", "nombre" : "Cali" }, { "id" : "3", "nombre" : "Medellin" } ]; function addCity( city ) { cities.push(city); } })()

El problema de esta implementación es que la función addCity puede manipular el arreglo, pero no se puede invocar desde afuera.

Creando una fábrica para el componente

Para poder usar las funciones definidas en un "scope" es necesario que la función que define el scope retorne un objeto con esas funciones.

Por ejemplo:

var cityModule = (function(){ var cities = [ { "id" : "1", "nombre" : "Bogota" }, { "id" : "2", "nombre" : "Cali" }, { "id" : "3", "nombre" : "Medellin" } ]; // crea un objeto vacio var cityModule = {}; // le agrega funciones cityModule.addCity = function ( city ) { cities.push(city); } return cityModule; })()

Actividades

  • Cree un componente que permita manipular el arreglo de ciudades: Obtener un listado de ciudades, buscar una ciudad por id, agregar ciudad, modificar ciudad y eliminar ciudad.

results matching ""

    No results matching ""