Современный JavaScript — это мощный язык программирования во всем мире. Для разработки масштабируемого высококлассного веб-приложения большинство разработчиков предпочитают использовать этот язык. JavaScript выпустил версию ECMAScript 6 с мощными функциями, которые делают современный JavaScript популярным. Сегодня я поделюсь некоторыми мощными функциями с их функциональностью.
Событие
Когда действия выполняются пользователем, возникновение этого действия называется событием, которое запускается пользователем.
Некоторые примеры HTML-событий
- Веб-страница завершила загрузку
- Ввод HTML был изменен
- Был нажат HTML-код
Всплывающие события
Пузырь событий — одна из замечательных функций в JavaScript, с помощью которой мы можем более разумно манипулировать DOM. Он распространяет событие от самого нижнего элемента к восходящему элементу, как всплывающее окно. Это тип распространения событий. Пузырь событий работает следующим образом
- Во-первых, он фиксирует событие в целевом элементе.
- после этого он будет искать событие в своем родительском элементе
- Таким образом, он распространяет событие от самого нижнего до самого высокого элемента в DOM.
Поэтому, когда происходит событие его целевого элемента, он будет выполнять все события своего родительского элемента. См. пример ниже
Распространение событий
Распространение событий — это процесс описания событий, запускаемых элементами DOM. Основная проблема с пузырем событий заключается в том, что если я добавляю обработчик событий к самому внутреннему элементу в DOM, он выполняет все обработчики событий своих родительских элементов. Но мы можем справиться с этим двумя способами
остановить распространение()
Этот метод остановит распространение только его родительского элемента с пузырьком события.
остановитьнемедленное распространение():
Этот метод остановит все обработчики событий, которые должны распространяться пузырьком событий.
См. пример ниже
Делегирование событий с всплывающим окном событий
Предположим, у нас есть список элементов в элементе DOM, и мы хотим удалить или изменить элемент по отдельности с помощью обработчика событий. В этом случае мы можем использовать один и тот же класс для каждого элемента в списке, а с помощью цикла for мы можем добавить прослушиватель событий к каждому элементу в списке. Используя эту технику, мы можем изменить или удалить любой элемент из списка. Но это менее оптимальный и требующий больших затрат памяти процесс, потому что, когда мы устанавливаем обработчик событий для каждого элемента в списке, он будет резервировать ссылку для каждого элемента в памяти. Это неприемлемо.
Чтобы избежать этой проблемы, если мы установим обработчик события для родительского элемента этих элементов, пузырь события может захватить обработчик события путем всплытия, и когда мы нажмем элемент, чтобы изменить или удалить, всплывающее окно события захватит обработчик родительского элемента и выполнить его для своих дочерних элементов. Таким образом, процесс объявления обработчика событий для соответствующего родительского элемента для уменьшения потребления памяти называется делегированием событий. См. пример
Упрощенная концепция цикла событий
В JavaScript есть концепция, называемая циклом событий. Давайте узнаем, как цикл событий работает за кулисами.
JavaScript поддерживает очередь ожидающих строк, в которой все задания ожидают выполнения. JavaScript также имеет стек, в котором он выполняет задания последовательно сверху вниз, и через определенное время, когда JavaScript завершает все задания, содержащиеся в стеке, он начинает брать задание или поток из очереди очереди ожидания, а затем выполняет их один за другим. В основном цикл событий JavaScript работает с использованием этого подхода. Если мы посмотрим на пример
Концепция синхронного JavaScript
JavaScript является однопоточным, что означает, что это синхронный язык программирования, где он может выполнять одно задание за раз, и до тех пор, пока не будет завершена первая задача, он блокирует все запрошенные задания в очереди. Это очистит задачу последовательно. Если мы увидим пример
Концепция асинхронного JavaScript
JavaScript идеально синхронный язык программирования. Но мы можем использовать JavaScript как асинхронный способ, используя некоторые функции обратного вызова, разработчики, которые хотят выполнять свои потоки асинхронно с помощью JavaScript, могут использовать следующие из этих
setTimeout()
Это функция обратного вызова. Он прерывает синхронный поток JavaScript и преобразует его в асинхронный поток, что означает, что мы можем сообщить JavaScript, когда поток будет выполняться, установив время ожидания функции обратного вызова. Давайте посмотрим пример
setInterval()
Это также функция обратного вызова. Разница между функциями setTimeout и setInterval заключается в том, что функция setInterval выполняется через определенный интервал времени. Если мы говорим JavaScript запускать функцию каждые 5 секунд, то функция обратного вызова выполняет ее асинхронно. См. пример ниже
Функция асинхронного ожидания
Эта функция работает с асинхронным потоком, что означает, что когда мы объявляем асинхронную функцию с помощью async и await, функция будет выполняться, не заботясь о синхронном потоке JavaScript. Асинхронная функция и функция ожидания используются, когда мы извлекаем данные из стороннего API или любого другого источника и заставляем функцию ждать до успешного извлечения данных. Использование функции вместо использования кода обычной функции повышает читабельность. Давайте посмотрим на пример
Но следует отметить, что после синхронного выполнения всех заданий JavaScript будет выполнять асинхронные функции.
Когда использовать функцию обратного вызова
Предположим, у нас есть функция, и когда мы будем использовать другую функцию в качестве аргумента или значения параметра, тогда эта функция будет называться функцией обратного вызова.
Функция обратного вызова может использоваться, когда мы хотим использовать основную функцию (откуда возвращается функция обратного вызова) в разных случаях для получения разных результатов. Давайте посмотрим на пример
Инкапсуляция с помощью концепций замыкания
Представьте, что у нас есть функция с именем секундомер. Если мы возвращаем функцию из функции секундомера, создается замыкание. И если эта возвращаемая функция (закрытие) возвращает что-либо, что объявляется в области функции секундомера, тогда возвращаемая функция получит доступ к значению и на основе значения создаст закрытую среду или ссылку для отдельных вызовов функций. Где он скрывает детали реализации своей внешней функции (секундомера). Его также называют инкапсуляцией. Давайте посмотрим на пример
Здесь мы видим, что функция секундомера вернула функцию, и эта функция создала индивидуальную ссылку на закрытую среду для различных вызовов функций.
Подъем
Когда мы выполняем коды в JavaScript. Механизм JavaScript перемещает объявление переменной и функции в верхнюю часть области видимости. Этот подход известен как подъем в JavaScript. В JavaScript есть два типа подъема.
- Переменный подъем
- Функция подъема
Поднятие переменных
В JavaScript подъем переменной означает, что движок JavaScript перемещает объявление переменной в верхнюю часть области видимости. Предположим, если мы напечатаем переменную перед объявлением, тогда она выдаст ошибку с неопределенным значением. Если мы объявим переменную с ключевым словом var.
Но если мы объявим переменную с ключевым словом let, она выдаст ошибку ссылки с сообщением, которое вы видите.
Итак, мы поняли, что за кулисами JavaScript поднимает переменную, объявленную с помощью let. Однако декларация подъема JavaScript, а не инициализация.
Подъем функций
Движок JavaScript также поднимает объявление функции наверх области видимости. Но есть поворот, который заключается в объявлении только функции JavaScript hoist, если мы видим пример
Здесь мы видим, что объявление функции поднято, но когда мы объявляем функцию с переменной и вызываем их из верхней части области видимости, это выдает ошибку. Таким образом, мы можем сказать, что стрелочная функция и функциональное выражение не поддерживаются в JavaScript.
Решение некоторых проблем с помощью простой техники
Удалить повторяющееся значение из массива.
Эту проблему можно решить разными способами, но я покажу вам, как решить ее проще всего.
Перевернуть строку
Как и предыдущая задача, эту задачу можно решить по-разному. Но я покажу вам, как решить эту проблему простым способом.
Подсчет слов в строке
Эта проблема не является большой проблемой для решения. Разные программисты решают эту задачу по-разному. Смотрите, как я решил это
Заключение
Итак, если подытожить всю статью, мы узнали о событии JavaScript, пузыре событий также узнали, как пузырь событий работает с делегированием событий, после чего мы узнали о циклах событий, синхронных и асинхронных концепциях в JavaScript. Также известно о функции обратного вызова, замыкании и подъеме. В последней части статьи я показал, как решить некоторые проблемы в JavaScript, используя некоторые секретные методы.
Надеюсь, вам понравились мои статьи. Если вам нравится мой блог, пожалуйста, напишите мне свой ценный комментарий, чтобы улучшить качество моих статей.
Удачного кодирования JavaScript.
