proxy

iliakan · iliakan · commit 2e0ec28fa4e3 · 2015-08-06T02:18:06.000+03:00
diff --git a/1-js/10-es-modern/13-modules/article.md b/1-js/10-es-modern/13-modules/article.md
@@ -10,17 +10,16 @@
 Такие средства предлагались сообществом и ранее, например:
 
 <ul>
-<li>[CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1)</li>
-<li>[AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition)</li>
-<li>[UMD](https://github.com/umdjs/umd)</li>
+<li>[AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition) -- одна из самых древних систем организации модулей, требует лишь наличия клиентской библиотеки, к примеру, [require.js](http://requirejs.org/), но поддерживается и серверными средствами.</li>
+<li>[CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1) -- система модулей, встроенная в сервер Node.JS. Требует поддержки на клиентской и серверной стороне.</li>
+<li>[UMD](https://github.com/umdjs/umd) -- система модулей, которая предложена в качестве универсальной. UMD-модули будут работать и в системе AMD и в CommonJS.</li>
 </ul>
 
-Все они требуют различных библиотек или систем сборки для использования.
+Все перечисленные выше системы требуют различных библиотек или систем сборки для использования.
 
-Новый стандарт отличается от них прежде всего тем, что это -- стандарт. А значит, со временем, будет поддерживаться браузерами без дополнительных утилит.
-
-Сейчас браузерной поддержки почти нет. Поэтому ES-модули используются вместе с системами сборки, такими как [webpack](http://webpack.github.io/), [brunch](http://brunch.io/) и другими, при подключённом [Babel.JS](https://babeljs.io). 
+Новый стандарт отличается от них прежде всего тем, что это -- стандарт. А значит, со временем, будет поддерживаться браузерами без дополнительных утилит. 
 
+Однако, сейчас браузерной поддержки почти нет. Поэтому ES-модули используются в сочетании с системами сборки, такими как [webpack](http://webpack.github.io/), [brunch](http://brunch.io/) и другими, при подключённом [Babel.JS](https://babeljs.io). Мы рассмотрим это далее.
 
 ## Что такое модуль?
 
@@ -30,38 +29,214 @@
 
 Другие модули могут подключать их через вызов `import`.
 
-Нагляднее всего это проиллюстрировать примером.
+## export
+
+Ключевое слово `export` можно ставить:
+
+<ul>
+<li>перед объявлением переменных, функций и классов.</li>
+<li>отдельно, при этом в фигурных скобках указывается, что именно экспортируется.</li>
+</ul> 
 
-Модуль `one.js` экспортирует переменную `one`:
+Например:
 
 ```js
+// экспорт прямо перед объявлением
 export let one = 1;
+
+// можно и раздельно, в две строки вместо одной
+let two = 2;
+export {two};
 ```
 
-Модуль `two.js`:
+Заметим, что в фигурных скобках указывается не блок, не произвольное выражение, а только имя.
+
+Можно указать несколько:
+```js
+export {one, two};
 ```
-let two = 2;
 
-export {two}
+Также можно указать, что переменная `one` будет доступна снаружи под именем `once`, а `two` -- под именем `twice`:
+
+```js
+export {one as once, two as twice};
+```
+
+Экспорт функций и классов выглядит так же:
+```js
+export class User {
+  constructor(name) {
+    this.name = name;
+  }
+};
+
+export function sayHi() { 
+  alert("Hello!");
+};
+
+// или export {User, sayHi}
+```
+
+Заметим, что и у функции и у класса при таком экспорте должно быть имя.
+
+Так будет ошибка:
+```js
+// функция без имени
+export function() { alert("Error"); };
+```
+
+## import
+
+Другие модули могут подключать экспортированные значения при помощи ключевого слова `import`.
+
+Синтаксис: 
+
+```js
+import {one, two} from "./nums";
+```
+
+Здесь:
+<ul>
+<li>`"./nums"` -- модуль, как правило это путь к файлу модуля.</li>
+<li>`one, two` -- импортируемые переменные, которые должны быть обозначены в `nums` словом `export`.</li>
+</ul>
+
+В результате импорта появятся локальные переменные `one`, `two`, которые будут содержать значения соответствующих экспортов.
+
+Например, при таком файле `nums.js`:
+
+```js
+export let one = 1;
+export let two = 2;
+```
+
+Модуль ниже выведет "1 and 2":
+
+```js
+import {one, two} from "./nums";
+
+alert( `${one} and ${two}` ); // 1 and 2 
+```
+
+Импортировать можно и под другим именем, указав его в "as":
+
+```js
+// импорт one под именем item1, а two – под именем item2
+import {one as item1, two as item2} from "./nums";
+
+alert( `${item1} and ${item2}` ); // 1 and 2 
+```
+
+[smart header="Импорт всех значений в виде объекта"]
+
+Можно импортировать все значения сразу в виде объекта вызовом `import * as obj`, например:
+
+```js
+*!*
+import * as numbers from "./nums";
+*/!*
+
+alert( `${numbers.one} and ${numbers.two}` ); // 1 and 2 
+```
+[/smart]
+
+## export default
+
+Выше мы видели, что модуль может экспортировать произвольное количество значений при помощи `export`. 
+
+Однако, как правило, код стараются организовать так, чтобы каждый модуль делал одну вещь. Иначе говоря, "один файл -- одна сущность, которую он описывает".
+
+Например, файл `user.js` содержит `class User`, файл `login.js` -- функцию `login()` для авторизации, и т.п. 
+
+При этом модули, разумеется, будут взаимосвязаны. Например, `login.js`, скорее всего, будет импортировать класс `User` из модуля `user.js`.
+
+Для такой ситуации, когда один модуль экспортирует одно значение, предусмотрено особое ключевое сочетание `export default`.
+
+Если поставить после `export` слово `default`, то значение станет "экспортом по умолчанию".
+
+Такое значение можно импортировать без фигурных скобок.
+
+Например, файл `user.js`:
+
+```js
+*!*export default*/!* class User {
+  constructor(name) {
+    this.name = name;
+  }
+};
+```
+
+...А в файле `login.js`:
+
+```js
+import User from './user';
+
+new User("Вася");
 ```
 
+Если бы в `user.js` не было `default`, то в `login.js` необходимо было бы указать фигурные скобки:
+
+```js
+// если в бы user.js не было default: 
+// export class User { ... }
+
+// …то при импорте понадобились бы фигурные скобки:
+import {User} from './user';
+
+new User("Вася");
+```
+
+Как видно, "экспорт по умолчанию" -- лишь небольшой синтаксический сахар. Можно было бы и без него, импортировать значение обычным образом через фигурные скобки `{…}`.
+
+Но на практике этот "сахар" весьма приятен, так как позволяет легко видеть, какое именно значение экспортирует модуль, а также обойтись без лишних символов при импорте.
+
+## Использование
+
+Современный стандарт EcmaScript описывает, как импортировать и экспортировать значения из модулей, но он ничего не говорит о том, как эти модули искать, загружать и т.п.
+
+Такие механизмы предлагались в процессе создания стандарта, но были убраны по причине недостаточной проработанности. Возможно, они появятся в будущем.
+
+Сейчас используются системы сборки, как правило, в сочетании с Babel.JS.
+
+Система сборки обрабатывает скрипты, находит в них `import/export` и заменяет их на свои внутренние JavaScript-вызовы. При этом, как правило, много файлов-модулей объединяются в один или несколько скриптов, смотря как указано в конфигурации сборки.
+
+Ниже вы можете увидеть полный пример использования модулей с системой сборки [webpack](http://webpack.github.io).
+
+В нём есть:
+<ul>
+<li>`nums.js` -- модуль, экспортирующий `one` и `two`, как описано выше.</li>
+<li>`main.js` -- модуль, который импортирует `one`, `two` из `nums` и выводит их сумму.</li>
+<li>`webpack.config.js` -- конфигурация для системы сборки.</li>
+<li>`bundle.js` -- файл, который создала система сборки из `main.js` и `nums.js`.</li>
+<li>`index.html` -- простой HTML-файл для демонстрации.</li>
+</ul>
 
 [codetabs src="nums"]
 
 
+## Итого
 
-То есть, браузер, в котором есть поддержка модулей, или система сборки ("сегодняшний" вариант) 
+Современный стандарт описывает, как организовать код в модули, экспортировать и импортировать значения.
 
-Модуль -- это файл со специальными командами:
+Экспорт:
 
 <ul>
-<li>Экспорты -- </li>
+<li>`export` можно поставить прямо перед объявлением функции, класса, переменной.</li>
+<li>Если `export` стоит отдельно от объявления, то значения в нём указываются в фигурных скобках: `export {…}`.</li>
+<li>Также можно экспортировать "значение по умолчанию" при помощи `export default`.</li>
+</ul>
+
+Импорт:
+<ul>
+<li>В фигурных скобках указываются значения, а затем -- модуль, откуда их брать: `import {a, b, c as d} from "module"`.</li>
+<li>Можно импортировать все значения в виде объекта при помощи `import * as obj from "module"`.</li>
+<li>Без фигурных скобок будет импортировано "значение по умолчанию": `import User from "user"`.</li>
+</ul>
 
+На текущий момент модули требуют системы сборки на сервере. Автор этого текста преимущественно использует webpack, но есть и другие варианты.
 
 
 
 
 
-Общее между ними
 
-Модуль  -- способ организации кода по файлам. Каждый файл 
diff --git a/1-js/10-es-modern/13-modules/nums.view/bundle.js b/1-js/10-es-modern/13-modules/nums.view/bundle.js
@@ -48,7 +48,7 @@
 
 	var _nums = __webpack_require__(1);
 
-	console.log(_nums.one + _nums.two);
+	document.write('Сумма импортов: ' + (_nums.one + _nums.two));
 
 /***/ },
 /* 1 */
diff --git a/1-js/10-es-modern/13-modules/nums.view/index.html b/1-js/10-es-modern/13-modules/nums.view/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+</head>
+<body>
+
+  <script src="bundle.js"></script>
+    
+</body>
+</html>
diff --git a/1-js/10-es-modern/13-modules/nums.view/main.js b/1-js/10-es-modern/13-modules/nums.view/main.js
@@ -1,3 +1,3 @@
 import {one, two} from './nums';
 
-console.log(one + two);
+document.write(`Сумма импортов: ${one + two}`);
diff --git a/1-js/10-es-modern/13-modules/nums.view/webpack.config.js b/1-js/10-es-modern/13-modules/nums.view/webpack.config.js
@@ -1,6 +1,10 @@
-// Required:
-// npm i -g webpack
-// npm i babel-loader
+// Для использования нужен Node.JS
+// Поставьте его: 
+//   npm i -g webpack
+// Поставьте babel-loader: 
+//   npm i babel-loader
+// Запустите его в директории с файлами: 
+//   webpack
 
 module.exports = {
   entry: './main',
diff --git a/1-js/10-es-modern/14-proxy/article.md b/1-js/10-es-modern/14-proxy/article.md

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`import {one, two} from './nums';`
`2`	`2`
`3`		`-console.log(one + two);`
	`3`	+document.write(`Сумма импортов: ${one + two}`);