From 980fe00a74a9ad013b945755415ace2e5429c3c2 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 27 Oct 2021 02:31:24 +0300 Subject: [RU] Remove notranslate (#2874) --- files/ru/web/javascript/guide/modules/index.html | 76 ++++++++++++------------ 1 file changed, 38 insertions(+), 38 deletions(-) (limited to 'files/ru/web/javascript/guide/modules') diff --git a/files/ru/web/javascript/guide/modules/index.html b/files/ru/web/javascript/guide/modules/index.html index 8bf2b4af9c..8416503814 100644 --- a/files/ru/web/javascript/guide/modules/index.html +++ b/files/ru/web/javascript/guide/modules/index.html @@ -43,7 +43,7 @@ translation_of: Web/JavaScript/Guide/Modules

В первом примере (см. директорию basic-modules) у нас следующая структура файлов:

-
index.html
+
index.html
 main.js
 modules/
     canvas.js
@@ -106,7 +106,7 @@ modules/
 
 
Самый простой способ использовать экспорт — поместить конструкцию export перед любыми элементами, которые вы хотите экспортировать из модуля, например:

 
-
export const name = 'square';
+
export const name = 'square';
 
 export function draw(ctx, length, x, y, color) {
   ctx.fillStyle = color;
@@ -125,13 +125,13 @@ export function draw(ctx, length, x, y, color) {
 
 
Более удобный способ экспорта всех элементов, которые вы хотите экспортировать,— использовать одну конструкцию export в конце файла модуля, где указать переменные, функции, классы, который вы хотите экспортировать, через запятую в фигурных скобках. Например:

 
-
export { name, draw, reportArea, reportPerimeter };

+
export { name, draw, reportArea, reportPerimeter };

 
 
Импорт функционала в ваш скрипт

 
 
После того, как вы экспортировали некоторые функции из своего модуля, вам необходимо импортировать их в свой скрипт, чтобы иметь возможность использовать их. Самый простой способ сделать это:

 
-
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

+
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

 
 
Используйте конструкцию {{JSxRef("Statements/import", "import")}}, за которой следует разделенный запятыми список функций, которые вы хотите импортировать, заключённый в фигурные скобки, за которым следует ключевое слово from, за которым следует путь к файлу модуля — путь относительно корня сайта, который для нашего примера basic-modules будет равен /js-examples/modules/basic-modules.

 
@@ -140,11 +140,11 @@ export function draw(ctx, length, x, y, color) {
 
 
Так например:

 
-
/js-examples/modules/basic-modules/modules/square.js

+
/js-examples/modules/basic-modules/modules/square.js

 
 
становится

 
-
./modules/square.js

+
./modules/square.js

 
 
Вы можете найти подобные строки кода в файле main.js.

 
@@ -155,7 +155,7 @@ export function draw(ctx, length, x, y, color) {
 
После того, как вы импортировали функции в свой скрипт, вы можете использовать их так же, как если бы они были определены в этом же файле. 
   Следующий пример можно найти в main.js, сразу за строками импорта:

 
-
let myCanvas = create('myCanvas', document.body, 480, 320);
+
let myCanvas = create('myCanvas', document.body, 480, 320);
 let reportList = createReportList(myCanvas.id);
 
 let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
@@ -177,11 +177,11 @@ reportPerimeter(square1.length, reportList);
 
 
Прежде всего, вам нужно добавить type="module" в <script>-элемент, чтобы объявить, что скрипт является модулем. Чтобы подключить модуль main.js, нужно написать следующее:

 
-
<script type="module" src="main.js"></script>

+
<script type="module" src="main.js"></script>

 
 
Вы также можете встроить скрипт модуля непосредственно в HTML-файл, поместив JavaScript-код внутрь <script>-элемента:

 
-
<script type="module">
+
<script type="module">
   /* код JavaScript модуля */
 </script>

 
@@ -213,25 +213,25 @@ reportPerimeter(square1.length, reportList);
 
Давайте посмотрим на пример, и мы объясним, как это работает.
   В модуле square.js из нашего примера вы можете найти функцию randomSquare(), которая создаёт квардрат случайного цвета и размера со случайными координатами. Мы хотим экпортировать эту функции по умолчанию, поэтому в конце файла пишем следующее:

 
-
export default randomSquare;

+
export default randomSquare;

 
 
Обратите внимание на отсутствие фигурных скобок.

 
 
Кстати, можно было бы определить функцию как анонимную и добавить к ней export default:

 
-
export default function(ctx) {
+
export default function(ctx) {
   ...
 }

 
 
В нашем файле main.js мы импортируем функцию по умолчанию, используя эту строку:

 
-
import randomSquare from './modules/square.js';

+
import randomSquare from './modules/square.js';

 
 
Снова обратите внимание на отсутствие фигурных скобок.
   Такой синтакис допустим, поскольку для каждого модуля разрешен только один экспорт по умолчанию, и мы знаем, что это randomSquare.
   Вышеупомянутая строка является сокращением для:

 
-
import {default as randomSquare} from './modules/square.js';

+
import {default as randomSquare} from './modules/square.js';

 
 

 
Примечание: «as» синтаксис для переименования экспортируемых элементов поясняется ниже в разделе Переименование импорта и экмпорта.

@@ -252,7 +252,7 @@ reportPerimeter(square1.length, reportList);
 
 
Так, например, оба следующих элемента будут выполнять одну и ту же работу, хотя и немного по-разному:

 
-
// внутри module.js
+
// внутри module.js
 export {
   function1 as newFunctionName,
   function2 as anotherNewFunctionName
@@ -261,7 +261,7 @@ export {
 // внутри main.js
 import { newFunctionName, anotherNewFunctionName } from './modules/module.js';

 
-
// внутри module.js
+
// внутри module.js
 export { function1, function2 };
 
 // внутри main.js
@@ -274,11 +274,11 @@ import { function1 as newFunctionName,
 
 
Внутри каждого из этих модулей у нас есть функции с одинаковыми именами, которые экспортируются, и поэтому у каждого из них есть один и тот же оператор export внизу файла:

 
-
export { name, draw, reportArea, reportPerimeter };

+
export { name, draw, reportArea, reportPerimeter };

 
 
Если бы в main.js при их импорте мы попытались использовать

 
-
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
+
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
 import { name, draw, reportArea, reportPerimeter } from './modules/circle.js';
 import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js';

 
@@ -286,7 +286,7 @@ import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js';
 
 
Вместо этого нам нужно переименовать импорт, чтобы он был уникальным:

 
-
import { name as squareName,
+
import { name as squareName,
          draw as drawSquare,
          reportArea as reportSquareArea,
          reportPerimeter as reportSquarePerimeter } from './modules/square.js';
@@ -303,13 +303,13 @@ import { name as triangleName,
 
 
Обратите внимание, что вместо этого вы можете решить проблему в файлах модуля, например.

 
-
// внутри square.js
+
// внутри square.js
 export { name as squareName,
          draw as drawSquare,
          reportArea as reportSquareArea,
          reportPerimeter as reportSquarePerimeter };

 
-
// внутри main.js
+
// внутри main.js
 import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.js';

 
 
И это сработало бы точно так же.
@@ -322,11 +322,11 @@ import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from
   Существует решение получше — импортировать функции каждого модуля внутри объекта модуля.
   Для этого используется следующая синтаксическая форма:

 
-
import * as Module from './modules/module.js';

+
import * as Module from './modules/module.js';

 
 
Эта конструкция берёт все экспорты, доступные внутри module.js и делает их доступными в качестве свойств объекта Module, фактически давая ему собственное пространство имен. Так например:

 
-
Module.function1()
+
Module.function1()
 Module.function2()
 

 и т.д.
@@ -335,11 +335,11 @@ Module.function2()
   вы снова увидите тот же самый пример, но переписанный с учётом преимуществ этого нового синтаксиса.
   В модулях все экспорты представлены в следующей простой форме:

 
-
export { name, draw, reportArea, reportPerimeter };

+
export { name, draw, reportArea, reportPerimeter };

 
 
С другой стороны, импорт выглядит так:

 
-
import * as Canvas from './modules/canvas.js';
+
import * as Canvas from './modules/canvas.js';
 
 import * as Square from './modules/square.js';
 import * as Circle from './modules/circle.js';
@@ -347,7 +347,7 @@ import * as Triangle from './modules/triangle.js';

 
 
В каждом случае теперь вы можете получить доступ к импорту модуля под указанным свойством объекта, например:

 
-
let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
+
let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
 Square.reportArea(square1.length, reportList);
 Square.reportPerimeter(square1.length, reportList);

 
@@ -360,7 +360,7 @@ Square.reportPerimeter(square1.length, reportList);

 
Вы можете увидеть пример нашего модуля для рисования фигур, переписанного с помощью классов ES в нашей classes директории.
   В качестве примера, файд square.js теперь содержит всю свою функциональность в одном классе:

 
-
class Square {
+
class Square {
   constructor(ctx, listId, length, x, y, color) {
     ...
   }
@@ -374,15 +374,15 @@ Square.reportPerimeter(square1.length, reportList);

 
 
который мы затем экспортируем:

 
-
export { Square };

+
export { Square };

 
 
Далее в main.js, мы импортируем его так:

 
-
import { Square } from './modules/square.js';

+
import { Square } from './modules/square.js';

 
 
А затем используем импортированный класс, чтобы нарисовать наш квадрат:

 
-
let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
+
let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
 square1.draw();
 square1.reportArea();
 square1.reportPerimeter();

@@ -393,7 +393,7 @@ square1.reportPerimeter();

   У вас может быть несколько уровней зависимостей, где вы хотите упростить вещи, объединив несколько подмодулей в один родительский модуль.
   Это возможно с использованием следующего синтаксиса экспорта в родительском модуле:

 
-
export * from 'x.js'
+
export * from 'x.js'
 export { name } from 'x.js'

 
 
Для примера посмотрите на нашу директорию module-aggregation.
@@ -402,7 +402,7 @@ export { name } from 'x.js'

   Мы также переместили наши подмодули в дочернюю директорию внутри директории modules под названием shape.
   Итак, структура модуля в этом примере:

 
-
modules/
+
modules/
   canvas.js
   shapes.js
   shapes/
@@ -412,12 +412,12 @@ export { name } from 'x.js'

 
 
В каждом из подмодулей экспорт имеет одинаковую форму, например:

 
-
export { Square };

+
export { Square };

 
 
Далее идет агрегирование.
   Внутри shapes.js, мы добавляем следующие строки:

 
-
export { Square } from './shapes/square.js';
+
export { Square } from './shapes/square.js';
 export { Triangle } from './shapes/triangle.js';
 export { Circle } from './shapes/circle.js';

 
@@ -429,13 +429,13 @@ export { Circle } from './shapes/circle.js';

 
 
Итак, теперь в файле main.js мы можем получить доступ ко всем трём классам модулей, заменив:

 
-
import { Square } from './modules/square.js';
+
import { Square } from './modules/square.js';
 import { Circle } from './modules/circle.js';
 import { Triangle } from './modules/triangle.js';

 
 
на единственную строку кода:

 
-
import { Square, Circle, Triangle } from './modules/shapes.js';

+
import { Square, Circle, Triangle } from './modules/shapes.js';

 
 
Динамическая загрузка модулей

 
@@ -446,7 +446,7 @@ import { Triangle } from './modules/triangle.js';

 
Поддержка динамической загрузки модулей позволяет вызывать {{JSxRef("Statements/import", "import()", "#Dynamic_Imports")}} в качестве функции, передав ей аргументом путь к модулю.
  Данный вызов возвращает {{JSxRef("Promise")}}, который резолвится объектом модуля (см. Создание объекта модуля), предоставляя вам доступ к экспорту указанного модуля, например:

 
-
import('./modules/myModule.js')
+
import('./modules/myModule.js')
   .then((module) => {
     // делаем что-то с функционалом из импортированного модуля
   });

@@ -460,11 +460,11 @@ import { Triangle } from './modules/triangle.js';

 
 
Далее в main.js мы взяли ссылку на каждую кнопку, используя вызов document.querySelector():

 
-
let squareBtn = document.querySelector('.square');

+
let squareBtn = document.querySelector('.square');

 
 
Затем мы добавляем обработчик событий на каждую кнопку, чтобы при нажатии соответствующий модуль динамически загружался и использовался для рисования фигуры:

 
-
squareBtn.addEventListener('click', () => {
+
squareBtn.addEventListener('click', () => {
   import('./modules/square.js').then((Module) => {
     let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
     square1.draw();
-- 
cgit v1.2.3-54-g00ecf