diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/uk/web/javascript/reference/statements/export | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/uk/web/javascript/reference/statements/export')
| -rw-r--r-- | files/uk/web/javascript/reference/statements/export/index.html | 205 |
1 files changed, 0 insertions, 205 deletions
diff --git a/files/uk/web/javascript/reference/statements/export/index.html b/files/uk/web/javascript/reference/statements/export/index.html deleted file mode 100644 index ef946fa4e4..0000000000 --- a/files/uk/web/javascript/reference/statements/export/index.html +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: export -slug: Web/JavaScript/Reference/Statements/export -translation_of: Web/JavaScript/Reference/Statements/export ---- -<div>{{jsSidebar("Statements")}}</div> - -<p><span class="seoSummary">Вираз <strong><code>export</code></strong> використовується для створення модулів у Javascript для експортування функцій, об'єктів, або примітивних значень з модуля щоб їх можна було використовувати в інших програмах за допомогою виразу {{jsxref("Statements/import", "import")}}.</span></p> - -<p>Експортовані модулі знаходяться в {{jsxref("Strict_mode","strict mode")}} незалежно від того чи ви оголошуєте їх як такі чи ні. Вираз експорт не може бути використаним в вбудованих скріптах (embedded scripts).</p> - -<h2 id="Синтакс">Синтакс</h2> - -<p>Існує три види експортів</p> - -<ol> - <li>Іменовані експорти (Нуль або більше експортів в модулі)</li> - <li>Дефолтний експорт (Один на модуль)</li> - <li>Гібридні експорти</li> -</ol> - -<pre class="syntaxbox">// Експортування індивідуальних властивостей -export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // також var, const -export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // також var, const -export function functionName(){...} -export class ClassName {...} - -// Список експортів -export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> }; - -// Перейменування експортів -export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> }; - -// Експортування деструктивних значень з перейменуванням -export const { <var>name1</var>, <var>name2: bar</var> } = o; - -// Дефолтні експорти -export default <em>expression</em>; -export default function (…) { … } // також class, function* -export default function name1(…) { … } // також class, function* -export { <var>name1</var> as default, … }; - -// Агрегаціямодулів -export * from …; // не встановлює дефолтний експорт -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><var>nameN</var></code></dt> - <dd>Змінна яку потрібно експортувати (щоб імпортувати за допомогою {{jsxref("Statements/import", "import")}} в іншому скрипті).</dd> -</dl> - -<h2 id="Опис">Опис</h2> - -<p>Існує два типи експортів, <strong>іменовані</strong> і <strong>дефолтні</strong>. Ви можете мати багато іменованих в модулі, але тільки один дефолтний експорт. Кожен тип має відповідність у синтаксі наведеному вище:</p> - -<p>Іменовані експорти:</p> - -<pre class="brush: js">// експорт функціоналу оголошеного раніше -export { myFunction, myVariable }; - -// експортуємо індивідуальний функціонал (можу бути var, let, -// const, function, class) -export let myVariable = Math.sqrt(2); -export function myFunction() { ... }; -</pre> - -<p>Дефолтні експорти:</p> - -<pre class="brush: js">// експорт функціоналу оголошеного раніше як дефолтний -export { myFunction as default }; - -// експорт індивідуального функціоналу як дефолтний -export default myFunction() { ... } -export default class { .. }</pre> - -<p>Іменоввані експорти є корисними при експортуванні декількох значень. Під час імпорту іменованих експортів обов'язково потрібно використовувати те саме ім'я відповідного об'єкта.</p> - -<p>Але дефолтний експорт може бути імпортований з будь яким ім'ям, наприклад:</p> - -<pre class="brush: js">// файл test.js -let k; export default k = 12; -</pre> - -<pre class="brush: js">// якийсь інший файл -import m from './test'; // Візьміть до уваги що ми можемо використовувати import m замість import k, тому що k є дефолтним експортом -console.log(m); // виведе 12 -</pre> - -<p>Ви також можете переіменовувати іменні експорти щоб уникнути конфліктів:</p> - -<pre class="brush: js">export { <var>myFunction</var> as <var>function1</var>,<var> - myVariable</var> as variable };</pre> - -<p>І складати підмодулі докупи в батьківському модулі щоб можна було їх імпортувати з цього модуля.</p> - -<pre class="brush: js">// В parentModule.js -export { myFunction, myVariable } from 'childModule1.js'; -export { myClass } from 'childModule2.js'; -</pre> - -<pre class="brush: js">// В модулі вищого рівня -import { myFunction, myVariable, myClass } from 'parentModule.js'</pre> - -<h2 id="Приклад">Приклад</h2> - -<h3 id="Використання_іменних_експортів">Використання іменних експортів</h3> - -<p>В модулі <code>my-module.js</code>, ми можемо написати такий код:</p> - -<pre class="brush: js">// модуль "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>Потім у модулі вищого порядку всередині вашої HTML сторінки ми можемо написати:</p> - -<pre class="brush: js">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>Важливо звернути увагу на наступне:</p> - -<ul> - <li>Ви маєте добавити скріпт в ваш HTML за допомогою тега {{htmlelement("script")}} і типом type="module", якщо хочете щоб він розпізнавався як модуль.</li> - <li>Ви не можете виконувати JS модулі за допомогою <code>file://</code> URL — ви отримаєте <a href="/en-US/docs/Web/HTTP/CORS">CORS</a> помилки. Ви маєте виконувати модулі церез http сервер.</li> -</ul> - -<h3 id="Використання_дефолтного_експорта">Використання дефолтного експорта</h3> - -<p>Якщо ви хочете експортувати одне значення з вашого модулю ви можете використати дефолтний екпорт:</p> - -<pre class="brush: js">// модуль "my-module.js" - -export default function cube(x) { - return x * x * x; -} -</pre> - -<p>Потім, у дефолтному скрипті імпортувати напряму це значення:</p> - -<pre class="brush: js">import cube from './my-module.js'; -console.log(cube(3)); // 27 -</pre> - -<h2 id="Специфікація">Специфікація</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Підтримка_браузерами">Підтримка браузерами</h2> - - - -<p>{{Compat("javascript.statements.export")}}</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li>{{jsxref("Statements/import", "import")}}</li> - <li><a href="/en-US/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> |
