Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Представьте себе поселенцев, строящих свой первый маленький городок. В нем всего несколько зданий: пара домов, почта и вокзал. Он такой маленький, что люди могут указывать любое здание по названию: "давай встретимся у почты" или "я живу во втором доме".

2 С ростом города строилось больше зданий. Вскоре людям пришлось делать выбор:

3 <ul><li>давать каждому новому зданию уникальный номер или название</li>

4 <li>дробить город на улицы</li>

5 </ul>Конечно, они могли использовать первый способ и просто давать уникальные номера и названия новым строениям, чтобы никогда не было двух зданий с номером 5. Это подходящее, но не самое гениальное решение, особенно для крупного города. Мой адрес: "Нью-Йорк, здание 654 931". Звучит как ерунда.

6 Большинство выбирает второй путь: делить город на улицы, обычно - прямые линии, и идентификаторы домов - названия или цифры - становятся уникальными в пределах улицы. В городе много зданий с номером 5, но они все расположены на разных улицах, поэтому все в порядке.

7 Именно поэтому в вашем компьютере есть директории. Без них все ваши файлы хранились бы в одном месте, где вы не смогли бы хранить два файла с одинаковым названием. Когда есть директории, то создавая новый файл, вам нужно заботиться об именах только в текущей директории.

8 Эта система деления чего угодно на улицы, блоки или директории позволяет нам объединять вещи в значимые модули. Уолл-стрит - это улица банков и финансов. Своеобразный модуль Нью-Йорка с собственной задачей. У вас есть директория "Видео" и вы знаете, что она только для особого типа файлов - видео.

9 Первые программисты были поселенцами в новом и странном мире компьютеров. Они столкнулись с подобной проблемой и встали перед выбором.

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

11 Или они могли бы пойти вторым путем: разделить код на небольшие модули. Модули могут храниться в отдельных файлах, а имена функций и констант будут уникальными только в пределах файла, но не во всей программе. И модули можно легко переиспользовать в разных проектах, без копирования и вставки.

12 У разных языков программирования разные подходы к этой задаче. В JavaScript он довольно простой: один файл - один модуль. Все упражнения, которые вы выполняете в этом курсе - это написание модулей.

13 Иногда нам нужно объединять код из разных файлов. Если вы просто напишете код в разных файлах, интерпретатор JavaScript не поймет, как получить что-то из другого файла.

14 <h3>Экспорт и два способа импорта</h3>

15 Давайте посмотрим на пример, где у нас есть файл math.js:

16 Это наша крошечная математическая библиотека.

17 Создадим другой файл под именем planets.js со следующим содержанием:

18 Код здесь не будет работать, потому что surfaceArea и square здесь не существуют. Они в другом файле, о котором JavaScript пока не знает. Нам нужно сказать ему заглянуть в другой файл. Это называется "импортом" - давайте импортируем именно те функции, что нам нужны, по их имени:

19 Ключевое слово import, затем список того, что мы хотим, в фигурных скобках, а затем название модуля. Файл в той же директории, что и planets.js, поэтому './math.js' означает "взять из файла math.js, расположенного в той же (текущей) директории".

20 Когда вы импортируете что-то из Китая, что происходит в Китае? Верно, экспорт. Поэтому наша математическая библиотека должна исполнить свою роль - "экспортировать".

21 Поставьте export перед тем, что вы хотите экспортировать. Такая операция сделает это импортируемым куда угодно:

22 Просто укажите export перед чем угодно, и это можно будет "импортировать" в другой файл. Тут мы экспортируем все. Еще один способ экспортировать несколько значений:

23 Возвратимся к planets.js. Допустим, мы хотим импортировать что-то еще. Мы можем просто добавить названия в список:

24 Или импортировать все сразу:

25 Это значит: "импортировать весь модуль и назвать его mathematics в этом модуле". Вот почему к импортированным сущностям обращение происходит через mathematics, например, mathematics.surfaceArea:

26 mathematics+ точка + имя функции.

27 Теперь, если мы добавим функцию square в этот же файл, никакого конфликта не возникнет:

28 В этом примере в первом случае была вызвана функция возведения в квадрат из модуля math, а во втором случае был вызов местной функции неправильного возведения в квадрат.

29 <h3>Экспорт по умолчанию</h3>

30 И последнее: часто вам требуется экспортировать из модуля что-то одно. Существует специальный механизм, который называется "экспорт по умолчанию", и вы можете экспортировать с помощью него только что-то одно. Но экспортированную по умолчанию вещь проще импортировать.

31 Можно также экспортировать функцию или константу без имени:

32 Просто напишите код, как обычно, без специально указанных экспортов, а в конце выполните export default что-нибудь. В данном случае мы экспортируем функцию surfaceArea.

33 Импорт по умолчанию выглядит так:

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

35 math.js

36 import1.js:

37 import2.js:

38 Экспорт по умолчанию может сочетаться с обычным экспортом, а экспортировать элементы можно по отдельности:

39 Импорт может выглядеть так:

40 Ключевое слово as позволяет задать псевдоним для импортируемой сущности. Благодаря этому появляется возможность импортировать элементы с одинаковыми именами:

41 <h3>Расширение файла при импорте модуля</h3>

42 Указание расширения файла гарантирует, что он будет проанализирован как модуль<a>Node.js</a>и<a>d8</a>и другими средами выполнения, а также<a>Babel</a>и другими инструментами сборки. Если Babel разрешает опустить расширение файла, то<a>официальная документация Node.js</a>устанавливает конкретное требование:

43 <blockquote>При использовании ключевого слова import необходимо указать расширение файла. Пути каталогов (например,'./startup/index.js') также должны быть полностью указаны.

44 Этот подход обеспечивает идентичное поведение import в среде браузера и на сервере с типовой конфигурацией.

45 </blockquote><h4>Резюме</h4>

46 Вы можете дробить код на отдельные модули. В JavaScript один модуль - это один файл.

47 Объединение кода, расположенного в разных модулях, происходит через:

48 <ol><li>Экспорт чего-то из модуля</li>

49 <li>Импорт в другой модуль</li>

50 </ol>Почти все уроки этого и других курсов на Хекслете используют модули. Такой подход максимально приближает нас к реальной жизни, когда проекты состоят из сотен, тысяч файлов и библиотек, которые пользуются друг другом.

51 При работе с модулями будет полезным сразу наработать некоторые модели поведения, позволяющие вам с легкостью определять, какой код вам доступен на исполнение, откуда пришел этот код и как его увидеть.

52 Ниже описан основной алгоритм, по которому нужно анализировать файл с кодом, над которым вы сейчас работаете. Этот алгоритм не является специфичным для работы в среде Хекслета, так нужно делать в принципе:

53 <ol><li>Внимательно изучите все импорты, описанные в начале файла. Так вы узнаете, какие модули и функции доступны внутри вашего файла (не считая глобальных функций и модулей, которые доступны и без импорта, например, Math)</li>

54 <li>Попробуйте классифицировать импортируемые функции. Если импорт выглядит так from './...', то есть содержит ./, значит импортируется модуль, содержимое которого находится в текущей файловой системе. Это автоматически означает несколько вещей. Первое: вы всегда можете открыть этот файл и посмотреть, что там написано. Второе: вы не сможете импортировать этот модуль в другой среде (ведь этого файла там нет)</li>

55 <li>Если from 'name' содержит только имя, без ./ в начале, значит, модуль подгружается либо из стандартной библиотеки nodejs, либо из установленных пакетов. Визуально невозможно отличить одно от другого. Попробуйте загуглить имя таким способом: "nodejs name". Если в выдаче будет ссылка на официальную документацию, значит, это модуль nodejs; если на репозиторий npm - значит, это обычный пакет, который почти наверняка лежит на гитхабе, что можно проверить таким запросом: "github js name", где "name" это имя пакета</li>

56 </ol>