Crear librería de JavaScript - Revision history

Felipe: /* Ejemplo */

2014-05-22T19:29:15Z

Ejemplo

@@ Line 144: / Line 144: @@
 Un ejemplo de una librería sencilla (Expandir para ver ejemplo documentado):
 <syntaxhighlight lang="javascript">
+(function( $ ) {
 </syntaxhighlight>
 <div class="mw-collapsible-content">
 <syntaxhighlight lang="javascript">
+(function( $ ) {				// $ representa jQuery que es enviado como parámetro
 </syntaxhighlight>
 </div>

Felipe: /* Ejemplo */

2014-05-22T19:19:02Z

Ejemplo

← Older revision		Revision as of 19:19, 22 May 2014
Line 141:		Line 141:

	===Ejemplo===		===Ejemplo===
			<div class="toccolours mw-collapsible mw-collapsed" style="width:800px">
			Un ejemplo de una librería sencilla (Expandir para ver ejemplo documentado):
			<syntaxhighlight lang="javascript">

			</syntaxhighlight>
			<div class="mw-collapsible-content">
			<syntaxhighlight lang="javascript">

			</syntaxhighlight>
			</div>
			</div>

	===Referencias===		===Referencias===
	* [http://learn.jquery.com/plugins/basic-plugin-creation/ How to Create a Basic Plugin]		* [http://learn.jquery.com/plugins/basic-plugin-creation/ How to Create a Basic Plugin]

Felipe: /* Agregar funcionalidades a jQuery (plugin) */

2014-05-22T19:18:15Z

Agregar funcionalidades a jQuery (plugin)

← Older revision		Revision as of 19:18, 22 May 2014
Line 139:		Line 139:

	==Agregar funcionalidades a jQuery (plugin)==		==Agregar funcionalidades a jQuery (plugin)==

			===Ejemplo===


			===Referencias===
			* [http://learn.jquery.com/plugins/basic-plugin-creation/ How to Create a Basic Plugin]

Felipe at 19:16, 22 May 2014

2014-05-22T19:16:21Z

← Older revision		Revision as of 19:16, 22 May 2014
Line 132:		Line 132:
	</div>		</div>
	</div>		</div>

			===Referencias===

			* [http://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals 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.
			* [http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html 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)==		==Agregar funcionalidades a jQuery (plugin)==

Felipe at 17:49, 22 May 2014

2014-05-22T17:49:37Z

@@ Line 1: / Line 1: @@
 ==Cómo crear una librería de JavaScript sencilla==
-===Agregando la librería al alcance global (global scope)===
+===Agregando la librería al alcance global (global scope) desde la definición de la librería===
 <div class="toccolours mw-collapsible mw-collapsed" style="width:800px">
 Un ejemplo de una librería sencilla (Expandir para ver ejemplo documentado):
@@ Line 62: / Line 62: @@
 </div>
 </div>

Felipe at 17:34, 22 May 2014

2014-05-22T17:34:58Z

← Older revision		Revision as of 17:34, 22 May 2014
Line 47:		Line 47:
	}		}
	)(window); // window se envía como parámetro a la función, no es extricamente necesario		)(window); // window se envía como parámetro a la función, no es extricamente necesario
	//
	// *********************************		// *********************************
	// Ejecución		// Ejecución

Felipe at 17:33, 22 May 2014

2014-05-22T17:33:33Z

Felipe at 17:32, 22 May 2014

2014-05-22T17:32:41Z

← Older revision		Revision as of 17:32, 22 May 2014
Line 29:		Line 29:
	<div class="mw-collapsible-content">		<div class="mw-collapsible-content">
	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
	(function(w) {		( // Lo que está adentro de los parentesis solo existe adentro
	var a = 'unoA';		function(w) {
	var b = {		var variable1 = 'unoA'; // Usando var se evita que la variable1 exista en el espacio global
	a: 'a',		var variable2 = 'dosB';
	b: 'b'		var variable3 = {
	};		sub1: 'a',
	function hola() {		sub2: 'b'
	alert('hola');		};
	}		function hola() {
	;		alert('hola');
	w.lib = a;		}
	w.~~libb~~ = b;		;
	})(window); // No es ~~estrictamente~~ necesario ~~el window ya que es global~~		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"
	</syntaxhighlight>		</syntaxhighlight>
	</div>		</div>
	</div>		</div>

Felipe at 17:23, 22 May 2014

2014-05-22T17:23:22Z

@@ Line 1: / Line 1: @@
 <syntaxhighlight lang="javascript">
 (function(w) {
@@ Line 14: / Line 43: @@
 })(window); // No es estrictamente necesario el window ya que es global
 </syntaxhighlight>

Felipe at 00:49, 21 May 2014

2014-05-21T00:49:19Z

← Older revision		Revision as of 00:49, 21 May 2014
Line 12:		Line 12:
	w.lib = a;		w.lib = a;
	w.libb = b;		w.libb = b;
	})(window); // No es estrictamente necesario		})(window); // No es estrictamente necesario el window ya que es global
	</syntaxhighlight>		</syntaxhighlight>

← Older revision		Revision as of 17:33, 22 May 2014
Line 29:		Line 29:
	<div class="mw-collapsible-content">		<div class="mw-collapsible-content">
	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
	( // Lo que está adentro de los parentesis solo existe adentro		( // Lo que está adentro de los parentesis solo existe adentro
	function(w) {		function(w) {
	var variable1 = 'unoA'; // Usando var se evita que la variable1 exista en el espacio global		var variable1 = 'unoA'; // Usando var se evita que la variable1 exista en el espacio global
	var variable2 = 'dosB';		var variable2 = 'dosB';
	var variable3 = {		var variable3 = {
Line 41:		Line 41:
	}		}
	;		;
	w.lib = {}; // Se crea un objeto lib para que se le puedan agregar parámetros luego		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.variable2 = variable2; // Se agrega variable2 al objeto global lib
	w.lib.variable3 = variable3; // Se agrega variable3 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		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		)(window); // window se envía como parámetro a la función, no es extricamente necesario
	//		//
	// *********************************		// *********************************
	// Ejecución		// Ejecución
	// *********************************		// *********************************
	lib.hola(); // Se accede desde afuera de la librería a la función hola		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		alert(lib.variable2); // Se accede desde afuera de la librería a la variable2

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