Skip to content

Commit 0ddfb84

Browse files
iliakaniliakan
committed
up
1 parent 1b4bb8b commit 0ddfb84

1 file changed

Lines changed: 39 additions & 86 deletions

File tree

‎1-js/1-getting-started/2-es-modern-now/article.md‎

Lines changed: 39 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,71 @@
1-
# Справочники и спецификации
21

3-
В этом разделе мы познакомимся со справочниками и спецификациями.
2+
# Modern JavaScript now
43

5-
Если вы только начинаете изучение, то вряд ли они будут нужны прямо сейчас. Тем не менее, эта глава находится в начале, так как предсказать точный момент, когда вы захотите заглянуть в справочник -- невозможно, но точно известно, что этот момент настанет.
4+
The [latest standard](http://www.ecma-international.org/publications/standards/Ecma-262.htm) was approved in June 2015.
65

7-
Поэтому рекомендуется кратко взглянуть на них и взять на заметку, чтобы при необходимости вернуться к ним в будущем.
6+
As it includes a lot of new features, most browsers implement them partially. You can find the current state of the support at [](https://kangax.github.io/compat-table/es6/).
87

9-
[cut]
8+
Sometimes the project is targeted to a single JavaScript engine, like Node.JS (V8). Then we can use only the features supported by V8 (quite a lot).
109

11-
## Справочники, и как в них искать
10+
But what if we're writing a cross-browser application?
1211

13-
Самая полная и подробная информация по JavaScript и браузерам есть в справочниках.
12+
## Babel.JS
1413

15-
Её объём таков, что перевести всё с английского невозможно. Даже сделать "единый полный справочник" не получается, так как изменений много и они происходят постоянно.
14+
[Babel.JS](https://babeljs.io) is a [transpiler](https://en.wikipedia.org/wiki/Source-to-source_compiler), it rewrites the modern JavaScript code into the previous standard.
1615

17-
Тем не менее, жить вполне можно если знать, куда смотреть.
1816

19-
**Есть три основных справочника по JavaScript на английском языке**:
17+
Он состоит из двух частей:
2018

2119
<ol>
22-
<li>[Mozilla Developer Network](https://developer.mozilla.org/) -- содержит информацию, верную для основных браузеров. Также там присутствуют расширения только для Firefox (они помечены).
23-
24-
Когда мне нужно быстро найти "стандартную" информацию по `RegExp` - ввожу в Google **"RegExp MDN"**, и ключевое слово "MDN" (Mozilla Developer Network) приводит к информации из этого справочника.
25-
</li>
26-
<li>[MSDN](http://msdn.microsoft.com) -- справочник от Microsoft. Там много информации, в том числе и по JavaScript (они называют его "JScript"). Если нужно что-то, специфичное для IE -- лучше лезть сразу туда.
27-
28-
Например, для информации об особенностях `RegExp` в IE -- полезное сочетание: **"RegExp msdn"**. Иногда к поисковой фразе лучше добавить термин "JScript": **"RegExp msdn jscript"**. </li>
29-
<li>[Safari Developer Library](https://developer.apple.com/library/safari/navigation/index.html) -- менее известен и используется реже, но в нём тоже можно найти ценную информацию.</li>
20+
<li>Собственно транспайлер, который переписывает код.</li>
21+
<li>Полифилл, который добавляет методы `Array.from`, `String.prototype.repeat` и другие.</li>
3022
</ol>
3123

32-
Есть ещё справочники, не от разработчиков браузеров, но тоже хорошие:
33-
34-
<ol>
35-
<li>[http://help.dottoro.com]() -- содержит подробную информацию по HTML/CSS/JavaScript.</li>
36-
<li>[http://javascript.ru/manual]() -- справочник по JavaScript на русском языке, он содержит основную информацию по языку, без функций для работы с документом. К нему можно обращаться и по адресу, если знаете, что искать. Например, так: [http://javascript.ru/RegExp]().
37-
</li>
38-
<li>[http://www.quirksmode.org]() -- информация о браузерных несовместимостях. Этот ресурс сам по себе довольно старый и, в первую очередь, полезен для поддержки устаревших браузеров. Для поиска можно пользоваться комбинацией **"quirksmode onkeypress"** в Google. </li>
39-
<li>[http://caniuse.com]() -- ресурс о поддержке браузерами новейших возможностей HTML/CSS/JavaScript. Например, для поддержки функций криптографии: [http://caniuse.com/#feat=cryptography]().
40-
</li>
41-
</ol>
42-
43-
## Спецификации
44-
45-
Спецификация -- это самый главный, определяющий документ, в котором написано, как себя ведёт JavaScript, браузер, CSS и т.п.
46-
47-
Если что-то непонятно, и справочник не даёт ответ, то спецификация, как правило, раскрывает тему гораздо глубже и позволяет расставить точки над i.
48-
49-
### Спецификация ECMAScript
50-
51-
Спецификация (формальное описание синтаксиса, базовых объектов и алгоритмов) языка Javascript называется [ECMAScript](http://www.ecma-international.org/publications/standards/Ecma-262.htm).
52-
53-
Её перевод есть на сайте в разделе [стандарт языка](http://es5.javascript.ru/).
54-
55-
[smart header="Почему не просто &quot;JavaScript&quot; ?"]
56-
Вы можете спросить: "Почему спецификация для JavaScript не называется просто *"JavaScript"*, зачем существует какое-то отдельное название?"
57-
58-
Всё потому, что JavaScript&trade; -- зарегистрированная торговая марка, принадлежащая корпорации Oracle.
24+
На странице [](https://babeljs.io/repl/) можно поэкспериментировать с транспайлером: слева вводится код в ES-2015, а справа появляется результат его преобразования в ES5.
5925

60-
Название "ECMAScript" было выбрано, чтобы сохранить спецификацию независимой от владельцев торговой марки.
61-
[/smart]
26+
Обычно Babel.JS работает на сервере в составе системы сборки JS-кода (например [webpack](http://webpack.github.io/) или [brunch](http://brunch.io/)) и автоматически переписывает весь код в ES5.
6227

63-
Спецификация может рассказать многое о том, как работает язык, и она является самым фундаментальным, доверенным источником информации.
28+
Настройка такой конвертации тривиальна, единственно -- нужно поднять саму систему сборки, а добавить к ней Babel легко, плагины есть к любой из них.
6429

65-
### Спецификации HTML/DOM/CSS
30+
Если же хочется "поиграться", то можно использовать и браузерный вариант Babel.
6631

67-
JavaScript -- язык общего назначения, поэтому в спецификации ECMAScript нет ни слова о браузерах.
32+
Это выглядит так:
6833

69-
Главная организация, которая занимается HTML, CSS, XML и множеством других стандартов -- [Консорциум Всемирной паутины](https://ru.wikipedia.org/wiki/%D0%9A%D0%BE%D0%BD%D1%81%D0%BE%D1%80%D1%86%D0%B8%D1%83%D0%BC_%D0%92%D1%81%D0%B5%D0%BC%D0%B8%D1%80%D0%BD%D0%BE%D0%B9_%D0%BF%D0%B0%D1%83%D1%82%D0%B8%D0%BD%D1%8B) (World Wide Consortium, сокращённо W3C).
34+
```html
35+
<!--+ run -->
36+
*!*
37+
<!-- browser.js лежит на моём сервере, не надо брать с него -->
38+
<script src="https://js.cx/babel-core/browser.min.js"></script>
39+
*/!*
7040

71-
Информацию о них можно найти на сайте [w3.org](http://w3.org). К сожалению, найти в этой куче то, что нужно, может быть нелегко, особенно когда неизвестно в каком именно стандарте искать. Самый лучший способ -- попросить Google с указанием сайта.
41+
<script type="text/babel">
42+
let arr = ["hello", 2]; // let
7243
73-
Например, для поиска `document.cookie` набрать [document.cookie site:w3.org](https://www.google.com/search?q=document.cookie+site%3Aw3.org).
44+
let [str, times] = arr; // деструктуризация
7445
75-
Последние версии стандартов расположены на домене [dev.w3.org](http://dev.w3.org).
46+
alert( str.repeat(times) ); // hellohello, метод repeat
47+
</script>
48+
```
7649

77-
Кроме того, в том, что касается HTML5 и DOM/CSS, W3C активно использует наработки другой организации -- [WhatWG](https://whatwg.org/). Поэтому самые актуальные версии спецификаций по этим темам обычно находятся на [https://whatwg.org/specs/]().
50+
Сверху подключается браузерный скрипт `browser.min.js` из пакета Babel. Он включает в себя полифилл и транспайлер. Далее он автоматически транслирует и выполняет скрипты с `type="text/babel"`.
7851

79-
Иногда бывает так, что информация на сайте [http://dev.w3.org]() отличается от [http://whatwg.org](). В этом случае, как правило, следует руководствоваться [http://whatwg.org]().
52+
Размер `browser.min.js` превышает 1 мегабайт, поэтому такое использование в production строго не рекомендуется.
8053

81-
## Итого
54+
# Примеры на этом сайте
8255

83-
Итак, посмотрим какие у нас есть источники информации.
56+
[warn header="Только при поддержке браузера"]
57+
Запускаемые примеры с ES-2015 будут работать только если ваш браузер поддерживает соответствующую возможность стандарта.
58+
[/warn]
8459

85-
Справочники:
86-
<ul>
87-
<li><a href="https://developer.mozilla.org/">Mozilla Developer Network</a> -- информация для Firefox и большинства браузеров.
88-
Google-комбо: `"RegExp MDN"`, ключевое слово "MDN".</li>
89-
<li><a href="http://msdn.microsoft.com/">MSDN</a> -- информация по IE.
90-
Google-комбо: `"RegExp msdn"`. Иногда лучше добавить термин "JScript": `"RegExp msdn jscript"`.</li>
91-
<li>[Safari Developer Library](https://developer.apple.com/library/safari/navigation/index.html) -- информация по Safari.</li>
92-
<li><a href="http://help.dottoro.com">http://help.dottoro.com</a> -- подробная информация по HTML/CSS/JavaScript с учётом браузерной совместимости.
93-
Google-комбо: `"RegExp dottoro"`.</li>
94-
<li>[](http://javascript.ru/manual) -- справочник по JavaScript на русском языке. К нему можно обращаться и по адресу, если знаете, что искать. Например, так: [](http://javascript.ru/RegExp).
95-
Google-комбо: `"RegExp site:javascript.ru"`.
96-
</li>
97-
</ul>
60+
Это означает, что при запуске примеров в браузере, который их не поддерживает, будет ошибка. Это не означает, что пример неправильный! Просто пока нет поддержки...
9861

99-
Спецификации содержат важнейшую информацию о том, как оно "должно работать":
62+
Рекомендуется [Chrome Canary](https://www.google.com/chrome/browser/canary.html) большинство примеров в нём работает. [Firefox Developer Edition](https://www.mozilla.org/en-US/firefox/channel/#developer) тоже неплох в поддержке современного стандарта, но на момент написания этого текста переменные [let](/let-const) работают только при указании `version=1.7` в типе скрипта: `<script type="application/javascript;version=1.7">`. Надеюсь, скоро это требование (`version=1.7`) отменят.
10063

101-
<ul>
102-
<li>JavaScript, современный стандарт [ES5 (англ)](http://www.ecma-international.org/publications/standards/Ecma-262.htm), и предыдущий [ES3 (рус)](http://javascript.ru/ecma).</li>
103-
<li>HTML/DOM/CSS -- на сайте [http://w3.org](http://www.w3.org).
104-
Google-комбо: `"document.cookie site:w3.org"`.</li>
105-
<li>...А самые последние версии стандартов -- на [http://dev.w3.org]() и на [http://whatwg.org/specs/](https://whatwg.org/specs/).</li>
106-
</ul>
64+
Впрочем, если пример в браузере не работает (обычно проявляется как ошибка синтаксиса) -- почти все примеры вы можете запустить его при помощи Babel, на странице [Babel: try it out](https://babeljs.io/repl/). Там же увидите и преобразованный код.
10765

108-
То, как оно на самом деле работает и несовместимости:
66+
На практике для кросс-браузерности всё равно используют Babel.
10967

110-
<ul>
111-
<li>[http://quirksmode.org/](). Google-комбо: `"innerHeight quirksmode"`.</li>
112-
</ul>
68+
Ещё раз заметим, что самая актуальная ситуация по поддержке современного стандарта браузерами и транспайлерами отражена на странице [](https://kangax.github.io/compat-table/es6/).
11369

114-
Поддержка современных и новейших возможностей браузерами:
70+
Итак, поехали!
11571

116-
<ul>
117-
<li>[http://caniuse.com](). Google-комбо: `"caniuse geolocation"`.</li>
118-
</ul>

0 commit comments

Comments
 (0)