Mòduls amb Javascript

Mòduls. Introducció

• https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Modules
• https://github.com/mdn/js-examples

$ unzip js-examples-master.zip

Anem al primer exemple:

$ cd js-examples-master/modules/basic-modules/
$ ls
index.html
main.js
modules/
    canvas.js
    square.js

Trobem els exports en els scripts de la carpeta modules/: canvas.js i square.js. Les funcions definides en aquests mòduls s'importen en el main.js, que és el fitxer principal de Javascript. El index.html és el punt d'entrada de la web/html, i fa referència al main.js com has fet moltes vegades.

Has de tindre en compte els problemes que et trobaràs amb les proves locals (si intentes carregar l'arxiu HTML localment, és a dir, amb una URL file:///, ettrobaràs amb errors de CORS degut als requisits de seguretat del mòdul JavaScript. Necessites fer les teves proves en el teu servidor web:

• http://ruta_apache/index.html

Comprovar que el primer exemple funciona correctament (basic-modules), i comprovar que funciona la resta d'exemples.

Utilitzar mòduls a la consola.

En aquesta cas hem d'utilitzar l'extensió .mjs (mòduls de js en comptes de .js). El codi mínim i que no té interfície gràfica seria:

script square.mjs:

const name = 'square';

function instanciar(length, color) {
  return {
    length: length,
    color: color
  };
}

function reportArea(length) {
  console.log(length*length);
}

function reportPerimeter(length) {
    console.log(4*length);
}

export { name, instanciar, reportArea, reportPerimeter };

script main.mjs:

import { name, instanciar, reportArea, reportPerimeter } from './square.mjs';

let square1 = instanciar(100, 'blue');
reportArea(square1.length);
reportPerimeter(square1.length);

I si fem:

$ node main.mjs 
10000
400

Podem provar aquest codi en l'espai que tens en el servidor vps-89148e22.vps.ovh.net.

Tasques a realitzar

(TBD)

Entrega al Classroom

(TBD)

---

creat per Joan Quintana Compte, març 2022