initial commit

1 files changed, 223 insertions, 0 deletions

diff --git a/files/pt-br/web/javascript/reference/statements/export/index.html b/files/pt-br/web/javascript/reference/statements/export/index.html
new file mode 100644
index 0000000000..f429a13988
--- /dev/null
+++ b/files/pt-br/web/javascript/reference/statements/export/index.html
@@ -0,0 +1,223 @@
+---
+title: export
+slug: Web/JavaScript/Reference/Statements/export
+translation_of: Web/JavaScript/Reference/Statements/export
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>O export é utilizado quando criamos módulos JavaScript para exportar ligações em tempo real para suas funções, objetos ou valores primitivos de um módulo sejam utilizados por outros programas através de declarações {{jsxref("Statements/import", "import")}}. Ligações que são exportadas ainda podem ser modificadas localmente; quando importadas, embora elas possam ser lidas somente pelo módulo que as importou, seu valor é atualizado sempre que ela modificada pelo módulo que a exportou.</p>
+
+<p>Módulos exportados ficam em {{jsxref("Strict_mod", "strict mode")}}, independentemente se é declarado dessa forma, ou não. Export não pode ser utilizado em scripts embutidos.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<p>Há dois tipos de exportação:</p>
+
+<ol>
+ <li>Exportações Explícitas (Named Exports) (Zero ou mais exports por módulo)</li>
+ <li>Exportações Padrão (Default Exports) (Uma por módulo)</li>
+</ol>
+
+<pre class="syntaxbox notranslate">// Exportando recursos individuais
+export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // também var, const
+export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // também var, const
+export function functionName(){...}
+export class ClassName {...}
+
+// Lista de exportações
+export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> };
+
+// Renomeando exports
+export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> };
+
+// Exportando atribuições desestruturadas renomeando
+export const { <var>name1</var>, <var>name2: bar</var> } = o;
+
+// Exportações Padrão (Default exports)
+export default <em>expression</em>;
+export default function (…) { … } // também class, function*
+export default function name1(…) { … } // também class, function*
+export { <var>name1</var> as default, … };
+
+// Agregando módulos
+export * from …; // não define a exportação padrão
+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>Identificador para ser exportado (assim ele pode ser importado via <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> em outro script).</dd>
+</dl>
+
+<h2 id="Descrição">Descrição</h2>
+
+<p>Há dois diferentes tipos de export, explícito(named) e padrão(default).  Pode-se ter várias exportações explícitas por módulo, mas apenas uma padrão. Cada tipo corresponde à uma da síntaxe acima:</p>
+
+<p>Exportações explícitas:</p>
+
+<pre class="brush: js notranslate">// exporta recursos declarados anteriomente
+export { myFunction, myVariable };
+
+// exporta recursos individuais (pode exportar var, let,
+// const, function, class)
+export let myVariable = Math.sqrt(2);
+export function myFunction() { ... };</pre>
+
+<p>Exportação padrão (pode ser feita apenas uma por script):</p>
+
+<pre class="brush: js notranslate">// exporta um recurso declarado anteriormente como padrão
+export { myFunction as default };
+
+// exporta recursos individuais como padrão
+export default function () { ... }
+export default class { .. }</pre>
+
+<p>Exportações explícitas são úteis para exportar vários valores. Durante a importação, é obrigatório usar o mesmo nome do objeto correspondente.</p>
+
+<p>Mas a exportação padrão pode ser importada com qualquer nome, por exemplo:</p>
+
+<pre class="brush: js notranslate">// arquivo test.js
+let k; export default k = 12;
+</pre>
+
+<pre class="brush: js notranslate">// algum outro arquivo
+import m from './test'; // note que temos a liberdade de usar import m ao invés de import k, porque k era uma exportaçào padrão
+console.log(m);        // vai retornar log 12
+</pre>
+
+<p>Você também pode renomear exportações explícitas para evitar conflitos e nome:</p>
+
+<pre class="brush: js notranslate">export { <var>myFunction</var> as <var>function1</var>,<var>
+         myVariable</var> as variable };</pre>
+
+<h3 id="Re-exportando_Agregando">Re-exportando / Agregando</h3>
+
+<p>É possível também "importar/exportar" de módulos diferentes em um módulo pai, de modo que eles estejam disponíveis para serem importados daquele módulo. Em outras palavras, pode-se criar um módulo único concentrando várias exportações de vários módulos.</p>
+
+<p>Isto pode ser feito com a sintaxe "export from":</p>
+
+<pre class="brush: js notranslate">export { default as function1,
+         function2 } from 'bar.js';
+</pre>
+
+<p>O que é comparável com um combinação de import e export:</p>
+
+<pre class="brush: js notranslate">import { default as function1,
+         function2 } from 'bar.js';
+export { function1, function2 };
+</pre>
+
+<p>Mas onde <code>function1</code> e <code>function2</code> não ficam disponíveis dentro do módulo atual.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Os exemplos a seguir são sintaticamente inválidos apesar de sua equivalência com o import:</p>
+</div>
+
+<pre class="brush: js notranslate">import DefaultExport from 'bar.js'; // Válido
+</pre>
+
+<pre class="brush: js notranslate">export DefaultExport from 'bar.js'; // Inválido</pre>
+
+<p>O modo correto de fazer isso e renomeando o export:</p>
+
+<pre class="brush: js notranslate">export { default as DefaultExport } from 'bar.js';
+</pre>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_exportações_explícitas">Usando exportações explícitas</h3>
+
+<p>Em um módulo <code>my-module.js</code> poderiamos usar o seguinte código:</p>
+
+<pre class="brush: js notranslate">// módulo "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('Da função draw de graph');
+  }
+}
+
+export { cube, foo, graph };</pre>
+
+<p>Então, no módulo principal incluído sem sua página HTML, poderíamos ter:</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>É importante notar o seguinte:</p>
+
+<ul>
+ <li>Você pode incluir esse script no seu código HTML através do elemento {{htmlelement("script")}} do tipo="module", de modo que ele seja reconhecido e tratado apropriadamente.</li>
+ <li>Você não pode executar módulos JS através de <code>file://</code> URL — você receberá errors <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a>. Você deve rodá-los através de um servidor HTTP.</li>
+</ul>
+
+<h3 id="Usando_a_exportação_padrão">Usando a exportação padrão</h3>
+
+<p>Se queremos exportar um valor sozinho ou obter um valor de reserva para o nosso módulo, nós poderiamos usar <code>export default</code>:</p>
+
+<pre class="brush: js notranslate">// módulo "my-module.js"
+export default function cube(x) {
+  return x * x * x;
+}
+</pre>
+
+<p>Daí em outro script podemos usar:</p>
+
+<pre class="brush: js notranslate">import cube from 'my-module';
+console.log(cube(3)); // 27
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade">Compatibilidade</h2>
+
+
+
+<p>{{Compat("javascript.statements.export")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{jsxref("Statements/import", "import")}}</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="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
+</ul>