Comparar revisiones

Usando módulos de código JavaScript

Revisión 287953:

Revisión 287953 de ibnkhaldun el

Revisión 213013:

Revisión 213013 de ibnkhaldun el

Título:
Usando módulos de código JavaScript
Usando módulos de código JavaScript
Enlace amigable (slug):
Usando_módulos_de_código_JavaScript
Usando_módulos_de_código_JavaScript
Etiquetas:
páginas_a_traducir
Contenido:

Revisión 287953
Revisión 213013
t7    <p>t
8      &nbsp;
9    </p>
10    <p>
11      {{ Traducción("inglés", "Using JavaScript code modules", "e
>n") }} 
12    </p>
13    <p>
14      &nbsp;
15    </p>
16    <p>
17      {{ Fx_minversion_header(3) }}
18    </p>
19    <p>
20      Los módulos de código JavaScript son un concepto introducid
>o en Firefox 3 (Gecko 1.9) y pueden ser usados para compartir cód 
>igo entre alcances (scopes) con diferentes privilegios. Los módul 
>os pueden también ser usados para crear singletons globales de Js 
>vascript que previamente requerian usar objetos XPCOM de JavaScri 
>pt. Un módulo de código JavaScript es simplemente una porción de  
>código JavaScript hubicado en una hubiación registrada. El módulo 
> es cargado dentro de un alcance (scope) de JavaScript específico 
>, tal como un script de XUL o un script XPCOM de JavaScript, usan 
>do <a href="/es/Components.utils.import" title="es/Components.uti 
>ls.import">Components.utils.import</a>. 
21    </p>
22    <h2 id="Creaci.C3.B3n_de_m.C3.B3dulos_JavaScript">
23      Creación de módulos JavaScript
24    </h2>
25    <p>
26      Los módulos JavaScript tienendos secciones: 1. un array <co
>de>EXPORTED_SYMBOLS</code> en el que se declaran como "símbolos"  
>los objetos, propiedades y métodos que serán empleados por los sc 
>ripts que los importen. Y, 2. El código, que trata las propiedade 
>s y métodos de los "símbolos" exportados. Un muy sencillo módulo  
>de JavaScript luce como esto: 
27    </p>
28    <pre>
29var EXPORTED_SYMBOLS = ["foo", "bar"]
30 
31function foo() {
32  return "foo";
33}
34 
35var bar = {
36  name : "bar",
37  size : "3"
38};
39 
40var dummy = "dummy";
41</pre>
42    <p>
43      Nótese que el módulo usa JavaScript normal para crear funci
>ones, objetos, constantes y cualquier otro tipo JavaScript. Sólo  
>los elementos declarados en el Array especial <code>EXPORTED_SYMB 
>OLS</code> serán accesibles desde el exterior del módulo; los dem 
>ás quedan encapsulados y no son accesibles fuera del mismo. Cualq 
>uier elemento de JavaScript nombrado en <code>EXPORTED_SYMBOLS</c 
>ode> será exportado desde el módulo e insertado dentro del alcanc 
>e (scope) importador. Por ejemplo: 
44    </p>
45    <pre>
46Components.utils.import("resource://app/modules/my_module.jsm");
47 
48alert(foo());         // muestra "foo"
49alert(bar.size + 3);  // muestra "6"
50alert(dummy);         // muestra "dummy is not defined" porque 'd
>ummy' no fue exportado desde el módulo. 
51</pre>
52    <h3 id="La_URL_de_un_m.C3.B3dulo_JavaScript">
53      La URL de un módulo JavaScript
54    </h3>
55    <p>
56      Como se puede apreciar en el ejemplo, arriba, hace falta un
> llamado empleando una dirección URL para poder importar los módu 
>los JavaScript. Éstos, normalmente, se crean como archivos planos 
> con extensión <strong>jsm</strong> y se almacenan el el director 
>io <code>/modules</code> del aplicativo (XUL) o extensión para el 
> que son creados. Y, se cargan usando un protocolo&nbsp;<strong>" 
>resource:"</strong>&nbsp;(en el ejemplo) al presentar la URL como 
> parámetro del llamado. 
57    </p>
58    <p>
59      Sólo se pueden emplear los protocolos <strong>"chrome:"</st
>rong> ( <span style="border: 1px solid rgb(129, 129, 81); backgro 
>und-color: rgb(255, 255, 225); font-size: x-small; white-space: n 
>owrap; padding: 0px 2px;" title="(Firefox 4 / Thunderbird 3.3 / S 
>eaMonkey 2.1)">Requiere Gecko 2</span>) <strong>"resource:"</stro 
>ng> o <strong>"file:"</strong>para cargar módulos JavaSript. 
60    </p>
61    <ul>
62      <li>Si está escribiendo una extensión para Firefox 4.x y cu
>enta con un archivo de manifiesto "<a href="/es/Components.utils. 
>import" title="es/Components.utils.import">chrome.manifest</a>" e 
>n el que se ha declarado la ubicación del directorio "content" (m 
>ediante una instrucción <code>content</code>, ver tutorial XUL) p 
>uede alojar allí sus módulos JavaScript y cargarlos mediante el p 
>rotocolo "chrome:", así: <code>chrome://&lt;yourextension&gt;/con 
>tent/&lt;yourmodule&gt;.jsm</code> . 
63      </li>
64      <li>Si su extensión o aplicación debe soportar Mozilla 1.9.
>x (Firefox 3.x) será necesario registrar su ubicación en el manif 
>iesto chrome de la misma (<a href="/es/Components.utils.import" t 
>itle="es/Components.utils.import">chrome.manifest</a>) más adelan 
>te se explica como hacerlo. 
65      </li>
66    </ul>
67    <h3 id="Compartiendo_objetos_mediante_m.C3.B3dulos">
68      Compartiendo objetos mediante módulos
69    </h3>
70    <p>
71      Un comportamiento extremadamente importante de <a href="/es
>/Components.utils.import" title="es/Components.utils.import">Comp 
>onents.utils.import</a> es que los módulos son cacheados cuando s 
>e cargan e importaciones posteriores no recargan una nueva versió 
>n del módulo, sino que usan la version cacheada anteriormente. Es 
>to significa que un módulo dado será compartido cuando sea import 
>ado varias veces. Cualquier modificacion a datos, objetos o funci 
>ones estarán disponibles en cualquier alcance (scope) que haya im 
>portado el módulo. Por ejemplo, si el modulo de ejemplo fue impor 
>tado en dos alcances (scopes) diferentes de JavaScript, los cambi 
>os en un alcance (Scope) serán visibles desde el otro alcance (sc 
>ope). 
72    </p>
73    <p>
74      Alcance (scope) 1:
75    </p>
76    <pre>
77Components.utils.import("resource://app/modules/my_module.jsm");
78 
79alert(bar.size + 3);  // muestra "6"
80 
81bar.size = 10;
82</pre>
83    <p>
84      Alcance (scope) 2:
85    </p>
86    <pre>
87Components.utils.import("resource://app/modules/my_module.jsm");
88 
89alert(foo());         // muestra "foo"
90alert(bar.size + 3);  // muestra "13"
91</pre>
92    <p>
93      Este comportamiento de compartir puede ser usado para crear
> objetos singleton que compartan datos entre ventanas y entre scr 
>ipts XUL y componentes XPCOM. 
94    </p>
95    <div class="note">
96      <strong>Nota:</strong> Cada ámbito (alcance) al que sea imp
>ortado un módulo recibe una copia por-valor de los símbolos expor 
>tados por el módulo. De modo que los cambios que allí se realicen 
> para los mismos no se verán reflejados en otros lugares. (Ésto g 
>arantiza que los "nombres" de los símbolos exportados no cambien  
>para otros sitios y se pueda hacer referencia los mismos de modo  
>uniforme) 
97    </div>
98    <p>
99      Alcance 1
100    </p>
101    <pre>
102<code class="plain"> Components.utils.import(</code><code class="
>string">"<a>resource://app/my_module.jsm</a>"</code><code class=" 
>plain">);</code> 
103 
104<code class="plain">bar = </code><code class="string">"foo"</code
>><code class="plain">;</code> 
105<code class="plain">alert(bar);         </code><code class="comme
>nts">// muestra "foo"</code> 
106</pre>
107    <p>
108      Alcance 2
109    </p>
110    <pre>
111<code class="plain">Components.utils.import(</code><code class="s
>tring">"<a>resource://app/my_module.jsm</a>"</code><code class="p 
>lain">);</code> 
112 
113<code class="plain">alert(bar);         </code><code class="comme
>nts">// muestra "[object Object]"</code> 
114</pre>
115    <h4 id="resource:_Protocol" name="resource:_Protocol">
116      resource: Protocol
117    </h4>
118    <p>
119      Cuando uses <a href="/es/Components.utils.import" title="es
>/Components.utils.import">Components.utils.import</a>, notarás qu 
>e los módulos de código son cargados usando el protocolo "resourc 
>e://". La sintaxis básica de un recurso URL es como sigue: 
120    </p>
121    <pre class="eval">
122resource://&lt;alias&gt;/&lt;ruta-relativa&gt;/&lt;archivo.js|jsm
>&gt; 
123</pre>
124    <p>
125      El <code>&lt;alias&gt;</code> es un alias a una hubicación,
> usualmente una hubicación física relativa a la aplicación o al r 
>untime de XUL. Existen algunos alias predefinidos por defecto por 
> el runtime de XUL runtime: 
126    </p>
127    <ul>
128      <li>
129        <code>app</code> - Alias a la hubicación de la aplicación
> de XUL. 
130      </li>
131      <li>
132        <code>gre</code> - Alias a la hubicación del runtime de X
>UL. 
133      </li>
134    </ul>
135    <p>
136      La <code>&lt;ruta-relativa&gt;</code> puede tener múltiples
> niveles de profundidad y siempre es relativa a la hubicación def 
>inida por el <code>&lt;alias&gt;</code>. La ruta relativa común e 
>s "modules" y es usada por XUL Runner and Firefox. Los módulos de 
> código son simples archivos JavaScript con la extensión .js o .j 
>sm. 
137    </p>
138    <p>
139      La manera mas sencilla para extensiones y aplicaciones XUL 
>de agregar alias propios es al registrar un alias en el <a href=" 
>/es/Chrome_Registration" title="es/Chrome_Registration">manifiest 
>o chrome</a> usando algo como esto: 
140    </p>
141    <pre class="eval">
142resource <em>nombrealias</em> <em>uri/a/los/archivos/</em>
143</pre>
144    <p>
145      Por ejemplo, si el XPI de tu extension <em>foo</em> incluye
> un directorio de primer nivel de módulos conteniendo el módulo < 
>em>bar.js</em>, podrías crear un alias a ese directorio mediante  
>la instrucción: 
146    </p>
147    <pre class="eval">
148resource foo modules/
149</pre>
150    <p>
151      Podrias entonces importar el módulo en tu código JavaScript
> mediante la sentencia: 
152    </p>
153    <pre class="eval">
154Components.utils.import("<a class=" external" href="resource://fo
>o/bar.js" rel="freelink">resource://foo/bar.js</a>"); 
155</pre>
156    <p>
157      Los alias propios pueden también ser agregados programática
>mente al protocolo de recursos. Por ejemplo: 
158    </p>
159    <pre>
160var ioService = Components.classes["@mozilla.org/network/io-servi
>ce;1"] 
161                          .getService(Components.interfaces.nsIIO
>Service); 
162var resProt = ioService.getProtocolHandler("resource")
163                       .QueryInterface(Components.interfaces.nsIR
>esProtocolHandler); 
164 
165var aliasFile = Components.classes["@mozilla.org/file/local;1"]
166                          .createInstance(Components.interfaces.n
>sILocalFile); 
167aliasFile.initWithPath("/some/absolute/path");
168 
169var aliasURI = ioService.newFileURI(aliasFile);
170resProt.setSubstitution("myalias", aliasURI);
171 
172// asumiendo que el módulo de código está en el directorio de ali
>as misma, no en un subdirectorio 
173Components.utils.import("resource://myalias/file.jsm");
174 
175// ...
176</pre>
177    <p>
178      &nbsp;
179    </p>
180    <p>
181      &nbsp;
182    </p>
183    <p>
184      &nbsp;
185    </p>
186    <p>
187      &nbsp;
188    </p>
189    <p>
190      {{ languages( { "ca":"ca/Fent_servir_mòduls_de_codi_Javascr
>ipt","en": "en/Using_JavaScript_code_modules", "fr": "fr/Utilisat 
>ion_de_modules_de_code_JavaScript", "ja": "ja/Using_JavaScript_co 
>de_modules", "pl": "pl/Zastosowanie_modu\u0142\u00f3w_JavaScript" 
> } ) }} 
191    </p>

Volver al historial