В чем главный смысл import export в es6?

Question

[PavelScron]

Только начал изучать эти новые es6 функции. И вот не понимаю, ведь js файлы и так видят переменные у друг друга (проверил на всякий случай, один js файл спокойно делает alert переменной с другого js файла). В чем тогда основной смысл export import?

Answer 1

[Aleksey Solovyev]

Концепция модулей как способа организации JavaScript-кода

Что такое модуль?
Модуль — это переиспользуемая часть кода, содержащая в себе детали реализации и предоставляющая открытое API, что позволяет легко загрузить её и использовать в другом коде.

Технически код можно написать и без использования модулей. Модули — это паттерн, который в разных формах и на разных языках используется разработчиками с 60-х и 70-х годов.
В идеале, модули JavaScript позволяют нам:

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

tproger
или
learn.javascript.ru

Comments

[PavelScron]

почитал, спасибо. Буду еще искать материал. Я труднодоходящий. Я правильно понимаю, что import export собой полностью может заменить собой модульный паттерн который в es5 часто использовался?

[Aleksey Solovyev]

PavelScron, мне кажется, у Вас какая-то каша в голове... или я Вас не так понял.

ECMAScript 5 и более ранние версии не были спроектированы с учётом модулей. Со временем разработчики нашли различные возможности симулировать модульную архитектуру на JavaScript.

До создания ECMAScript 6, или ES2015, в JavaScript не было официального синтаксиса для определения модулей. Из-за чего опытные разработчики предлагали разные форматы определения:

• асинхронное определение модуля (Asynchronous Module Definition или AMD);
  
• CommonJS;
  
• универсальное определение модуля (Universal Module Definition или UMD);
  
• System.register;
  

С выходом ECMAScript 6 появился официальный единый стандарт для определения модуля: import и export. То есть import и export это новый синтаксис, они ничего не заменяют.

ps или по простому: если раньше писали кто как мог модули, то теперь у языка появился официальный синтаксис(порядок навели)

[PavelScron]

Aleksey Solovyev, я имел в виду модульный паттерн (переменная = IEF функция и в ней например объект который делает return того что в global scope идет), например, https://jsfiddle.net/kafcy68p/

Сейчас, получается, когда есть Import export, такой паттерн бессмыленно делать?