Сборка от 17 марта 2017 г

Использование

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

Такие механизмы предлагались в процессе создания стандарта, но были убраны по причине недостаточной проработанности. Возможно, они появятся в будущем.
Сейчас используются системы сборки, как правило, в сочетании с Babel.JS.

Система сборки обрабатывает скрипты, находит в них import/export и заменяет их на свои внутренние JavaScript‑вызовы. При этом, как правило, много файлов‑модулей объединяются в один или несколько скриптов, смотря как указано в конфигурации сборки.

Ниже вы можете увидеть полный пример использования модулей с системой сборки webpack ^. В нём есть:

• 
  nums.js – модуль, экспортирующий one и two , как описано выше.
  
• 
  main.js – модуль, который импортирует one , two из nums и выводит их сумму.
  
• 
  webpack.config.js – конфигурация для системы сборки.
  
• 
  bundle.js – файл, который создала система сборки из main.js и nums.js .
  
• 
  index.html – простой HTML‑файл для демонстрации.
  



Итого

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

• 
  export можно поставить прямо перед объявлением функции, класса, переменной.
  
• 
  Если export стоит отдельно от объявления, то значения в нём указываются в фигурных скобках: export {…} .
  
• 
  Также можно экспортировать «значение по умолчанию» при помощи export default .
  

Импорт:

• 
  В фигурных скобках указываются значения, а затем – модуль, откуда их брать: import {a, b, c as d} from "module" .
  
• 
  Можно импортировать все значения в виде объекта при помощи import * as obj from "module" .
  
• 
  Без фигурных скобок будет импортировано «значение по умолчанию»: import User from "user" .
  

На текущий момент модули требуют системы сборки на сервере. Автор этого текста преимущественно использует webpack, но есть и другие варианты.

Proxy

Прокси (proxy) – особый объект, смысл которого – перехватывать обращения к другому объекту и, при необходимости, модифицировать их. Синтаксис:

let proxy = new Proxy(target, handler)

Здесь:

• 
  target – объект, обращения к которому надо перехватывать.
  
• 
  handler – объект с «ловушками»: функциями‑перехватчиками для операций к target .
  

Почти любая операция может быть перехвачена и обработана прокси до или даже вместо доступа к объекту target , например: чтение и запись свойств, получение списка свойств, вызов функции (если target – функция) и т.п.

Различных типов ловушек довольно много.

Сначала мы подробно рассмотрим самые важные «ловушки», а затем посмотрим и на их полный список.

get/set

Самыми частыми являются ловушки для чтения и записи в объект:

get(target, property, receiver)

Срабатывает при чтении свойства из прокси. Аргументы:

• 
  target – целевой объект, тот же который был передан первым аргументом в new Proxy .
  
• 
  property – имя свойства.
  
• 
  receiver – объект, к которому было применено присваивание. Обычно сам прокси, либо прототипно наследующий от него. Этот аргумент используется редко.