Яка різниця між експортом за замовчуванням та іменованим експортом в JavaScript?

JavaScript - одна з найпопулярніших мов програмування серед веб розробників. Вона пропонує безліч способів організації та спільного використання коду між різними файлами.

Працюючи з модулями, ви можете зіткнутися з двома поширеними способами експорту: Експорт за замовчуванням та Іменований експорт.

Розуміння різниці між цими двома способами має важливе значення для ефективного управління кодом і покращення його супроводу.

У цій статті ми розглянемо відмінності між експортом за замовчуванням та іменованим експортом в JavaScript. Ми висвітлимо випадки їх використання та найкращі практики, щоб допомогти вам вибрати правильний підхід для ваших проєктів.

Про що ви дізнаєтесь

У цьому уроці ви дізнаєтеся про модулі JavaScript і про те, як вони покращують і спрощують керування кодом. Ви вивчите експорт за замовчуванням та іменований експорт, а також зрозумієте, коли використовувати кожен з них.

Щоб застосувати все це на практиці, ви створите простий застосунок з перемикачем кольорів, який об'єднає всі концепції разом, що зробить ваш навчальний досвід практичним.

Ось демонстрація того, що ми будемо створювати:

Початок роботи

Для початку роботи з цим посібником я вже підготував для вас шаблонний проєкт, який містить усі необхідні залежності. Це позбавляє вас від необхідності створювати проєкт з нуля.

Просто клонуйте початковий шаблон з репозиторію GitHub, а потім дотримуйтесь інструкцій посібника. Таким чином, ви зможете зосередитися на вивченні та реалізації концепцій, не зациклюючись на деталях налаштування.

Вихідний код на GitHub (будь ласка, поставте зірочку, якщо вам сподобався підручник ⭐️

• Starter Boilerplate: Переглянути на GitHub
• Фінальна версія: Переглянути на GitHub

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

Що таке JavaScript модулі?

Уявіть, що у вас є великий, складний проєкт на JavaScript, з безліччю різних файлів і функцій. Керувати всім цим кодом може бути дуже складно!

Модулі JavaScript - це маленькі контейнери, які допомагають вам краще організувати ваш код і спрощують його використання та підтримку.

Уявіть собі модуль як окрему коробку, в яку ви можете помістити пов'язаний з ним код. Усередині цього блоку ви можете мати змінні, функції або навіть класи, які працюють разом для виконання певних завдань. Ці модулі діють як невеликі, самодостатні одиниці, які можна легко використовувати в різних частинах вашого проєкту.

Однією з важливих особливостей модулів JavaScript є те, що вони дозволяють вам вирішувати, якими частинами коду ви хочете поділитися з іншими частинами проєкту. Ви можете експортувати певні функції або дані з модуля, роблячи їх доступними для інших частин вашої кодової бази.

З іншого боку, ви також можете імпортувати код з інших модулів, коли вам потрібно використовувати їхню функціональність. Це схоже на запозичення інструментів з набору інструментів друга, коли вам потрібно щось полагодити.

JavaScript модулі допомагають нам:

• Впорядковувати код: Модулі дозволяють групувати пов'язаний код в окремих файлах, роблячи ваш проєкт організованішим і керованішим.
• Інкапсулювати код: Кожен модуль діє як самодостатня одиниця, тому ви можете приховати певні частини коду і показати тільки те, що ви хочете, щоб інші використовували.
• Багаторазове використання: Ви можете легко повторно використовувати модулі в різних частинах нашого проєкту, зменшуючи дублювання коду та сприяючи ефективнішому процесу розробки.
• Управління залежностями: Модулі допомагають вам керувати залежностями між різними частинами проєкту, полегшуючи відстеження того, як все взаємодіє між собою.

Щоб краще зрозуміти цю концепцію, створімо веселу і просту гру. Ми створимо JavaScript клас для віртуальної тваринки. Ця тварина матиме ім'я та вид, і ви зможете взаємодіяти з нею, граючи з нею та годуючи її:

// 📂 Pet.js

export class VirtualPet {
  constructor(name, species) {
    this.name = name;
    this.species = species;
    this.energy = 100;
  }

  // Play with the pet
  play() {
    this.energy -= 10;
    this._checkStats();
  }

  // Feed the pet
  feed() {
    this.energy += 20;
    this._checkStats();
  }

  // Private method to check and limit the stats
  _checkStats() {
    if (this.energy > 100) {
      this.energy = 100;
    }

    if (this.energy < 0) {
      this.energy = 0;
    }
  }

  // Get the pet's status
  getStatus() {
    return `${this.name} the ${this.species} - Energy: ${this.energy}`;
  }
}

Ключове слово export є фундаментальною частиною цієї системи модулів, що дозволяє вам відкривати певні частини вашого коду для використання в інших файлах.

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

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

Тепер ви можете імпортувати клас VirtualPet з модуля pet.js за допомогою оператора import в інший файл:

// 📂 Play.js

import { VirtualPet } from './pet.js';

const myPet = new VirtualPet("Fido", "Dog");

console.log(myPet.getStatus()); // Fido the Dog - Energy: 100

myPet.play();
console.log(myPet.getStatus()); // Fido the Dog - Energy: 90

myPet.feed();
console.log(myPet.getStatus()); // Fido the Dog - Energy: 100

Чудова робота! Ви успішно створили віртуального улюбленця за допомогою модулів JavaScript. 🎉

У цьому розділі ви дізналися про модулі JavaScript і про те, як ключове слово export допомагає ефективно організовувати код і ділитися ним. У наступному розділі ви дізнаєтеся більше про різні методи експорту та імпорту модулів JavaScript у різні файли.

Що таке ключове слово export у JavaScript?

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

Використовуючи експорт, ви робите певні частини вашого коду доступними за межами модуля. Це дозволяє повторно використовувати та просувати модульну та організовану структуру коду.

У JavaScript є два основних способи експорту значень: експорт за замовчуванням, який використовується для одного значення на файл, та іменований експорт, що дозволяє експортувати багато значень на файл.

Що таке експорт за замовчуванням у JavaScript?

В JavaScript експорт за замовчуванням - це спосіб надати доступ до одного значення, функції або класу як до основного елементу з файлу в інших частинах вашого коду.

Якщо у вас є файл, який потрібно використовувати в інших частинах вашої програми, ви можете позначити один елемент у цьому файлі як експорт за замовчуванням, використовуючи синтаксис експорту за замовчуванням.

Це означає, що коли ви імпортуєте з цього файлу в іншій частині вашого коду, вам не потрібно використовувати фігурні дужки {} навколо оператора імпорту. Замість цього ви можете дати йому будь-яку назву під час імпорту, що робить його зручнішим у використанні.

// 📂 math.js
const add = (a, b) => a + b;
export default add;

// 📂 main.js
import myAddFunction from './math.js';
const result = myAddFunction(5, 10); // This will call the add function from math.js and store the result in the 'result' variable.

Що таке іменований експорт в JavaScript?

Іменований експорт в JavaScript дозволяє експортувати декілька функцій, змінних або класів з одного файлу як окремі об'єкти. Замість того, щоб експортувати все як єдине ціле, ви можете присвоїти ім'я та експортувати кожну частину окремо.

Це дає вам більше контролю над тим, якими частинами коду ви хочете поділитися з іншими модулями. Імпортуючи ці іменовані експортовані дані в інші файли, ви повинні використовувати ті самі імена, які були використані під час експорту, щоб гарантувати, що ви зможете отримати доступ до потрібних вам функцій з вихідного файлу і використовувати їх.

// 📂 math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// 📂 main.js
import { add, subtract } from './math.js';

const result1 = add(5, 3); // result1 will be 8
const result2 = subtract(10, 4); // result2 will be 6

У JavaScript файл може мати лише один експорт за замовчуванням, але за потреби він може мати декілька іменованих експортів.

Розгляньмо відмінності між іменованими експортами та експортами за замовчуванням:

Іменований експорт vs експорт за замовчуванням:

Іменований експорт має такі особливості:

• Коли ви використовуєте іменований експорт, ви можете експортувати декілька значень, функцій або класів з одного файлу, надаючи кожному з них певне ім'я.
• Під час імпортування елементів, які ви хочете експортувати, потрібно взяти їх у фігурні дужки {}, і ви повинні використовувати ті самі імена, що й під час експорту.
• Іменований експорт чудово підходить, якщо ви хочете поділитися кількома елементами з файлу і дати їм різні імена для використання в інших частинах вашого коду.
• Файл може мати стільки іменованих експортів, скільки вам потрібно.

Нижче наведено деякі характеристики експорту за замовчуванням:

• Експорт за замовчуванням корисний, коли ви хочете експортувати лише одну основну річ з файлу. Це все одно, що позначити цю одну річ як найважливішу для поширення.
• При імпорті стандартного експорту в інший файл ви можете дати йому будь-яку назву під час імпорту, і вам не потрібно використовувати фігурні дужки {}.
• Файл може мати лише один експорт за замовчуванням.

Як поєднати іменований та стандартний експорт:

Важливо зазначити, що файл може мати одночасно іменований експорт і експорт за замовчуванням.

Це означає, що ви можете експортувати одне основне значення за допомогою експорту за замовчуванням, а також експортувати декілька додаткових значень за допомогою іменованого експорту.

Така гнучкість дозволяє ефективно організовувати та ділитися різними частинами вашого коду, полегшуючи іншим частинам вашої програми доступ до експортованих функцій та їх використання.

Як створити простий застосунок за допомогою модулів JavaScript

У цьому останньому розділі ви створите крутий застосунок для перемикання кольорів за допомогою модулів JavaScript. Ви дізнаєтеся, як розділити код на окремі файли, щоб його можна було повторно використовувати у всьому застосунку та ефективно організувати.

Якщо ви ще не налаштували шаблонний проєкт, зверніться до розділу "Початок роботи". Це дозволить вам швидко просуватися по посібнику.

Перейдемо до написання коду. Спочатку відкрийте ./main.js і ви побачите наступний код:

//📂./main.js

import "./style.css";

document.querySelector("#app").innerHTML = `
  <div>
    <button id="flipper" type="button">Start Flipping</button>
  </div>
`;

Цей код включає CSS-файл і задає контенту елемента з ідентифікатором app значення div, що містить кнопку з ідентифікатором "flipper" і текстом "Start Flipping".

Далі ви додасте логіку JavaScript для реалізації функціонала, який змінює колір фону застосунку при натисканні кнопки "Start Flipping".

Для зміни кольору фону можна використовувати масив кольорів, який вже підготовлений для вас у файлі ./colors.js. Все, що вам потрібно зробити, це експортувати цей масив, щоб ви могли використовувати його в інших модулях JavaScript у вашому застосунку:

//📂./colors.js

const colors = [
  "#007bff",
  "#f1c40f",
  "#27ae60",
  "#e74c3c",
  "#8e44ad",
  "#3498db",
  "#f39c12",
];

export default colors;

Після того, як ви додасте export default colors до цього файлу, ви зможете отримати доступ до цієї змінної в інших модулях, імпортуючи її.

Тепер імпортуймо ці кольори в ./utils.js і перейдемо до реалізації функції, яка буде обробляти зміну кольору фону вашого застосунку:

//📂./utils.js

import colorsData from "./colors";

export function getRandomColor() {
  const randomIndex = Math.floor(Math.random() * colorsData.length);
  return colorsData[randomIndex];
}

Розберімо цей код крок за кроком:

1. import colorsData from "./colors": Цей рядок імпортує дані з файлу ./colors до нашого поточного файлу. Дані з ./colors присвоюються змінній з назвою colorsData, яку ми тепер можемо використовувати в цьому файлі.
2. export function getRandomColor() { ... }: Цей рядок визначає функцію getRandomColor(). Функція обчислює випадковий індекс з масиву colorsData і повертає колір за цим індексом.

Тепер поговорімо про те, як працює експорт за замовчуванням:

У файлі ./colors є default export масиву кольорів. Використовуючи default export, ми можемо безпосередньо імпортувати експортоване значення без необхідності використовувати фігурні дужки {} навколо нього при імпорті.

Наприклад, якщо ви хочете імпортувати декілька значень з файлу ./colors, вам слід використовувати фігурні дужки {}. Але оскільки у файлі ./colors є лише один експорт за замовчуванням, ви можете імпортувати його напряму, не використовуючи фігурні дужки.

Крім того, ви можете вибрати будь-яку назву для експорту за замовчуванням. У цьому випадку ви назвали його colorsData, але ви могли б використати будь-яку іншу назву, і він все одно працюватиме так само.

На наступному кроці імпортуймо функцію getRandomColor, яку ви щойно створили, до файлу ./main.js і скористаємося нею, щоб змінити колір фону вашого застосунку:

//📂./main.js

import "./style.css";
import { getRandomColor } from "./utils";

document.querySelector("#app").innerHTML = `
  <div>
    <button id="flipper" type="button">Start Flipping</button>
  </div>
`;

document.querySelector("#flipper").addEventListener("click", () => {
  const body = document.body;
  const randomColor = getRandomColor();
  body.style.backgroundColor = randomColor;
});

У цьому коді ви скористалися іменованим імпортом для доступу до функції getRandomColor з файлу ./utils. Оператор import { getRandomColor } from "./utils" дозволяє вам імпортувати функцію getRandomColor за її точною назвою з модуля ./utils.

Після імпорту функції getRandomColor ви можете безпосередньо використовувати її у своєму коді без будь-яких префіксів або модифікацій. Наприклад, ви викликаєте getRandomColor() без необхідності вказувати модуль, з якого вона викликається. Це робить код чистішим і зрозумілішим.

Використовуючи іменований імпорт, ви можете точно вибрати, які функції, змінні або константи ви хочете імпортувати з модуля. Це полегшує доступ лише до певних частин коду, які вам потрібні у поточному файлі. Це також допомагає впорядкувати код і дає змогу краще контролювати, які функції з різних модулів ви використовуєте.

Зверніть увагу, що при іменованому імпорті ім'я має збігатися з обох сторін.

Наразі ми добре попрацювали! Ось поточний результат:

Тепер додамо ще одну утиліту, яка змінюватиме текст кнопки для відображення поточного шістнадцяткового значення кольору:

//📂./utils.js

import colorsData from "./colors";

export function getRandomColor() {
  const randomIndex = Math.floor(Math.random() * colorsData.length);
  return colorsData[randomIndex];
}

export function changeButtonText(text, element) {
  const button = document.querySelector(element);
  button.innerText = text;
}

changeButtonText дозволить вам змінити текст, що відображається на кнопці. Ви можете викликати цю функцію з двома параметрами: текстом, який ви хочете відобразити на кнопці, і елементом, який представляє селектор кнопки. Після виклику функція оновить текст кнопки вказаним текстом.

Додаємо її до ./main.js і дивимося, як вона працює в дії:

//📂./main.js

import "./style.css";
import { getRandomColor, changeButtonText } from "./utils";

document.querySelector("#app").innerHTML = `
  <div>
    <button id="flipper" type="button">Start Flipping</button>
  </div>
`;

document.querySelector("#flipper").addEventListener("click", () => {
  const body = document.body;
  const randomColor = getRandomColor();
  changeButtonText(`Current Color is ${randomColor}`, "#flipper");
  body.style.backgroundColor = randomColor;
});

Ви імпортували функцію changeButtonText за допомогою іменованого імпорту з файлу ./utils. Функція приймає два аргументи: текст, який ми хочемо відобразити на кнопці, і селектор кнопки, яку ми хочемо оновити. Вона динамічно змінює текст кнопки, щоб показати вказаний текст з поточним значенням кольору.

Ось кінцевий результат:

Ось і все - вітаємо вас зі створенням вашого застосунку кольорового фліппера за допомогою модулів JavaScript! 🎉

Модульний підхід допомагає вам ефективно організувати та повторно використовувати код, роблячи вашу програму функціональною та легкою в обслуговуванні. Молодці!

Висновок

На завершення, експорт JavaScript пропонує потужні інструменти для управління організацією коду та обміну функціоналом між різними частинами наших додатків.

Ми розглянули відмінності між іменованим експортом, який дозволяє експортувати декілька об'єктів з файлу з певними іменами, і експортом за замовчуванням, який позначає один основний об'єкт як основний для експорту. Обидва механізми є важливими для забезпечення модульності та повторного використання коду.

Розуміючи ці методи експорту, ви зможете створювати більш організовані та ефективні структури коду, що призведе до кращої масштабованості ваших проєктів на JavaScript.