Изучение современного 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! Хорошо было то, что это было достаточно легко понять. Плохо было то, что было раздражающе находить и загружать новые версии библиотек каждый раз, когда они обновлялись.