Если из всего этого нужно было бы запомнить что-то одно, то вот оно: самое важное, что делают замыкания, — это позволяют функциям работать, даже когда их среда существенно изменяется или исчезает. Любые переменные, находившиеся в области при создании функции, замыкаются и защищаются, чтобы обеспечить продолжение работы функции. Подобное поведение очень важно для таких динамических языков, как JavaScript, где вам часто приходится создавать, изменять и уничтожать что-либо на ходу. Удачи!
В этой главе мы затронули много тем. Если у вас есть какие-либо вопросы касательно пройденного, пожалуйста, пишите мне на форуме https://forum.kirupa.com, и вы получите ответ в кратчайшие сроки.
Глава 10. Где можно размещать код?
Ну что ж, немного отвлечемся от программирования по расписанию (ха!). Пока что весь написанный нами код в полном объеме «жил» внутри HTML-документа:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>An Interesting Title Goes Here</title>
<style>
body {
background-color: #EEE;
}
h1 {
font-family: sans-serif;
font-size: 36px;
}
p {
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>Are you ready for this?</h1>
<p>Are you ready for seeing (or already having seen!) the most
amazing dialog ever?</p>
<script>
alert("hello, world!");
</script>
</body>
</html>
Попробуем отмотать немного назад и поразмыслить вот над чем: целесообразно ли использовать элементы HTML, CSS и JS в одном документе? Для простоты нашего толкования структуры документа попробуем прибегнуть к творческому подходу и изменить представление кода, например отобразив его в виде таких вот чудных рамок (рис. 10.1):
Рис. 10.1. Наше представление веб-страницы
В примере ниже HTML-документ отделен от JavaScript лишь парой тегов script. Но на самом деле JavaScript-код не обязательно селить внутри HTML-документа. Его можно написать в отдельном файле (рис. 10.2).
При этом подходе мы больше не пишем JavaScript-код в HTML-документе. У нас по-прежнему есть тег script, но он лишь указывает на файл JavaScript, а не содержит все строки его кода.
Рис. 10.2. Теперь код JS живет в своем собственном файле!
Стоит заметить, что оба подхода не исключают друг друга, то есть мы можем совмещать их в документе HTML, применяя гибридный подход, при котором у нас будут как внешний файл JavaScript, так и строки JS-кода, содержащиеся внутри документа (рис. 10.3).
Рис. 10.3. Смешанный подход, при котором код JS существует в нескольких местах
Что еще интереснее, так это то, что у каждого из этих подходов могут быть свои дополнительные вариации. Например, создание нескольких секций script в HTML-документе или нескольких JS-файлов и т. д. В последующих разделах мы рассмотрим подробнее оба подхода и обсудим, когда и какой из них лучше выбирать.
В конце у вас сложится представление обо всех плюсах и минусах, что позволит вам грамотно взаимодействовать с JavaScript при разработке веб-страниц и приложений.
Поехали!
Подход № 1: весь код в HTML-документе
Первым мы рассмотрим подход, который использовали все это время. Он предполагает, что весь код JS находится внутри тега script рядом с остальной частью HTML-документа:
<!DOCTYPE html>
<html>
<body>
<h1>Example</h1>
<script>
function showDistance(speed, time) {
alert(speed * time);
}
showDistance(10, 5);
showDistance(85, 1.5);
showDistance(12, 9);
showDistance(42, 21);
</script>
</body>
</html>
Когда ваш браузер загружает страницу, он поочередно считывает каждую строку кода в HTML-документе сверху вниз. Дойдя до тега script, он также обрабатывает все строки JavaScript-кода. Закончив выполнение, он продолжает считывать оставшуюся часть документа. Это значит, что местоположение тега script очень важно. Мы обсудим этот момент чуть позже, при рассмотрении темы выполнения кода в подходящее время.
Подход № 2: код существует в отдельном файле
В этом случае наш основной HTML-документ не содержит никакого JS-кода. Вместо этого весь код располагается в отдельном документе. Такой подход разделен на две части. Первая относится к самому файлу JavaScript, а вторая отвечает за связь этого файла с HTML. Давайте рассмотрим обе эти части подробнее.