Fent servir mòduls de codi Javascript

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 diferents àmbits. Els mòduls a més es poden fer servir per crear codi Javascript que segueix el patró singleton i que anteriorment hagin necessitat fer servir objectes XPCOM Javascript. Un mòdul és simplement codi Javascript registrat i desat en una localització específica. El mòdul serà carregat en un àmbit Javascript específic segons sigui un script XUL o un script XPCOM fent servir Components.utils.import.

Un mòdul simple pot ser aquest :

var EXPORTED_SYMBOLS = ["foo", "bar"]

function foo() {
  return "foo";
}

var bar = {
  name : "bar",
  size : "3"
};

var dummy = "dummy";

Cal tenir en compte que el mòdul fa servir sintàxi tradicional per crear funcions, objectes, constants i qualsevol altre tipus Javascript. El mòdul també defineix una llista especial anomenada EXPORTED_SIMBOLS que serà exportat desde el codi i s'injectarà en l'àmbit d'importació. Per exemple :

Components.utils.import("resource://app/modules/my_module.jsm");

alert(foo());         // displays "foo"
alert(bar.size + 3);  // displays "6"
alert(dummy);         // displays "dummy is not defined" because 'dummy' was not exported from the module

Un comportament extremadament important és el de Components.utils.import, ja que els mòduls són desats en un cache 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 importacions. Qualsevol modificació que es faci a les funcions, variables o objectes del mòdul en un àmbit d'execució estarà disponible a tots els altres àmbits automàticament. Per exemple en el mòdul simple que hem presentat abans si havessim importat en dos llocs diferents els canvis d'un restarien disponibles en l'altre de manera automàtica.

Àmbit 1:

Components.utils.import("resource://app/modules/my_module.jsm");

alert(bar.size + 3);  // Imprimeix "6"

bar.size = 10;

Àmbit 2:

Components.utils.import("resource://app/modules/my_module.jsm");

alert(foo());         // Imprimeix "foo"
alert(bar.size + 3);  // Imprimeix "13"

Aquest comportament de compartir codi es pot fer servir per crear objectes que segueixin el patró singleton per compatir data entre finestres, scripts XUL i components XPCOM.

Àmbit 1:

Components.utils.import("resource://app/modules/my_module.jsm");

bar = "foo";
alert(bar);         // Imprimeix "foo"

Àmbit 2:

Components.utils.import("resource://app/modules/my_module.jsm");

alert(bar);         // Imprimeix "[object Object]"

L'efecte principal de la còpia per valor és que les variables globals o els tipus simples no seràn compartits per els diferents àmbits d'execució disponibles. Posa sempre les variables a dins d'una classe i exporta aquesta ( tal i com fem amb bar en l'exemple anterior ).

resource: Protocol

Quan ferm servir Components.utils.import, et donaràs compte que els mòduls són carregats fent servir el protocol "resource://". La sintàxi bàsica per a un recurs en una URL és la següent :

resource://<alias>/<cami-relatiu>/<file.js|jsm>

El <alias> és un àlies al lloc que sempre é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:

• app - Àlies al camí de l'aplicació XUL.
• gre - Àlies al camí de l'entorn d'execució i sdk XUL.

El <relative-path> pot ser varis nivells més endins i sempre és relatiu al camí ja definit a <alias>. El camí més comú és "modules" tal i com fa servir Firefox i XUL Runner. Els mòduls són fitxers Javascript amb l'extensió .js o .jsm.

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 chrome manifest de la següent manera:

resource aliasname uri/to/files/

Per exemple, si el XPI per l'extensió foo inclou un directori principal per als mòduls i que conté el bar.js, pots crear un àlies a aquest directori amb la següent instrucció :

resource foo modules/

Llavors ja podràs importar el mòdul en el teu codi Javascript amb la següent sintàxi :

Components.utils.import("resource://foo/bar.js");

Afegint àlies de manera automatitzada

Els àlies es poden afegir de manera automatitzada a través de codi font també. Per exemple :

var ioService = Components.classes["@mozilla.org/network/io-service;1"]
                          .getService(Components.interfaces.nsIIOService);
var resProt = ioService.getProtocolHandler("resource")
                       .QueryInterface(Components.interfaces.nsIResProtocolHandler);

var aliasFile = Components.classes["@mozilla.org/file/local;1"]
                          .createInstance(Components.interfaces.nsILocalFile);
aliasFile.initWithPath("/some/absolute/path");

var aliasURI = ioService.newFileURI(aliasFile);
resProt.setSubstitution("myalias", aliasURI);

// Assumeix que el codi dels móduls són en el directori de l'àlies i no en cap subdirectori
Components.utils.import("resource://myalias/file.jsm");

// ...

Veure més

• Mozilla Labs JS Modules - Aquesta pàgina conté un llistat de mòduls Javascript, amb la seva documentació i un hipervincle per baixar-los de manera que es puguin fer servir en el nostre codi.