Crear librería de JavaScript

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"

Referencias

• JavaScript best practices - Avoid globals, esta página trata varios temas de JavaScript relevantes y está interesante para leer. La parte seleccionada explica parte de los ejemplos anteriores.
• JavaScript Module Pattern: In-Depth, trata el tema del patrón "Modulo" que se usa en estos ejemplos y de técnicas especiales que tienen ventajas y desventajas aplicadas a este patrón.

Agregar funcionalidades a jQuery (plugin)

Ejemplo

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

(function( $ ) {
    $.fn.showLinkLocation = function() {
        this.filter( "a" ).append(function() {
            return " (" + this.href + ")";
        });
        return this;
    };
}( jQuery ));
// *********************************
//	Ejecución
// *********************************
$( "a" ).showLinkLocation();

(function( $ ) {				// $ representa jQuery que es enviado como parámetro
    $.fn.showLinkLocation = function() {	// Se agrega usando fn (una redirección de prototype) una nueva función a jQuery
        this.filter( "a" ).append(function() {
            return " (" + this.href + ")";
        });
        return this;
    };
}( jQuery ));					// Se envía como parámetro jQuery ya que se amplía
// *********************************
//	Ejecución
// *********************************
$( "a" ).showLinkLocation();			// Se aplica a todos los elementos <a>

Referencias

• How to Create a Basic Plugin