Отказываемся от библиотеки jQuery в современной фронтенд разработке

На самом деле jQuery является крайне привлекательной для разработчика библиотекой по целой совокупности показателей. Появилась она в своём первоначальном виде в те времена, когда выбор браузеров был крайне невелик, а возможности, предоставляемые десктопной версией Internet Explorer 6 казались заоблачными. Работа по разработке и вёрстке тогда была гораздо утомительнее того, что есть сейчас, так как препятствий и сложностей для оптимизации сайта под отображение в браузерах было в разы больше, чем в наше время. В то время именно использование возможностей библиотеки jQuery позволяло облегчить реализацию задач кроссбраузерной разработки, помогая достаточно быстро решить проблемы, возникающие с отображением структуры сайта и визуализацией.

Естественно, что время не стоит на месте, поэтому фронтенд разработка постоянно развивается, да и современные браузеры в плане функциональности и особенностей работы давно уже значительно продвинулись относительно времени появления рабочей библиотеки jQuery. Поэтому в плане написания кода у современных разработчиков развязаны руки, возможностей в разы больше, а реализация кроссбраузерных задач требует значительно меньше времени и сил. Сейчас можно комфортно пользоваться функционалом, предоставляемым библиотеками ES5 и ES9, а также возможностями, которые реализуются с использованием APIs HTML5, значительно облегчающими работу с DOM. Поэтому сейчас современные фронтенд-разработчики находятся в ситуации, когда могут самостоятельно выбирать реализацию проекта сайта с библиотекой jOuery или с использованием функций методов, заменяющих её. При этом производительности в плане загрузки сайта и его функциональность не пострадают вне зависимости от выбранного вами способа реализации задач по фронтенду.

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

1. Проверка готовности документа Document Ready для постоянного контроля адекватности кода. Если вы продолжаете писать код с использованием библиотеки jQuery, то приобретите полезную привычку постоянно заворачивать фрагменты написанного кода в $(document).ready(). Это обеспечит постоянную готовность документа к отладке и запуску.Если вы не используете возможности jQuery, то можно применять для той же функции способ document.addEventListener('DOMContentLoaded').
2. Оптимизация выборки отдельных элементов. Ранее, когда иных вариантов не было, мы могли полагаться только на способы, имеющиеся в библиотеке jQuery: class, id и наименования отдельных тегов. Именно jQuery в такой ситуации становился настоящим спасителем фронтенд-разработчика, позволяя делать выборки сложного типа сразу по нескольким параметрам одновременно. Теперь современные браузеры, зная о такой особенности, используют 2 параметра для выборки таких элементов: querySelector или более общий querySelectorAll.Использование при разработке сайта метода определения document.querySelector позволит получить в поиске наиболее точно отвечающий его условиям аргумент, который первым попадётся при отработке запроса. В самом аргументе могут содержать как один, так и несколько селекторов CSS.К примеру, в формате html это будет выглядеть примерно так:<ul><li class="monsters">Mike Vazovsky</li><li class="monsters">Boo</li><li class="monsters">Sallie</li></ul>
3. Удаление или добавление функционала отслеживания происходящих событий. При разработке любого интернет-сайта или мобильного приложения именно отслеживание событий сервиса является базисом его функционирования. Раньше было 2 основных варианта, отличающихся по функционалу и реализации особенностей слежения за событиями: IE и все остальные браузеры. В наше время не стоит искать отдельных путей решения, так как для кроссбраузерной разработки используется функционал addEventListener. Его особенности позволят без труда начинать отслеживание событий после любого пользовательского действия на сайте или в приложении. Важно знать, что отслеживание никогда не будет работать на функциях с атрибутом анонимности, это важно понимать при создании сайта или приложения.
4. Управление атрибутами и классами. Без применения возможностей jQuery раньше управление было банально неудобным. С появлением невероятно полезного свойства classList всё поменялось в сторону упрощения и уменьшения размера исходного кода разрабатываемого сайта. Теперь управление атрибутами становится возможным сразу после ввода в код сайта или приложения переменной setAttribute. В CSS исполнении она будет выглядеть таким образом:.square &#123;width: 100px;height: 100px;margin-bottom: 20px;border: 1px solid grey;border-radius: 5px;&#125;.hidden &#123;visibility: hidden;&#125;.red &#123;background-color: red;&#125;
5. Задание контента в каждом элементе после получения информации о нём. Методы text() и html(), имеющиеся в составе библиотеки jQuery, часто применяются для решения вышеописанной задачи. Современные возможности Java Script позволят вам использовать также innerHTML или textContent. HTML позволяет реализовать задачу примерно таким способом:<p id="myParagraph"><strong> Which are the best animals? </strong></p><button>Koalas</button><button>Penguins</button>
6. Вставка элементов и их удаление. Кажется, что нет ничего проще, чем сделать это с использованием библиотеки jQuery, однако, как показывает практика, на HTML это реализуется также очень легко:<button>Add fries to lunch</button><button>Add cheese to sandwich</button><button>Remove pickles</button><h3>My Lunch</h3><ul id="lunch"><li><h4>My sandwich</h4></li><li>Bread</li><li id="pickles">Pickles</li><li id="Beef">Beef</li><li>Mayo</li><li>Bread</li></ul>
7. Проход по древовидной структуре DOM. Те, кто давно занимается фронтенд-разработкой, знают, насколько сложной может стать эта структура и как много может мелочей, замедляющих работу и загрузку сайта, в ней скрываться. Обычный API DOM, если сравнивать его с библиотекой jQuery, обладает ограниченной функциональностью в плане выбора элементов для объединения частей загружаемого сайта или приложения в единое целое. Реализация в CSS достаточно простая:div &#123;color: white;background-color: #93d0ea;font-family: sans-serif;width: 180px;text-align: center;padding: 10px;margin: 5px;&#125;А вот реализация с использованием HTML тегов будет выглядеть немного сложнее:Click on the objects to see their parent and children elements<div id="snakes">Snakes<ul id="venomous">Venomous<li>Cobra</li><li>Rattlesnake</li></ul><ul id="non-venomous">Non venomous<li>Python</li><li>Anaconda</li></ul></div>Click on any of the birds to see its siblings<div>Birds<ul id="birds"><li>Flamingo</li><li>Seagull</li><li>Raven</li><li>Dodo</li></ul></div>

Обращайтесь в наш сервис — мы поможем быстро и качественно реализовать проект сайта или мобильного приложения любой сложности с учётом всех современных особенностей фронтенд-разработки.

Полезная информация