initial commit

1 files changed, 259 insertions, 0 deletions

diff --git a/files/it/web/javascript/reference/statements/export/index.html b/files/it/web/javascript/reference/statements/export/index.html
new file mode 100644
index 0000000000..47d67a6eb2
--- /dev/null
+++ b/files/it/web/javascript/reference/statements/export/index.html
@@ -0,0 +1,259 @@
+---
+title: export
+slug: Web/JavaScript/Reference/Statements/export
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Moduli
+  - export
+translation_of: Web/JavaScript/Reference/Statements/export
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<div>Il comando <strong>export </strong>è utilizzato per esportare funzioni, oggetti o tipi primitivi da un dato file (o modulo) in modo tale da poter essere riutilizzati in altri file con il comando <span class="seoSummary">{{jsxref("Statements/import", "import")}}</span></div>
+
+<div></div>
+
+<div>I moduli sono esportati sempre in {{jsxref("Strict_mode","strict mode", "", 1)}}  nonostante non sia dichiarato. Il comando export non può essere usato in embedded scripts.</div>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<p>Ci sono due tipi di exports:</p>
+
+<ol>
+ <li>Named exports (uno o più exports per modulo)</li>
+ <li>Default exports (uno per modulo)</li>
+</ol>
+
+<pre class="syntaxbox notranslate">// Export di variabili, funzioni e oggetti singolarmente
+export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // also var, const
+export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // also var, const
+export function functionName(){...}
+export class ClassName {...}
+
+// Export di una lista
+export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> };
+
+// Rinominare gli exports
+export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> };
+
+// Exporting destructured assignments with renaming
+// Export di assegnazioni destrutturate rinominando l'export
+export const { <var>name1</var>, <var>name2: bar</var> } = o;
+
+// DEfault export
+export default <em>expression</em>;
+export default function (…) { … } // also class, function*
+export default function name1(…) { … } // also class, function*
+export { <var>name1</var> as default, … };
+
+// Aggregazione di moduli
+export * from …; // does not set the default export
+export * as name1 from …; // Draft ECMAScript® 2O21
+export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …;
+export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …;
+export { default } from …;</pre>
+
+<dl>
+ <dt><code>nameN</code></dt>
+ <dd>Nome che deve essere esportato (così da poter essere importato via <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> in un altro script).</dd>
+</dl>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Ci sono due tipi diversi di export, named and default. Puoi avere più named exports per modulo ma solamente un default export.</p>
+
+<p>Named exports:</p>
+
+<pre class="brush: js notranslate">// Export di variabili, funzioni, oggetti dichiarati precedentemente
+export { myFunction, myVariable };
+
+// export individual features (can export var, let,
+// const, function, class)
+export let myVariable = Math.sqrt(2);
+export function myFunction() { ... };</pre>
+
+<p>Default exports:</p>
+
+<pre class="brush: js notranslate">// Export di funzioni dichiarati precedentemente come default
+export { myFunction as default };
+
+// Export di singole funzioni, oggetti come default
+export default function () { ... }
+export default class { .. }
+
+// ogni export sovrascrive il precedente</pre>
+
+<p>I named exports sono utili per esportare più valori. Durante l'import, è obbligatorio usare lo stesso nome dell'oggetto corrispondente.</p>
+
+<p>I defalt export invece possono essere importati con qualsiasi nome. Ad esempio:</p>
+
+<pre class="brush: js notranslate">// file test.js
+let k; export default k = 12;
+</pre>
+
+<pre class="brush: js notranslate">// some other file
+import m from './test'; //notare che abbiamo la libertà di importare m invece di importate k, perché  k era il default export
+console.log(m);        // stamperà 12
+</pre>
+
+<p>Puoi anche rinominare i named exports per evitare conflitti:</p>
+
+<pre class="brush: js notranslate">export { <var>myFunction</var> as <var>function1</var>,<var>
+         myVariable</var> as variable };</pre>
+
+<h3 id="Ri-esportare_Aggregare">Ri-esportare / Aggregare</h3>
+
+<p>È anche possibile importare ed esportare da più moduli nel modulo padre in modo tale da rendere rendere disponibili gli import da quel modulo. In altre parole è possibile creare un modulo che aggreghi i vari export da vari moduli.</p>
+
+<p>È possibile farlo con la sintassi "export from":</p>
+
+<pre class="brush: js notranslate">export { default as function1,
+         function2 } from 'bar.js';
+</pre>
+
+<p>che è paragonabile ad una combinazione di import e export:</p>
+
+<pre class="brush: js notranslate">import { default as function1,
+         function2 } from 'bar.js';
+export { function1, function2 };</pre>
+
+<p>dove <code>function1</code> e <code>function2</code> non sono disponibili nel modulo corrente.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> I seguenti esempi sono sintatticamente invalidi nonostante siano equivalenti dal punto divista del comando import</p>
+</div>
+
+<pre class="brush: js notranslate">import DefaultExport from 'bar.js'; // Valid</pre>
+
+<pre class="brush: js notranslate">export DefaultExport from 'bar.js'; // Invalid</pre>
+
+<p>Il modo corretto di farlo è di rinominare gli export:</p>
+
+<pre class="brush: js notranslate">export { default as DefaultExport } from 'bar.js';</pre>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Usare_gli_export_espliciti">Usare gli export espliciti</h3>
+
+<p>In un modulo <code>my-module.js</code>, potremmo includere il seguente codice:</p>
+
+<pre class="brush: js notranslate">// modulo "my-module.js"
+function cube(x) {
+  return x * x * x;
+}
+
+const foo = Math.PI + Math.SQRT2;
+
+var graph = {
+  options: {
+      color:'white',
+      thickness:'2px'
+  },
+  draw: function() {
+      console.log('From graph draw function');
+  }
+}
+
+export { cube, foo, graph };</pre>
+
+<p>E nel modulo principale incluso nella pagina HTML potremmo avere</p>
+
+<pre class="brush: js notranslate">import { cube, foo, graph } from './my-module.js';
+
+graph.options = {
+    color:'blue',
+    thickness:'3px'
+};
+
+graph.draw();
+console.log(cube(3)); // 27
+console.log(foo);    // 4.555806215962888</pre>
+
+<p>Notare che:</p>
+
+<ul>
+ <li>È necessario includere questo script nella tua pagina HTML con un elemento {{htmlelement("script")}} di type="module", in modo tale che sia riconosciuta come modulo e gestita in modo appropriato</li>
+ <li>Non è possibile eseguire moduli JS visitando url <code>file://</code> perché riceveresti un errore per violazione delle regole <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a>. È necessario eseguire questi script tramite un server HTTP</li>
+</ul>
+
+<h3 id="Usare_i_default_export">Usare i default export</h3>
+
+<p>Se vogliamo esportare un singolo valore o avere un valore di default per il tuo modulo, allora possiamo usare il default export:</p>
+
+<pre class="brush: js notranslate">// modulo "my-module.js"
+export default function cube(x) {
+  return x * x * x;
+}
+</pre>
+
+<p>Quindi, in un altro script, puoi importare il modulo direttamente:</p>
+
+<pre class="brush: js notranslate">import cube from 'my-module';
+console.log(cube(3)); // 27
+</pre>
+
+<h3 id="Usare_export_from">Usare export from</h3>
+
+<p>Facciamo l'esempio dove abbiamo i seguenti moduli:</p>
+
+<ul>
+ <li><code>childModule1.js</code>: exporta <code>myFunction</code> e <code>myVariable</code></li>
+ <li><code>childModule2.js</code>: esporta <code>myClass</code></li>
+ <li><code>parentModule.js</code>: è nient'altro che l'aggregatore</li>
+ <li>top level module: utilizza gli export di <code>parentModule.js</code></li>
+</ul>
+
+<p>Questo è come sarebbe con il codice:</p>
+
+<pre class="brush: js notranslate">// Nel modulo childModule1.js
+let myFunction = ...; // assegna una funzione myFunction
+let myVariable = ...; // assegna un valore alla variabile myVariable
+export {myFunction, myVariable};
+</pre>
+
+<pre class="brush: js notranslate">// Nel modulo childModule2.js
+let myClass = ...; // assegna qualcosa di utile a myClass
+export myClass;
+</pre>
+
+<pre class="brush: js notranslate">// Nel modulo parentModule.js
+// Aggreghiamo solamente gli export dai moduli childModule1 e childModule2
+// per poi riesportarli
+export { myFunction, myVariable } from 'childModule1.js';
+export { myClass } from 'childModule2.js';
+</pre>
+
+<pre class="brush: js notranslate">// Nel modulo principale
+// Possiamo usare gli export importandoli da un singolo modulo
+// che li colleziona/include in un singolo modulo
+import { myFunction, myVariable, myClass } from 'parentModule.js'</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifiche</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<p>{{Compat("javascript.statements.export")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>{{jsxref("Statements/import", "import")}}</li>
+ <li><a href="https://wiki.developer.mozilla.org/it/docs/Web/JavaScript/Guide/Modules">JavaScript modules</a> guide</li>
+ <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li>
+ <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a>, Hacks blog post by Lin Clark</li>
+ <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
+</ul>