Crear librería de JavaScript

From Wiki de Caballero
Revision as of 17:49, 22 May 2014 by Felipe (talk | contribs)
Jump to navigation Jump to search

Cómo crear una librería de JavaScript sencilla

Agregando la librería al alcance global (global scope) desde la definición de la librería

Un ejemplo de una librería sencilla (Expandir para ver ejemplo documentado):

(function(w) {
	var variable1 = 'unoA';
	var variable2 = 'dosB';
	var variable3 = {
		sub1: 'a',
		sub2: 'b'
	};
	function hola() {
		alert('hola');
	}
	;
	w.lib = {};
	w.lib.variable2 = variable2;
	w.lib.variable3 = variable3;
	w.lib.hola = hola;
})(window);
// *********************************
//	Ejecución
// *********************************
lib.hola();
alert(lib.variable2);
(							// Lo que está adentro de los parentesis solo existe adentro
		function(w) {
			var variable1 = 'unoA';		// Usando var se evita que la variable1 exista en el espacio global
			var variable2 = 'dosB';
			var variable3 = {
				sub1: 'a',
				sub2: 'b'
			};
			function hola() {
				alert('hola');
			}
			;
			w.lib = {};			// Se crea un objeto lib para que se le puedan agregar parámetros luego
			w.lib.variable2 = variable2;	// Se agrega variable2 al objeto global lib
			w.lib.variable3 = variable3;	// Se agrega variable3 al objeto global lib
			w.lib.hola = hola;		// Se agrega función hola al objeto global lib
		}
)(window);						// window se envía como parámetro a la función, no es extricamente necesario

// *********************************
//	Ejecución
// *********************************
lib.hola();						// Se accede desde afuera de la librería a la función hola
alert(lib.variable2);					// Se accede desde afuera de la librería a la variable2

// *********************************
//	Errores
// *********************************
alert(variable1);					// Error, variable1 no definida
alert(lib.variable1);					// Muestra "undefined"

Guardando la librería en una variable

Un ejemplo de una librería sencilla (Expandir para ver ejemplo documentado):

var lib = function() {
	var variable1 = 'unoA';
	var variable2 = 'dosB';
	var variable3 = {
		sub1: 'a',
		sub2: 'b'
	};
	function hola() {
		alert('hola');
	}
	;
	return {
		variable2: variable2,
		variable3: variable3,
		hola: hola
	}
}();

// *********************************
//	Ejecución
// *********************************
lib.hola();
alert(lib.variable2);

// *********************************
//	Errores
// *********************************
alert(variable1);
alert(lib.variable1);
var lib = function() {				// Se hace una función que retorna la librería
	var variable1 = 'unoA';			// Usando var se evita que la variable1 exista en el espacio global
	var variable2 = 'dosB';
	var variable3 = {
		sub1: 'a',
		sub2: 'b'
	};
	function hola() {
		alert('hola');
	}
	;
	return {
		variable2: variable2, 		// Se agrega variable2 al objeto a retornar
		variable3: variable3, 		// Se agrega variable3 al objeto a retornar
		hola: hola			// Se agrega función hola al objeto a retornar
	}
}();						// window se envía como parámetro a la función, no es extricamente necesario

// *********************************
//	Ejecución
// *********************************
lib.hola();					// Se accede desde afuera de la librería a la función hola
alert(lib.variable2);				// Se accede desde afuera de la librería a la variable2

// *********************************
//	Errores
// *********************************
alert(variable1);				// Error, variable1 no definida
alert(lib.variable1);				// Muestra "undefined"

Agregar funcionalidades a jQuery (plugin)