IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

Conceptes previs

Moduls, namespaces i scopes

Vegeu més a Javascript Moduls, namespaces i scopes

Node.js Modules

S'utilitza la paraula clau require i s'implementa el suport en navegador utilitzant module bundlers com browserify o webpack o rollup.

Vegeu Node.js#Carpeta_node_modules

ECMAScript 6 modules

http://es6-features.org/#ValueExportImport

Amb ECS6 és té suport natiu en Javascript per al treball amb mòduls (ECMAScript 6 modules) utilitzant les paraules clau import i export.

IMPORTANT: ës molt important tenir ja una forma estàndard d'importar mòduls a Javascript i així no necessitarem els Module Bundlers com Browserify/Webpack/Rollup ni caldrà utilitzar sistemes externs com CommonJS o RequireJS/AMD

Named exports (several per module)

Un mòdul pot exportar múltiples funcions o variables utilitzant la paraula clau export. Cada exportació es diferenciada pel seu nom (aka named exports)

    //------ lib.js ------
    export const sqrt = Math.sqrt;
    export function square(x) {
        return x * x;
    }
    export function diag(x, y) {
        return sqrt(square(x) + square(y));
    }
    
    //------ main.js ------
    import { square, diag } from 'lib';
    console.log(square(11)); // 121
    console.log(diag(4, 3)); // 5

També se suport la sintaxi per a *:

//------ main.js ------
    import * as lib from 'lib';
    console.log(lib.square(11)); // 121
    console.log(lib.diag(4, 3)); // 5

Un exemple més comparat amb com es faria abans amb ECMAScript 5:

ECS6:

//  lib/math.js
export function sum (x, y) { return x + y }
export var pi = 3.141593

//  someApp.js
import * as math from "lib/math"
console.log("2π = " + math.sum(math.pi, math.pi))

//  otherApp.js
import { sum, pi } from "lib/math"
console.log("2π = " + sum(pi, pi))

ECS5:

//  lib/math.js
LibMath = {};
LibMath.sum = function (x, y) { return x + y };
LibMath.pi = 3.141593;

//  someApp.js
var math = LibMath;
console.log("2π = " + math.sum(math.pi, math.pi));

//  otherApp.js
var sum = LibMath.sum, pi = LibMath.pi;
console.log("2π = " + sum(pi, pi));

Default exports

També es pot utilitzar:

export default (x) => Math.exp(x)

Per definir el que s'exporta per defecte si no es diu res. Vegem un exemple:

    //------ myFunc.js ------
    export default function () { ... };
    
    //------ main1.js ------
    import myFunc from 'myFunc';
    myFunc();
An ECMAScript 6 module whose default export is a class looks as follows:

    //------ MyClass.js ------
    export default class { ... };
    
    //------ main2.js ------
    import MyClass from 'MyClass';
    let inst = new MyClass();

Resources

CommonJS Syntax

NOTA: El sistema de mòduls de node.js està basat en commonJS

The same code in CommonJS syntax: For a while, I tried several clever strategies to be less redundant with my module exports in Node.js. Now I prefer the following simple but slightly verbose style that is reminiscent of the revealing module pattern:

    //------ lib.js ------
    var sqrt = Math.sqrt;
    function square(x) {
        return x * x;
    }
    function diag(x, y) {
        return sqrt(square(x) + square(y));
    }
    module.exports = {
        sqrt: sqrt,
        square: square,
        diag: diag,
    };
    
    //------ main.js ------
    var square = require('lib').square;
    var diag = require('lib').diag;
    console.log(square(11)); // 121
    console.log(diag(4, 3)); // 5

Ús de ECS6 en navegadors

Module Bundlers

Vegeu Module Bundlers. Els més coneguts Browserify, Webpack i Rollup. Se solen utilitzar conjuntament amb eines com Gulp o Grunt anomenades build systems

Transpilers

Vegeu Javascript Transpilers

Babel

Vegeu Babel

Anterior a ECMAScript 6

  • CommonJS Modules: The dominant implementation of this standard is in Node.js (Node.js modules have a few features that go beyond CommonJS). Characteristics:
  • Compact syntax
  • Designed for synchronous loading
  • Main use: server
  • Slightly more complicated syntax, enabling AMD to work without eval() (or a compilation step).
  • Designed for asynchronous loading
  • Main use: browsers

Javascript Module Pattern

Vegeu com amb el Javascript Module Pattern es poden implementar els mòduls sense require ni import/export

Vegeu també

Enllaços externs