Difference between revisions of "Crear librería de JavaScript"
Jump to navigation
Jump to search
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 | ||
function(w) { | function(w) { | ||
var variable1 = 'unoA'; | 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 = {}; | 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; | w.lib.hola = hola; // Se agrega función hola al objeto global lib | ||
} | } | ||
)(window); | )(window); // window se envía como parámetro a la función, no es extricamente necesario | ||
// | // | ||
// ********************************* | // ********************************* | ||
// Ejecución | // Ejecución | ||
// ********************************* | // ********************************* | ||
lib.hola(); | lib.hola(); // Se accede desde afuera de la librería a la función hola | ||
alert(lib.variable2); | alert(lib.variable2); // Se accede desde afuera de la librería a la variable2 | ||
// ********************************* | // ********************************* | ||
// Errores | // Errores | ||
// ********************************* | // ********************************* | ||
alert(variable1); | alert(variable1); // Error, variable1 no definida | ||
alert(lib.variable1); | alert(lib.variable1); // Muestra "undefined" | ||
</syntaxhighlight> | </syntaxhighlight> | ||
</div> | </div> | ||
</div> | </div> |
Revision as of 17:33, 22 May 2014
Cómo crear una librería de JavaScript sencilla
Agregando la librería al alcance global (global scope)
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"