Compare Revisions

Fent servir mòduls de codi Javascript

Change Revisions

Revision 286480:

Revision 286480 by RpJ on

Revision 223301:

Revision 223301 by RpJ on

Title:
Fent servir mòduls de codi Javascript
Fent servir mòduls de codi Javascript
Slug:
Fent_servir_mòduls_de_codi_Javascript
Fent_servir_mòduls_de_codi_Javascript
Content:

Revision 286480
Revision 223301
t7    <p>t
8      &nbsp;
9    </p>
10    <p>
11      &nbsp;
12    </p>
13    <p>
14      {{ Fx_minversion_header(3) }}
15    </p>
16    <p>
17      Els mòduls de codi és són un concepte introduït a Firefox 3
> (Gecko 1.9) i es poden fer servir per compartir codi entre difer 
>ents àmbits. Els mòduls a més es poden fer servir per crear codi  
>Javascript que segueix el patró singleton i que anteriorment hagi 
>n necessitat fer servir objectes XPCOM Javascript. Un mòdul és si 
>mplement codi Javascript registrat i desat en una localització es 
>pecífica. El mòdul serà carregat en un àmbit Javascript específic 
> segons sigui un script XUL o un script XPCOM fent servir <a href 
>="/en/Components.utils.import" title="en/Components.utils.import" 
>>Components.utils.import</a>. 
18    </p>
19    <p>
20      Un mòdul simple pot ser aquest :
21    </p>
22    <pre>
23var EXPORTED_SYMBOLS = ["foo", "bar"]
24 
25function foo() {
26  return "foo";
27}
28 
29var bar = {
30  name : "bar",
31  size : "3"
32};
33 
34var dummy = "dummy";
35</pre>
36    <p>
37      Cal tenir en compte que el mòdul fa servir sintàxi tradicio
>nal per crear funcions, objectes, constants i qualsevol altre tip 
>us Javascript. El mòdul també defineix una llista especial anomen 
>ada EXPORTED_SIMBOLS que serà exportat desde el codi i s'injectar 
>à en l'àmbit d'importació. Per exemple : 
38    </p>
39    <pre>
40Components.utils.import("resource://app/modules/my_module.jsm");
41 
42alert(foo());         // displays "foo"
43alert(bar.size + 3);  // displays "6"
44alert(dummy);         // displays "dummy is not defined" because 
>'dummy' was not exported from the module 
45</pre>
46    <p>
47      Un comportament extremadament important és el de <a href="/
>en/Components.utils.import" title="en/Components.utils.import">Co 
>mponents.utils.import</a>, ja que els mòduls són desats en un cac 
>he temporal de manera que les següents importacions del mateix no 
> recarregaran el codi si no que faran servir la versió cachejada. 
> Això vol dir que un mòdul pot ser compartit per vàries importaci 
>ons. Qualsevol modificació que es faci a les funcions, variables  
>o objectes del mòdul en un àmbit d'execució estarà disponible a t 
>ots els altres àmbits automàticament. Per exemple en el mòdul sim 
>ple que hem presentat abans si havessim importat en dos llocs dif 
>erents els canvis d'un restarien disponibles en l'altre de manera 
> automàtica. 
48    </p>
49    <p>
50      Àmbit 1:
51    </p>
52    <pre>
53Components.utils.import("resource://app/modules/my_module.jsm");
54 
55alert(bar.size + 3);  // Imprimeix "6"
56 
57bar.size = 10;
58</pre>
59    <p>
60      Àmbit 2:
61    </p>
62    <pre>
63Components.utils.import("resource://app/modules/my_module.jsm");
64 
65alert(foo());         // Imprimeix "foo"
66alert(bar.size + 3);  // Imprimeix "13"
67</pre>
68    <p>
69      Aquest comportament de compartir codi es pot fer servir per
> crear objectes que segueixin el patró singleton per compatir dat 
>a entre finestres, scripts XUL i components XPCOM. 
70    </p>
71    <p>
72      {{ Note("Cada àmbit que import aun mòdul el rep per valor e
>ls símbols importats en aquest mòdul. Els canvis als símbols no s 
>eran propagats a altres àmbits.") }} 
73    </p>
74    <p>
75      Àmbit 1:
76    </p>
77    <pre>
78Components.utils.import("resource://app/modules/my_module.jsm");
79 
80bar = "foo";
81alert(bar);         // Imprimeix "foo"
82</pre>
83    <p>
84      Àmbit 2:
85    </p>
86    <pre>
87Components.utils.import("resource://app/modules/my_module.jsm");
88 
89alert(bar);         // Imprimeix "[object Object]"
90</pre>
91    <p>
92      L'efecte principal de la còpia per valor és que les variabl
>es globals o els tipus simples no seràn compartits per els difere 
>nts àmbits d'execució disponibles. Posa sempre les variables a di 
>ns d'una classe i exporta aquesta ( tal i com fem amb bar en l'ex 
>emple anterior ). 
93    </p>
94    <h4 id="resource:_Protocol" name="resource:_Protocol">
95      resource: Protocol
96    </h4>
97    <p>
98      Quan ferm servir <a href="/en/Components.utils.import" titl
>e="en/Components.utils.import">Components.utils.import</a>, et do 
>naràs compte que els mòduls són carregats fent servir el protocol 
> "<a class=" external" href="resource://" rel="freelink">resource 
>://</a>". La sintàxi bàsica per a un recurs en una URL és la segü 
>ent : 
99    </p>
100    <pre class="eval">
101<a class=" external" href="resource://" rel="freelink">resource:/
>/</a>&lt;alias&gt;/&lt;cami-relatiu&gt;/&lt;file.js|jsm&gt; 
102</pre>
103    <p>
104      El <code>&lt;alias&gt;</code> és un àlies al lloc que sempr
>e és un camí relatiu a l'aplicació o al entorn d'execució XUL. Hi 
> ha vàris àlies predefinits que configura l'entorn d'execució XUL 
> automàticament: 
105    </p>
106    <ul>
107      <li>
108        <code>app</code> - Àlies al camí de l'aplicació XUL.
109      </li>
110      <li>
111        <code>gre</code> - Àlies al camí de l'entorn d'execució i
> sdk XUL. 
112      </li>
113    </ul>
114    <p>
115      El <code>&lt;relative-path&gt;</code> pot ser varis nivells
> més endins i sempre és relatiu al camí ja definit a &lt;alias&gt 
>;. El camí més comú és "modules"&nbsp;tal i com fa servir Firefox 
> i XUL Runner. Els mòduls són fitxers Javascript amb l'extensió . 
>js o .jsm. 
116    </p>
117    <p>
118      La manera més fàcil d'afegir un mòdul a una aplicació XUL o
> una extensió Firefox és definir-la amb un àlies en el fitxer <a  
>href="/en/Chrome_Registration" title="en/Chrome_Registration">chr 
>ome manifest</a> de la següent manera: 
119    </p>
120    <pre class="eval">
121resource <em>aliasname</em> <em>uri/to/files/</em>
122</pre>
123    <p>
124      Per exemple, si el XPI per l'extensió <em>foo</em> inclou u
>n directori principal per als mòduls i que conté el <em>bar.js</e 
>m>, pots crear un àlies a aquest directori amb la següent instruc 
>ció : 
125    </p>
126    <pre class="eval">
127resource foo modules/
128</pre>
129    <p>
130      Llavors ja podràs importar el mòdul en el teu codi Javascri
>pt amb la següent sintàxi : 
131    </p>
132    <pre class="eval">
133Components.utils.import("<a class=" external" href="resource://fo
>o/bar.js" rel="freelink">resource://foo/bar.js</a>"); 
134</pre>
135    <h3 id="Programmatically_adding_aliases" name="Programmatical
>ly_adding_aliases"> 
136      Afegint àlies de manera automatitzada
137    </h3>
138    <p>
139      Els àlies es poden afegir de manera automatitzada a través 
>de codi font també. Per exemple : 
140    </p>
141    <pre>
142var ioService = Components.classes["@mozilla.org/network/io-servi
>ce;1"] 
143                          .getService(Components.interfaces.nsIIO
>Service); 
144var resProt = ioService.getProtocolHandler("resource")
145                       .QueryInterface(Components.interfaces.nsIR
>esProtocolHandler); 
146 
147var aliasFile = Components.classes["@mozilla.org/file/local;1"]
148                          .createInstance(Components.interfaces.n
>sILocalFile); 
149aliasFile.initWithPath("/some/absolute/path");
150 
151var aliasURI = ioService.newFileURI(aliasFile);
152resProt.setSubstitution("myalias", aliasURI);
153 
154// Assumeix que el codi dels móduls són en el directori de l'àlie
>s i no en cap subdirectori 
155Components.utils.import("resource://myalias/file.jsm");
156 
157// ...
158</pre>
159    <h3 id="See_also" name="See_also">
160      Veure més
161    </h3>
162    <ul>
163      <li>
164        <a class="external" href="http://wiki.mozilla.org/Labs/JS
>_Modules">Mozilla Labs JS Modules</a> - Aquesta pàgina conté un l 
>listat de mòduls Javascript, amb la seva documentació i un hiperv 
>incle per baixar-los de manera que es puguin fer servir en el nos 
>tre codi. 
165      </li>
166    </ul>
167    <p>
168      &nbsp;
169    </p>
170    <p>
171      {{ languages( { "ca":"ca/Fent_servir_mòduls_de_codi_Javascr
>ipt","es": "es/Usando_m\u00f3dulos_de_c\u00f3digo_JavaScript", "f 
>r": "fr/Utilisation_de_modules_de_code_JavaScript", "ja": "ja/Usi 
>ng_JavaScript_code_modules", "pl": "pl/Zastosowanie_modu\u0142\u0 
>0f3w_JavaScript" } ) }} 
172    </p>

Back to History