PS: Эта статья была впервые опубликована в моем блоге здесь

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

В этой статье я расскажу вам о модулях ES6, о том, что они из себя представляют, как их использовать и почему вам это должно быть небезразлично {0 [] 0}

Что такое модуль?

В JavaScript слово «модули» относится к небольшим блокам независимого многоразового кода. Они являются основой многих шаблонов проектирования JavaScript и критически необходимы при создании любого существенного приложения на основе JavaScript.

Проще говоря, модули помогают писать код в модуле и открывают только те части кода, к которым должны получить доступ другие части кода.

В JavaScript уже давно есть модули. Однако они были реализованы с помощью библиотек, а не встроены в язык. ES6 - это первый случай, когда JavaScript имеет встроенные модули.

  • Каждый модуль - это фрагмент кода, который выполняется после загрузки файла JavaScript.
  • В этом коде могут быть объявления (переменные, функции, классы и т. Д.).
  • По умолчанию каждое объявление в этом файле остается локальным для этого модуля и не может быть доступно в других модулях, если файл модуля не экспортирует их.

Что такое модули ES6?

Раньше было невозможно напрямую ссылаться на один файл JavaScript или включать его в другой, поэтому разработчики прибегали к альтернативным вариантам, таким как несколько тегов сценария HTML.

<script src="app.js"></script>
<script src="search.js"></script>
<script src="user.js"></script>
<script>
console.log('inline code');
</script>

Это плохая практика, поскольку каждый сценарий инициирует новый HTTP-запрос, который влияет на производительность страницы и нарушает дальнейшую обработку во время ее выполнения.

Допустим, у нас есть файл app.js, и в этот файл включена функция, которая проверяет каждое ограничение в числе и возвращает, ЧЕТНОЕ или НЕЧЕТНОЕ.

function showNumbers(limit) {
for (let i = 0; i <= limit; i++) {
const message = (i % 2 === 0) ? 'EVEN' : 'ODD';
console.log(i, message);
  }
}

Теперь эта функция доступна только в app.js. Где бы вам ни понадобилась эта функция, вы должны либо переписать функцию, либо снова прикрепить скрипт.

Здесь на помощь приходят модули ES6 :)

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

Перед выпуском ES2015 существовало как минимум 3 основных модуля, конкурирующих со стандартами:

  • Определение асинхронного модуля (AMD)
  • Модули RequireJS
  • Модули CommonJS

Поэтому в ES6 (ES2015) был предложен единый стандарт собственных модулей.

Модули ES6 - это очень мощная концепция, хотя поддержка пока доступна не везде, распространенный способ их использования - перенос в ES5. Вы можете использовать Grunt, Gulp, Webpack, Babe l или какой-либо другой транспилятор для компиляции модулей в процессе сборки.

Транспилеры или компиляторы преобразования исходного кода в исходный - это инструменты, которые считывают исходный код, написанный на одном языке программирования, и создают эквивалентный код на другом языке. (Википедия)

Браузеры с поддержкой модулей ES6, май 2017 г. [Источник]

То, что вы должны знать!

  • Все внутри модуля ES6 по умолчанию является приватным и работает в строгом режиме ('use strict' не требуется).
  • Открытые переменные, функции и классы отображаются с помощью export.
  • Открытые модули вызываются в другие модули с помощью import
  • Модули должны быть включены в ваш HTML с помощью type="module", который может быть встроенным или внешним тегом скрипта.
<script type="module" src="main.js"></script>
<script type="module">
  // or an inline script
</script>
  • Модули отложены и запускаются только после загрузки документа.

Чтобы получить более подробные сведения о модулях ES6, прочтите здесь.

Как использовать модули ES6

Для этой статьи давайте создадим три файла (app.js, math.js и max.js)

В math.js напишем базовый арифметический алгоритм

let sumAll = (a, b) => {return a + b;}
let subtractAll = (a, b) => {return a - b;}
let divideAll = (a, b) => {return a / b;}
let multiplyAll = (a, b) => {return a * b;}
let findModulus = (a, b) => {return a % b;}

Теперь, чтобы сделать этот модуль доступным для других частей нашего кода, нам нужно export их. Есть несколько способов сделать это;

  • Вы можете экспортировать каждый модуль по отдельности:
export let sumAll = (a, b) => {return a + b;}
export let subtractAll = (a, b) => {return a - b;}
export let divideAll = (a, b) => {return a / b;}
export let multiplyAll = (a, b) => {return a * b;}
export let findModulus = (a, b) => {return a % b;}
  • Лучше использовать один оператор экспорта.
let sumAll = (a, b) => {return a + b;}
let subtractAll = (a, b) => {return a - b;}
let divideAll = (a, b) => {return a / b;}
let multiplyAll = (a, b) => {return a * b;}
let findModulus = (a, b) => {return a % b;}
export {sumAll, subtractAll, divideAll, multiplyAll, findModulus};
  • Вы также можете экспортировать значения по умолчанию
export default {sumAll, subtractAll, multiplyAll, divideAll};

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

Теперь, чтобы использовать наши экспортированные модули, нам нужно импортировать их в app.js. Это также можно сделать несколькими способами;

  • Вы можете импортировать индивидуально
import {sumAll} from './math.js';

Давайте протестируем наш импорт

console.log(sumAll(9, 8)); //17
  • Вы можете импортировать сразу несколько модулей:
import {sumAll, subtractAll, divideAll} from './math.js';
  • Вы можете импортировать модули как псевдонимы

В некоторых компьютерных операционных системах и языках программирования псевдоним является альтернативным и обычно более понятным или более значимым именем для определенного объекта данных. Подробнее здесь

import * as math from './math.js';

Здесь мы импортировали все модули в math.js и присвоили им псевдоним math. Чтобы использовать этот импортированный модуль, мы делаем это:

console.log(math.sumAll(50, 10)); // 60
console.log(math.subtractAll(50, 10)); // 40
console.log(math.multiplyAll(50, 10)); // 500
console.log(math.divideAll(50, 10)); // 5
console.log(math.findModulus(50, 15)); // 5
  • Вы также можете импортировать значения по умолчанию
import math from './math.js';
console.log(math.sumAll(5, 2)); // 7

Здесь мы импортировали sumAll() в math.js и назначили его псевдониму math. Здесь нет необходимости добавлять * as.

Если вы не экспортируете как default и импортируете с помощью этого метода, вы получите следующую ошибку:

Uncaught SyntaxError: The requested module './math.js' does not provide an export named 'default'

Чтобы использовать этот метод, вы должны экспортировать sumAll() как default

export default {sumAll};
  • Вы также можете использовать абсолютный путь для импорта модуля, чтобы ссылаться на модули, определенные в другом домене:
import {sumAll} from 'https://bolaji-module.glitch.me/sumAll.js';
console.log(sumAll(50, 10)); // 60

Примечание. Модули загружаются с помощью CORS. Это означает, что если вы ссылаетесь на сценарии из других доменов, они должны иметь допустимый заголовок CORS, который разрешает межсайтовую загрузку.

Модули импортируются либо с абсолютными, либо с относительными ссылками и должны начинаться с «/», «./» или «../».

import {sumAll} from 'math.js'; ❌
import {sumAll} from 'lib/max.js'; ❌
import {sumAll} from './math.js'; ✔️
import {sumAll} from '../max.js'; ✔️
import {sumAll} from 'https://bolaji-module.glitch.me/sumAll.js'; ✔️
  • Вы можете импортировать несколько модулей из разных файлов, в нашем max.js добавьте это:
let max = (a, b) => {
return (a > b) ? a : b;
}
export {max};

Теперь вы можете импортировать max.js и math.js вместе в app.js

import * as math from './math.js';
import {max} from './max.js';
console.log(max(50, 10)); // 50
console.log(math.subtractAll(50, 10)); // 40
console.log(math.multiplyAll(50, 10)); // 500
console.log(math.divideAll(50, 10)); // 5

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

Некоторые преимущества использования модулей

  • Код можно разделить на более мелкие файлы с автономной функциональностью.
  • Можно объединить несколько сценариев, что повысит производительность.
  • Отладка становится проще.
  • Любой код, ссылающийся на модуль, понимает, что это зависимость. Если файл модуля изменяется или перемещается, проблема сразу становится очевидной.
  • Модули (обычно) помогают устранить конфликты именования. Функция sumAll() в модуле1 не может конфликтовать с функцией sumAll() в модуле2. Здесь очень полезны псевдонимы, это становится module1.sumAll() и module2.sumAll().
  • Модули ES6 всегда выполняются в strict mode, поэтому ‘use strict’ не требуется.
  • Модули ES6 помогут вам лучше организовать ваш код

ЗАКЛЮЧЕНИЕ

Модули ES6 - одна из самых больших функций, представленных в современных браузерах. Современные JavaScript-фреймворки, такие как Vue JS и React JS, используют эту функцию.

Вы также должны знать, что модули ES6 поддерживаются не всеми браузерами. Для производственных приложений транспилеры, такие как Webpack и Babel, используются для преобразования нашего кода из ES6 в ES5 для обеспечения кросс-браузерной совместимости.

Что касается этой статьи, завтра я напишу еще две статьи, чтобы показать вам, как использовать Babe l в качестве транспайлера (статья будет охватывать вводное руководство по установке и настройке Babel) и как эффективно работать с node_modules в разработке и производстве.

Подпишитесь на мою рассылку здесь и получайте уведомления, когда она упадет!

Итак, пока вы ждете статьи о Babel transpiler, практикуйте все, что вы узнали из этой статьи, используйте ее в разных проектах и ​​пробуйте все методы, описанные, чтобы лучше понять модули ES6.

ОБНОВИТЬ

Вот статья "Введение в Babel и JavaScript Bundlers".



Введение в Babel и JavaScript Bundlers
Как уже говорилось в моей предыдущей статье, модули ES6 - очень мощная концепция. Хотя поддержка недоступна… www.bolajiayodeji.com



Вам нужно сделать две вещи

Используйте Live-сервер для запуска ваших HTML-файлов.

Загрузите веб-сервер для Chrome здесь

Вы также можете использовать расширения Live-сервера в редакторе кода: VScode, Atom

Не забудьте добавить type="module" при добавлении основного скрипта

При использовании транспайлеров все это вам не понадобится.

Посмотрите мою последнюю статью, которую я написал на Manipulating JavaScript Arrays



Управление массивами в JavaScript
Массивы стали важной частью любого языка программирования. В большинстве случаев нам нужно выполнить несколько операций на… bolajiayodeji.com



Если возникли вопросы или возникли вопросы, задавайте их в комментариях!