Dai blogs > Andrea Zani > Memo

AMD/UMD in javascript, tanto per ricordarmi

di Andrea ZaniAndrea Zani, in Memo,

Ma quanto è comodo AMD (Asynchronous Module Definition) in javascript con require.js? Hai bisogno di dipendenze, lui te le carica e il tuo modulo in javascript può accedere agli altri moduli. Hai bisogno della stessa libreria in javascript ma in due versioni differenti? E vai, si può! Vai, provalo con jQuery o Angular 1 ed è un casino - lasciamo stare Angular 2 che non si riesce nemmeno a utilizzare una sola versione con require.js. Vabbè... 

 

C'è la necessità di creare un modulo in javascript utilizzabile universalmente? Basta scriverlo rispettando l'UMD (universal module definition):

 
  (function (root, factory) {
   if (typeof define === 'function' && define.amd) {
    // AMD
    define([], factory);
   } else if (typeof exports === 'object') {
    // Node, CommonJS-like
    module.exports = factory();
   } else {
    // Browser globals (root is window)
    root.azmodule = factory();
   }
  }(this, function () {
   var alert = function (msg) {
    console.log("Log from azmodule1: " + msg);
   };

   return {
    alert: alert
   };
  }));
 

In questo file è creato un mio module che possiamo usare:

 
  <script src="scriptjs/azmodule1.js"></script>
  <script type="text/javascript">
   azmodule.alert("msg1");
  </script>
 

Caricata la pagina nella console sarà visualizzato il messaggio:

 
Log from azmodule1: msg1
 

Posso usarlo anche con require.js. Classica struttura, main.js

 
  require.config({
   paths: {
   azmodule1: '/scriptjs/azmodule'
  },
  deps: ['app']
  });
 

app.js;

 
  requirejs(["azmodule1"], function (az1) {
  az1.alert("msg1");
  });
 

  E il risultato sarà come il precedente. Inoltre, si potrà usare lo stesso file anche in Node.js...  Dimenticavo, il nostro modulo ha necessità di caricare altri moduli? 

 
  (function (root, factory) {
   if (typeof define === 'function' && define.amd) {
    // AMD
    define(['underscore'], factory);
   } else if (typeof exports === 'object') {
    // Node, CommonJS-like
    module.exports = factory(require('underscore'));
   } else {
    // Browser globals (root is window)
    root.azmodule = factory(root._);
   }
  }(this, function (_) {
   var alert = function (msg) {
    console.log("Log from azmodule2: " + msg + " Underscore version: " + _.VERSION);
   };

   return {
    alert: alert
   };
  }));
 

In questo caso ho inserito le dipendenze con underscore.js. Se volessimo includere direttamente nel codice nel classico modo:

 
  <script src="/bower_components/underscore/underscore.js"></script>
  <script src="scriptjs/azmodule2.js"></script>
  <script type="text/javascript">
   azmodule.alert("msg2");
  </script>
 

Il risultato:

 
Log from azmodule2: msg2 Underscore version: 1.8.3
 

Con require.js, in main.js:

 
  require.config({
   paths: {
   azmodule2: '/scriptjs/azmodule2',
   underscore: '/scripts/underscore/underscore'
  },
  deps: ['app']
  });
 

app.js:

 
  requirejs(["azmodule2"], function (az2) {
   az2.alert("msg2");
  });
 

E l'output sarà lo stesso visto precedentemente. Voglio usare entrambi i moduli:

 
  // main.js
  require.config({
   paths: {
   azmodule1: '/scriptjs/azmodule1',
   azmodule2: '/scriptjs/azmodule2',
   underscore: '/scripts/underscore/underscore'
  },
  deps: ['app']
  });

  // app.js
  requirejs(["azmodule1","azmodule2"], function (az1, az2) {
   az1.alert("msg1");
   az2.alert("msg2");
  });
 

Output:

 
  Log from azmodule1: msg1
  Log from azmodule2: msg2 Underscore version: 1.8.3

Almeno me lo ricordo...

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Nella stessa categoria
I più letti del mese