В даном теоретическом уроке мы изучим что такое замыкания, строгий режим и использование файлов cookie. И начнем сф с изучения замыкания. Суть замыкания в том, что когда мы создаем функцию в JavaScript, она может иметь свои собственные переменные. Но функции могут также “помнить” переменные из внешней функции, в которой они были созданы. Это и называется замыканием. Давай рассмотрим это на простом примере.
Создадим функцию, в теле которой мы создадим переменную и вернем с помощью оператора return другую функцию. Назовем эту функцию, которая будет содержать переменную и возвращать другую функцию как Внешняя функция.
Создадим переменную, назовем её счетчик и пусть она будет равна 0. Эта не доступна за пределами этой функции. Теперь с помощью оператора return вернем другую функцию. Назовем её внуренняяФункция. Эта функция имеет доступ к переменной счетчик. И давайте внутри этой функции прибавим к переменной счетчик единицу. И выведем результат в консоль.
Далее создадим константу мойСчетчик и в качестве значения вызовем внешнюю функцию. Т.е. получается в этой константе будет содержатся внутренняя функция, которая имеет доступ к переменной счетчик, не смотря на то что внешняя функция завершила свое выполнение. Теперь запустим эту внутреннюю функцию. И консоль вывела один. Значит переменная счетчик теперь имеет значение 1. И если мы запустим внутреннюю функцию еще раз, то консоль вернет нам число 2.
Т.е. получается благодаря замыканию мы создали переменную, к которой имеет доступ только внутренняя функция. Никакими другими способами мы эту переменную изменить не можем. Она изолирована от всего, кроме внутренней функции.
Замыкания полезны, потому что они позволяют создавать защищенные переменные, которые нельзя изменить напрямую из внешнего кода. Это помогает избежать конфликтов и делает код более безопасным и предсказуемым.
Домашнее задание.
Задание: Создание счетчика баллов в игре
Метод получитьБаллы должен возвращать текущее значение баллов.
Создай функцию создатьСчетчик, которая будет возвращать объект с методами увеличить и получитьБаллы.
Переменная для хранения текущих баллов должна быть объявлена внутри функции создатьСчетчик, чтобы она не была доступна извне. Это обеспечит использование замыкания.
Метод увеличить должен принимать число, которое будет добавляться к текущим баллам.
Переходим к следующей теме – это использование строгого режима. Данный режим позволяет писать более качественный и безопасный код. Чтобы активировать данный режим, надо перед вашим скриптом написать строку “use strict”. И на самом деле мы весь код в данном курсе писали по всем правилам строгого режима, избегая все сомнительные способы написания кода. Давайте рассмотрим все примеры, которые непозволительно писать в строгом режиме.
Для начала перед нашим кодом активируем строгий режим.
Вне строго режима мы можем объявить переменную и задать ей значение без использования ключевого слова let. Но в строгом режиме это запрещено. Давайте проверим в консоли.
И вот мы получили ошибку, что переменной x не существует. А если мы отключим строгий режим. То ошибка не появится.
Далее в строго режиме нельзя удалять переменные. Есть такой оператор delete, благодаря которому мы можем удалять переменные из памяти, но в строгом режиме это запрещено.
И как видите программа подчеркнула красной волнистой линией переменную x, тем самым сообщая об ошибке. Если мы отключим строгий режим, то программа перестанет подчеркивать переменную x.
Далее в строгом режиме нельзя чтобы у функции были параметры с одинаковыми именами.
И последнее, в строгом режиме нельзя использовать имена eval и arguments. Слово eval используется в javascript для функции которая позволяет выполнять код, переданный в виде строки. Например, вы можете использовать eval("2 + 2"), и это вернет 4. А слово arguments является специальным объектом, доступным внутри функций, который содержит список аргументов, переданных в функцию.
Переходим к третьей теме – это cookie. Cookies в JavaScript — это способ хранения небольшого объёма данных на стороне клиента, то есть на компьютере пользователя. Мы уже сохраняли информацию в localStorage, а чем сохранение информации в куки отличается от localStorage.
Первое и самое важное отличие: информация которая хранится в cokkie автоматически отправляется на сервер. Обычно там хранят данные данные о пользователе, которые необходимо отправить на сервер. Вы скорее всего уже сталкивались с ситуацией, когда заходили на сайт и появлялось предупреждение, что сайт использует куки-файлы, т.е. сайт собирает на вас информацию и отправляет на сервер.
Данные которые хранятся в localStorage никуда не отправляются, они хранятся только на компьютере пользователя.
Следующее важное отличие – это размер данных, которые могут хранится. Для localStorage это максимум 5-10мб, в зависимости от браузера. А куки могут хранить не больше 4 килобайт данных.
И последнее важное отличие – для данных хранящихся в куках можно задать время хранения. Т.е. если мы укажем 1 час, то информация хранящиеся в куках через 1 час очистится. Информация в локал сторедж не имеет срока хранения, и её можно удалить либо через код JAvaScript, либо очистив кеш браузера.
Создать данные для хранения в куках очень просто. Давайте сперва напишем переменную, которая будет хранить ваше имя.
В качестве значения попросим пользователя ввести свое имя через метод промпт.
Далее чтобы создать куки, нам необходимо воспользоваться свойством куки объекта document.
Значение у куки должна быть строка, которая будет состоять из ключа, знака равно и значения. Давайте напишем ключ Имя пользователя. Ключ не должен иметь пробелов, поэтому в качестве разделителя слов, мы можем указать тире. Далее указываем равно. А в качестве значения будет наше имя. Далее с помощью точки с запятой мы можем написать еще ключ значение. Давайте укажем время хранения данных, например 1 час. Для этого напишем ключ max-age и укажем время в секундах. В одном часе 3600 секунд. Указываем. И еще часто указывают, чтобы куки отправлялись с любой страницы сайта. Для это пишем path. и в значении ставим косую черту.
Далее покажем что у нас хранится в куках с помощью метода alert. И видим какие данные у нас хранятся в куках. А хранится у нас только имя пользователя, так как остальные данные – это параметры такие как сколько по времени хранить информацию, и с каких страниц сайта будут отправляться куки на сервер.
И последнее, о чем я хотел рассказать – это до конца разобрать параметр option в методе adEventListener. В уроке где я рассказывал про метод adEventListener параметр option я рассмотрел наполовину. Точнее рассказал про опции capture и once, а про опции passive и signal я сказал что расскажу как нибудь потом.
И вот в конце курса я решил закрыть этот пробел. Опция passive очень проста и нужна для оптимизации вашей программы. Если указать значение true, то тем самым вы указываете браузеру что в функции здесь не будете использовать метод preventDefault. Тогда браузер оптимизирует обработку вашего события, что может привести в некоторых случаях прирост производительности вашей программы.
Переходим к опции signal. С помощью этой опции мы можем отменить слушатель, если он нам больше не нужен. Опция signal тесно связана с объектом AbortContriller, и когда объект даст, так сказать сигнал, что слшатель больше не нужен, метод adEventListener прекратит свое выполнение.
Давайте покажу это на примере. Я заранее подготовил такой html файл где есть кнопка и тег абзаца. Получим к ним доступ с помощью JaavaScript.
Теперь создадим константу в качестве значения которой мы создадим объект AbortController. И еще создадим переменную counter c помощью которой мы будем считать сколько раз кликнули по кнопке.
Далее прикрепим слушатель к кнопке
Отслеживать мы будем клик, в качестве второго параметра у нас будет стрелочная функция. А в теле этой функции сперва прибавим один к переменной коунтер. Затем добавим тегу абзаца такой текст. Далее если переменная каунтер равна 5, то вызовем метод эборт объекта контроллер. тем самым мы прекратим выполнение этого слушателя. Но только после того как свяжем этот объект контроллер с нашим слушателем. Для этого в опции signal используем свойство сигнал объекта контроллер.
Кстати, так как третий параметр, это объект, то ключ значение также можно будет добавить с помощью переменной таким образом:
