Все статьи | Блог студента

Манипулирование DOM или как перестать гадать и начать угадывать

Эта статья написана нашим студентом. Мнение пользователей иногда может не совпадать с точкой зрения Хекслета
Манипулирование DOM или как перестать гадать и начать угадывать главное изображение

Завершил курс «JS: DOM API» https://ru.hexlet.io/courses/js-dom занимательный курс, посвященный манипулированию DOM.

Я уже несколько лет пишу скрипты на JS, но как-то напрямую с DOM не работал, в основном через Jquery. Прошёл этот курс и понял почему, когда я начал изучать JS, ES6 ещё не было, и король был jQuery. Пишешь один код и он работает везде в любом браузере. Обычно код в Chrome, в Firefox работал, особняком стоял IE для которого необходимо было писать свой код отличный от других браузеров. Но года бегут, изменилось чуть более, чем всё, появились новые нативные команды. Что не понравилось, они длиннее по синтаксису и необходимо очень хорошо понимать алгоритмы работы браузера (всплытие, асинхронные события).

Работа с jQuery напоминает кнопочный стиль программирования. Есть кнопка, и на клик этой кнопки вешаем обработчик, который всё делает. Но по факту это путь в никуда, при достаточно большом объёме кода программа превращается в кирпич, и понял что некорректно работает очень и очень трудоёмко.

Всё хорошо, на нативном JS, можно написать любую программу, но один минус за бесконечное время и мало кто из клиентов согласен столько ждать, поэтому на смену native JS приходят фреймворки. Но грамотно программировать на JS тоже нужно уметь, т.к. на собеседованиях постоянно предлагают задачи, которые необходимо реализовать на чистом JS без использования библиотек.

картинка

Но своих «приколов» хватает и у DOM, например, команда fetch, при помощи её можно получить json с удаленного сервера, думаете, она сразу возвращает json, нет, она возвращает промис, который возвращает json. Напоминает песню: «Я оглянулся посмотреть, оглянулась ли она, чтобы посмотреть, оглянулся ли я». Поэтому, вместо fetch, эффективней использовать библиотеку axios https://github.com/axios/axios.

Многие решения Кирилла на упражнения меня озадачили, например в упражнении «Обход DOM» было предложено рекурсивное решение с использованием рекурсивной функции reduce, как это всё работает я не понял до сих пор. В упражнении «Пятнашки» я несколько раз переписывал программу, пытался пройти тесты у меня это не получилось. Я решил перестать гадать и захотел начать угадывать, плюнул и посмотрел решение с потерей баллов, тесты оказались заточены под конкретное решение учителя.

А вот урок «Формы» мне понравился, редко где даётся как правильно работать с формой. Итак, курс «JS: DOM API» мне понравился, рекомендую.

Оригинальная публикация.

Аватар пользователя Олег Гребенёв
Олег Гребенёв 12 февраля 2020
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
1 декабря 8 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
1 декабря 8 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
1 декабря 8 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
1 декабря 8 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
1 декабря 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Новый
Создает веб-приложения со скоростью света
1 декабря 5 месяцев