Назад

Объясняем современный JavaScript (часть №1)

Изучение современного JavaScript сложно, если вы не были там с самого начала. Экосистема растет и меняется так быстро, что трудно понять проблемы, которые пытаются решить различные инструменты. Я начал программировать в 1998 году, но серьезно изучать JavaScript начал только в 2014 году. В то время я помню, как наткнулся на Browserify и уставился на его слоган:

“Browserify позволяет запрашивать (‘модули’) в браузере, объединяя все ваши зависимости”.

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

Цель этой статьи — предоставить исторический контекст того, как инструменты JavaScript эволюционировали до того, чем они являются сегодня, в 2017 году. Мы начнем с самого начала и создадим пример веб—сайта, как это делали динозавры — никаких инструментов, только простой HTML и JavaScript. Затем мы будем вводить различные инструменты постепенно, чтобы увидеть проблемы, которые они решают по очереди. В этом историческом контексте вы сможете лучше учиться и адаптироваться к постоянно меняющемуся ландшафту JavaScript в будущем. Давайте начнем!

Использование JavaScript «олдскульным» способом

Давайте начнем с веб-сайта “старой школы”, использующего HTML и JavaScript, который включает в себя ручную загрузку и связывание файлов. Вот простой index.html файл, который ссылается на файл JavaScript:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Пример JavaScript</title>
  <script src="index.js "></script>
</head>
<body>
 <h1>Привет из HTML!</h1>
</body>
</html>

Строка <script src="index.js"></script>ссылается на отдельный файл JavaScript в том же каталоге с именем index.js:

// index.js
console.log("Привет от JavaScript!");

Это все, что вам нужно для создания веб-сайта! Теперь предположим, что вы хотели добавить библиотеку, которую кто-то другой написал, например moment.js (библиотека, которая может помочь форматировать даты в удобочитаемом для человека виде). Например, вы можете использовать momentфункцию в JavaScript следующим образом:

moment().startOf('day').fromNow(); // 20 часов назад

Но это только при условии, что вы включаете moment.js на вашем сайте! На домашняя страница для moment.js вы видите следующие инструкции:

В разделе установки справа много чего происходит. Но давайте пока проигнорируем это — мы можем добавить moment.js на наш веб-сайт, загрузив moment.min.jsфайл в том же каталоге и включив его в наш index.html файл.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Example</title>
 <link rel="stylesheet" href="index.css">
  <script src="moment.min.js"></script>
 <script src="index.js"></script>
</head>
<body>
 <h1>Hello from HTML!</h1>
</body>
</html>

Обратите внимание, что moment.min.js загружается до index.js, что означает, что вы можете использовать moment функция в index.js следующим образом:

// index.js
console.log("Hello from JavaScript!");
console.log(moment().startOf('day').fromNow());

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