Практическое руководство по модулям ES6

Автор оригинала: FreeCodeCamp Community Member.

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

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

TL; DR – если вы хотите увидеть практический пример, где мы создаем приборную панель, используя модули ES6 из архитектурного дизайна, перейдите в раздел 4.

Вот что мы обратим

Почему модули ES6 необходимы
Назад в дни, когда скрипты были загружены вручную
Как работают модули ES6 ( Импорт vs Экспорт )
Давайте построим приборную панель с модулями
Техника оптимизации пример прибора

1. Почему модули ES6 необходимы

Давайте просмотрим пару сценариев относительно того, почему модули актуальны.

Сценарий 1 – не изобретайте колесо

Как разработчики, мы часто воссоздаваем вещи, которые уже созданы, даже не будучи осознавать, или копировать и вставлять вещи, чтобы сократить время. В конце его добавляют, и мы остались с x количество идентичных копий, разбросанных по всему приложению. И за каждый раз нам нужно что-то изменить, мы должны сделать это X раз в зависимости от того, сколько у нас копий.

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

Сценарий 2- Барьер знаний

Если система глубоко запутана, и отсутствие документации, ее сложнее для старых/новых разработчиков узнать, как работает приложение, и как все связаны.

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

Сценарий 3 – неожиданное поведение

Избегая отделения проблем (принцип проектирования), он может привести к неожиданному поведению.

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

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

2. Вернитесь в дни, когда сценарии были загружены вручную

Если вы закончили веб-разработки на пару лет, то вы определенно столкнулись с конфликтами зависимости, такие как скрипты, не загружающиеся в правильном порядке, или что элементы дерева DOM не могут быть доступны JS.

Причина в том, что HTML на странице загружена в порядке, в котором оно появляется, что означает, что мы не можем загружать сценарии перед контентом внутри DY> Элемент завершил загрузку.

Например, если вы попытаетесь получить доступ к элементу в пределах Тег Использование Document.GetElementById («Имя идентификатора») И элемент еще не загружен, то вы получаете неопределенную ошибку. Чтобы убедиться, что скрипты загружены правильно, мы можем использовать и отложить async. Первые убедитесь, что каждый скрипт нагрузки в закупорке появляется, пока последние загружают скрипт всякий раз, когда он становится доступным.

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

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

Разлуки

В общем, загрузка скриптов, как показано выше, не является хорошей идеей с точки зрения производительности, зависимостей и ремонтопригодности. Мы не хотим index.html Файл, чтобы загрузка всех скриптов – нам нужна какая-то структура и разделение логики.

Решение состоит в том, чтобы использовать синтаксис ES6, Импорт и Экспорт Заявления, элегантный и ремонтный подход, который позволяет нам сохранять разлученные вещи и доступны только тогда, когда нам это нужно.

Импортные и экспортные операторы

Экспорт Ключевое слово используется, когда мы хотим сделать что-то доступное где-то, а Импорт используется для доступа к тому, что Экспорт сделал доступен.

И что мы можем на самом деле Экспорт ?

Переменная
Объектный литерал
Класс
Функция
++

Чтобы упростить пример, как показано выше, мы можем обернуть все сценарии один файл.

import { jquery } from './js/jquery.js';
import { script2 } from './js/script2.js';
import { script3 } from './js/script3.js';
import { script4 } from './js/script4.js';

А потом просто загрузить app.js Сценарий в нашем index.html Отказ Но сначала, чтобы сделать его работать, нам нужно использовать Тип = "Модуль" ( Источник ) Так что мы можем использовать Импорт и Экспорт для работы с модулями.

Как вы можете видеть, index.html Теперь несет ответственность за один скрипт, который облегчает сохранение и масштабирование. Короче говоря, app.js Сценарий становится нашей точкой входа, которую мы можем использовать для загрузки нашего приложения.

Примечание. Я бы не рекомендовал, чтобы все сценарии загружены в один файл, например app.js кроме тех, которые требуют этого.

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

3. Как работают модули ES6

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

Какова цель?

Инкапсулировать поведение
Легко работать с
Легко поддерживать
Легко в масштабе

Да, это облегчает развитие!

Так что же действительно компонент?

Компонент может быть переменной, функцией, классом и пр. Другими словами, все, что можно экспортировать на Экспорт Заявление – это компонент (или вы можете вызвать его блок, единицу и т. Д.).

Так что на самом деле действительно модуль?

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

Это проблема, чтобы сделать все многоразовые

Принципиальный инженер с более чем 30-летним опытом работы в электротехнике однажды сказал, мы не можем ожидать, что все будет повторно использовано из-за времени, стоимости, а не все предназначено для повторного использования. Лучше повторно использовать в некоторой степени, чем ожидание, чтобы вещи были повторно использованы на 100%.

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

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

Antoine, написал статью, описывающую 3 основных правила создания многоразовых компонентов JS, который рекомендуется прочитать. Когда он представил Vuejs к своей команде, опытный коллеге говорит:

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

Генеральный директор Steach Overflow, Joel Spolsky говорит:

4. Давайте построим приборную панель с модулями

Теперь, когда у нас есть базовое понимание того, как работают модули, давайте просмотрим практический пример, который, скорее всего, встречаюсь при работе с JS Frameworks. Мы будем создавать простую приборную панель после архитектурного дизайна, которая состоит из макетов и компонентов.

Код для примера можно найти здесь Отказ

Шаг 1 – Дизайн того, что вам нужно

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

Так что это то, что нам нужно, основанное на архитектурном дизайне.

Компоненты: users.js , user-profile.js и items.js.
Макеты: header.js и Sidebar.js.
Приборная панель: Dashboard.js.

Все компоненты и макеты будут загружены в Dashboard.js И тогда мы будем загрузить Dashboard.js в index.js Отказ

Так почему же у нас есть макеты и папка компонентов?

Макет – это то, что нам нужно один раз, например, статический шаблон. Содержание внутри приборной панели может измениться, но боковая панель и заголовок останутся одинаковыми (и это то, что известно как макеты). Макет может быть либо страницей ошибки, нижнего колонтитула, страницы состояния и так далее.

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

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

Шаг 2 – Структура папки установки

Как уже упоминалось, у нас есть 3 основных папками: приборная панель, компоненты и макеты.

- dashboard
- components 
- layouts
index.html
index.js ( entry point )

И в каждом файле внутри папки мы Экспорт А Класс Отказ

- dashboard
    dashboard.js
- components
    issues.js
    user-profile.js
    users.js 
- layouts
    header.js
    sidebar.js
index.html
index.js ( entry point )

Шаг 3 – Реализация

Структура папки все настроен, поэтому следующая вещь для создания компонента (класс класс ) в каждом файле, а затем Экспорт Это. Кодовая конвенция одинакова для остальных файлов: каждый компонент просто Класс и а Метод Этот компонент COMPOLS «X) загружен« где x – это имя компонента, чтобы указать, что компонент был загружен.

Давайте создадим пользователь Класс а потом Экспорт Это как показано ниже.

class Users {

  loadUsers() {
    console.log('Users component is loaded...')
  }
  
}

export { Users };

Уведомление, у нас есть разные Варианты При работе с Экспорт утверждение. Итак, идея состоит в том, что вы можете либо Экспорт отдельные компоненты или коллекция компонентов. Например, если мы Экспорт Класс , мы можем получить доступ к методам, объявленным внутри, создав новый экземпляр Класс Отказ

export { name1, name2, …, nameN };
export function FunctionName(){...}
export class ClassName {...}
...

export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;
...

Хорошо, так что если вы посмотрите на архитектурную диаграмму на шаге 1, вы заметите, что Профиль пользователя Компонент инкапсулирован Заголовок макет. Это означает, что когда мы загружаем Заголовок Макет, он также загрузит Профиль пользователя составная часть.

import { UserProfile } from '../components/users-profile.js';

class Header {

  loadHeader() {
    // Creata a new instance
    const userProfile = new UserProfile(); 
    
    // Invoke the method (component)
    userProfile.loadUserProfile();
    
    // Output loading status
    console.log('Header component is loaded...')
  }
  
}

export { Header };

Теперь, когда каждый компонент и макет имеют экспортированный Класс мы тогда Импорт Это в нашем Приборная панель файл, как это:

// From component folder
import { Users } from '../components/users.js';
import { Issues } from '../components/issues.js';

// From layout folder
import { Header } from '../layouts/header.js';
import { Sidebar } from '../layouts/sidebar.js';


class Dashboard {

  loadDashboard(){

    // Create new instances
    const users = new Users();
    const issues = new Issues();
    const header = new Header();
    const sidebar = new Sidebar();

    console.log('Dashboard component is loaded');
  }

}

export { Dashboard }

Для того, чтобы понять, что на самом деле происходит в Приборная панель Файл, нам нужно пересмотреть рисунок на шаге 1. Короче говоря, поскольку каждый компонент является Класс Мы должны создать новый экземпляр, а затем назначить его объекту. Затем мы используем объект для выполнения методов, как показано в методе loaddashboard () Отказ

В настоящее время приложение ничего не выводится, потому что мы не выполнили метод loaddashboard () Отказ Для того, чтобы сделать это работать, нам нужно Импорт Приборная панель Модуль в файле index.js как это:

import { Dashboard } from './dashboard/dashboard.js'; 

const dashboard = new Dashboard(); 

dashboard.loadDashboard();

А затем консольные выходы:

Как показано, все работает, и компоненты успешно загружаются. Мы также можем идти вперед и создать два экземпляра, а затем сделать что-то вроде этого:

import { Dashboard } from './dashboard/dashboard.js'; 

const dashboard_1 = new Dashboard(); 
const dashboard_2 = new Dashboard(); 

dashboard_1.loadDashboard();
dashboard_2.loadDashboard();

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

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

Однако, как уже упоминалось ранее, целью было охватывать динамику того, как мы можем работать с модулями и компонентами, используя Импорт и Экспорт заявления.

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

5. Методы оптимизации для прибора приборной панели

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

Нам нужно что-то, что известно как динамический интерфейс. Это позволяет нам создать коллекцию компонентов, которые нам нужны, и легко добраться до него. Если вы используете код Visual Studio, IntelliSense показывает, какие компоненты доступны, и какой из них вы уже использовали. Это означает, что вам не нужно открывать папку/файл вручную, чтобы увидеть, какие компоненты были экспортированы.

Так что, если у нас есть модуль с двадцатью компонентами, мы не хотим Импорт каждая компонент одна строка за другой. Мы просто хотим получить то, что нам нужно, и вот и все. Если вы работали с пространствами имен на таких языках, как C #, PHP, C ++ или Java, вы заметите, что эта концепция похожа на природе.

Вот что мы хотим достичь:

// FILE: dashboard.js

// From component folder
import { users, issues } from '../components';

// From layout folder
import { header, sidebar } from '../layouts'; 


class Dashboard {

  loadDashboard(){

    // Invoke methods
    users.loadUsers();
    issues.loadIssues();
    header.loadHeader();
    sidebar.loadSidebar();

    console.log('Dashboard component is loaded');
  }

}

export let dashboard = new Dashboard();

Как показано, у нас меньше строк кода, и мы сделали его декларативным, не теряя контекст. Посмотрим, какие изменения мы сделали.

Создайте динамический интерфейс (также известный как бочки)

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

Чтобы создать динамический интерфейс, мы создаем файл с именем index.js который расположен в корне каждой папки для повторного экспорта подмножества файлов или компонентов, которые нам нужны. Та же концепция работает в Teadercript, вы просто измените тип из .js к .ts как index.ts Отказ

index.js Является ли первым файлом, который загружает при доступе к пространству корневой папки – это та же концепция, что и index.html Это загружает наше содержание HTML. Это означает, что нам не нужно явно писать Импорт {компонент} от './components /index.js ' , Но вместо этого Импорт {компонент} от './components Отказ

Вот как выглядит динамический интерфейс.

// Root space -> components folder

// Dynamic interface
export { users } from './users';
export { issues } from './issues';
export { userProfile } from './user-profile';

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

// Before
import { Users } from '../components/users.js';
import { Issues } from '../components/issues.js';
import { Header } from '../layouts/header.js';
import { Sidebar } from '../layouts/sidebar.js';

// After (with dynamic interface)
import { users, issues } from '../components';
import { header, sidebar } from '../layouts';

Создайте новый экземпляр во время выполнения

Мы сняли четыре экземпляра в нашем Dashboard.js И вместо этого создан экземпляр во время выполнения, когда экспортируется каждый компонент. Если вы хотите решить имя объекта, вы можете сделать Экспорт по умолчанию Новая приборная панель () , а потом Импортировать dasvview без вьющих скобок.

// Before
export class { dashboard }; 
const dashboard = new Dashboard(); 
dashboard.loadDashboard(); 

// After
export const dashboard = new Dashboard(); 
dashboard.loadDashboard()

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

И, наконец, мы загружаем все компоненты и макеты одним методом.

import { dashboard } from './dashboard/dashboard';

dashboard.loadDashboard();

Заключение

Я начал с намерения просто показывать короткий пример того, как вы можете Импорт и Экспорт Компонент, но потом почувствовал необходимость поделиться всем, что я знаю (почти). Я надеюсь, что эта статья дает вам некоторое представление о том, как эффективно заниматься модулями ES6, когда создание приложений, и то, что важно с точки зрения разделения проблем (принцип проектирования).

На вынос:

С модулями ES6 мы можем легко повторно использовать, поддерживать, отдельные и инкапсулировать компоненты из изменения внешним поведением
Модуль – это коллекция компонентов
Компонент является индивидуальным блоком
Не пытайтесь сделать все все многоразовые, так как требуется время и ресурсы, и чаще всего мы его не используем
Создайте архитектурную диаграмму перед погружением в код
Для того, чтобы сделать компоненты в других файлах, мы должны сначала Экспорт а потом Импортировать
Используя index.js (Та же концепция для Typeycript index.ts ) Мы можем создавать динамические интерфейсы (бочки) для быстрого доступа к вещам, которые нам нужны с меньшим количеством кода и меньше иерархических путей
Вы можете Экспорт Новый экземпляр во время выполнения, используя Экспорт Пусть ClassName ()

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

Вот несколько статей, которые я написал о веб-экосистеме вместе с личными советами и трюками программирования.

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