Введение

ES6 (ECMAScript 2015) представил стандартизированную систему модулей для JavaScript, что произвело революцию в том, как мы организуем и совместно используем код. В этой статье мы рассмотрим все тонкости импорта ES6, предоставим реальные примеры и демонстрационный проект, чтобы проиллюстрировать их мощь и гибкость.

Оглавление

1. Базовый синтаксис импорта
2. Именованный экспорт и импорт
3. Экспорт и импорт по умолчанию
4. Смешивание именованного экспорта и экспорта по умолчанию
5. Переименование импорта
6. Импорт всех экспортированных файлов как объекта
7. Динамический импорт
8. Примеры из реальной жизни
9. Демо-проект: Диспетчер задач
10. Лучшие практики и советы
11. Заключение

Базовый синтаксис импорта

Основной синтаксис импорта в ES6:

import { something } from './module-file.js';

При этом импортируется именованный экспорт под названием «something» из файла Module-file.js в том же каталоге.

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

Именованный экспорт позволяет экспортировать несколько значений из модуля:

// math.js
export const add = (a, b) => a   b;
export const subtract = (a, b) => a - b;

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

console.log(add(5, 3));      // Output: 8
console.log(subtract(10, 4)); // Output: 6

Экспорт и импорт по умолчанию

Экспорт по умолчанию предоставляет основное экспортируемое значение для модуля:

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

// main.js
import greet from './greet.js';

console.log(greet('Alice')); // Output: Hello, Alice!

Смешение именованного экспорта и экспорта по умолчанию

Вы можете комбинировать именованный экспорт и экспорт по умолчанию в одном модуле:

// utils.js
export const VERSION = '1.0.0';
export function helper() { /* ... */ }

export default class MainUtil { /* ... */ }

// main.js
import MainUtil, { VERSION, helper } from './utils.js';

console.log(VERSION);  // Output: 1.0.0
const util = new MainUtil();
helper();

Переименование импорта

Вы можете переименовать импортированные файлы, чтобы избежать конфликтов имен:

// module.js
export const someFunction = () => { /* ... */ };

// main.js
import { someFunction as myFunction } from './module.js';

myFunction();

Импорт всех экспортированных файлов как объекта

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

// module.js
export const a = 1;
export const b = 2;
export function c() { /* ... */ }

// main.js
import * as myModule from './module.js';

console.log(myModule.a);  // Output: 1
console.log(myModule.b);  // Output: 2
myModule.c();

Динамический импорт

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

async function loadModule() {
  const module = await import('./dynamicModule.js');
  module.doSomething();
}

loadModule();

Реальные примеры

1. Компоненты React:

// Button.js
import React from 'react';

export default function Button({ text, onClick }) {
  return {text};
}

// App.js
import React from 'react';
import Button from './Button';

function App() {
  return  alert('Clicked!')} />;
}

1. Модули Node.js:

// database.js
import mongoose from 'mongoose';

export async function connect() {
  await mongoose.connect('mongodb://localhost:27017/myapp');
}

// server.js
import express from 'express';
import { connect } from './database.js';

const app = express();

connect().then(() => {
  app.listen(3000, () => console.log('Server running'));
});

Демонстрационный проект: Диспетчер задач

Давайте создадим простой диспетчер задач, чтобы продемонстрировать импорт ES6 в действии:

// task.js
export class Task {
  constructor(id, title, completed = false) {
    this.id = id;
    this.title = title;
    this.completed = completed;
  }

  toggle() {
    this.completed = !this.completed;
  }
}

// taskManager.js
import { Task } from './task.js';

export class TaskManager {
  constructor() {
    this.tasks = [];
  }

  addTask(title) {
    const id = this.tasks.length   1;
    const task = new Task(id, title);
    this.tasks.push(task);
    return task;
  }

  toggleTask(id) {
    const task = this.tasks.find(t => t.id === id);
    if (task) {
      task.toggle();
    }
  }

  getTasks() {
    return this.tasks;
  }
}

// app.js
import { TaskManager } from './taskManager.js';

const manager = new TaskManager();

manager.addTask('Learn ES6 imports');
manager.addTask('Build a demo project');

console.log(manager.getTasks());

manager.toggleTask(1);

console.log(manager.getTasks());

Чтобы запустить эту демонстрацию, вам потребуется использовать среду JavaScript, поддерживающую модули ES6, например Node.js с флагом --experimental-modules, или современный браузер с упаковщиком, например webpack или Rollup.

Лучшие практики и советы

1. Используйте именованный экспорт для нескольких функций/значений и экспорт по умолчанию для основных функций.
2. Держите свои модули целенаправленными и одноцелевыми.
3. Используйте согласованные соглашения об именах для файлов и экспортируемых файлов.
4. Избегайте циклических зависимостей между модулями.
5. Рассмотрите возможность использования сборщика, такого как Webpack или Rollup, для проектов на основе браузера.
6. Используйте динамический импорт для разделения кода и оптимизации производительности в больших приложениях.

Заключение

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

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