Почему я до сих пор использую jQuery в 2019 году
От автора: многие люди выступают за «просто используйте vanilla JavaScript, вам не нужен jQuery». Ну, многие вещи мне не нужны, но, тем не менее, их приятно иметь. Мне не обязательно нужен JQuery в 2019 году, у него есть не только плюсы, но и минусы. Но его, конечно, приятно иметь!
Такие страницы, как You might not need jQuery, пытаются продвигать идею, что вы можете легко отказаться от jQuery, но самый простой пример того, почему — это хорошая идея использовать jQuery: одна строка обычного кода jQuery заменяет 10 строк vanilla JS!
Большая часть JavaScript API — особенно DOM API — оскорбляет мое чувство эстетики, и это просто вежливый способ сказать, что я думаю, что JavaScript — это отстой.
el.insertAdjacentElement(‘afterend’, other) несомненно работает, но $(el).after(other) на самом деле более приятно. Хотя я никогда не был большим поклонником того, как выглядит функция $(), она намного лучше, чем то, что дает нам DOM.
Простой пример: как вы получаете элемент одного уровня? Это nextSibling или nextElementSibling? Какая разница? Какие браузеры поддерживают что? Пока вы заняты тем, что пытаетесь свериться с MDN, я просто буду использовать в jQuery next() или prev().
Онлайн курс по JavaScript
Научитесь создавать приложения со сложными интерфейсами
Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.
Многие обычные операции в стандартных API-интерфейсах JavaScript неудобны; я мог бы привести целый список, но страница You might not need jQuery (YMNJQ) уже сделала это.
Вам по-прежнему понадобятся вспомогательные функции для различных общих задач. Опять же, на странице YMNJQ перечислены некоторые из них. Использование jQuery является стандартным способом включения этих вспомогательных функций вместо копирования / вставки их из случайных тем Stack Overflow каждый раз, когда они вам нужны.
Хотя совместимость браузеров является гораздо менее существенной проблемой , но она все еще актуальна, особенно если вы не принадлежите к типу людей «если это работает для 85% всего мира , то это достаточно хорошо для меня».
Вы всегда должны использовать JQuery? Нет, конечно нет. Добавление любой зависимости сопряжено с увеличением сложности и размера файла, но jQuery не так уж велик: сборка по умолчанию составляет 30 КБ, сжатая, пользовательская сборка без ajax и необычных вещей 23 КБ, а сборка, использующая querySelector вместо SizzleJS, составляет 17 КБ. И оригинальные 30K, и оптимизированные 17K кажутся мне вполне приемлемыми для многих целей.
Вы можете посмотреть на Bootstrap удаляет jQuery, чтобы увидеть пример того, как много усилий может потребоваться для использования vanilla JS: они написали свои собственные хелперы, пришлось отказаться от поддержки IE, так как ее было слишком сложно добавить, сделали API несовместимым («мы сломали все») и потратили на это полтора года. Если я посмотрю на конечный результат, я не могу сказать, что это намного лучше.
Я понимаю, почему они это сделали; люди хотят использовать Bootstrap с Vue.js и еще много чего, а использовать и Vue.js, и jQuery немного глупо. Я за то, чтобы уменьшить «веб-раздутие», но мы должны быть прагматичными и реалистичными. Включение ~17K jQuery действительно так плохо? Когда я упоминаю, что вам нужен более чем мегабайт JavaScript для такого сайта, как Medium или New York Times, то что, 17 КБ jQuery такое уж невыносимое бремя?
Есть несколько веских причин не использовать jQuery: если вы пишете код, который хотите использовать повторно, или если вы пишете только небольшую функцию. Но делать что-то, просто чтобы избежать jQuery? Просто используйте jQuery! «JQuery для всего», вероятно, не была такой уж хорошей идеей, но и «jQuery ни для чего» не лучше.
Я не зациклен на jQuery, и я с радостью использую «jQuery light», который соединяет JS API с чем-то более привлекательным. YMNJQ рекомендует bonzo и $dom, а также несколько других для AJAX и тому подобного, но многие из них, кажется, не поддерживаются достаточно. Кроме того, все уже знают jQuery. Зачем заменять его чем-то другим, если для этого нет веских причин?
Некоторые читатели могут задаться вопросом «а как же Vue.js, React или какой-либо другой современный фреймворк?» Цель этого поста — сравнить vanilla JavaScript с jQuery, а не предлагать Великую унифицированную теорию развития веб-интерфейса.
При этом, я думаю, есть несколько причин придерживаться простого JavaScript; прежде всего потому, что я хочу создавать быстрые веб-страницы, использовать простейший из возможных кодов и быть доступным как можно большему количеству людей. По моему опыту, сгенерированные на стороне сервера шаблоны, слегка присыпанные «прогрессивным улучшением», часто являются лучшим способом сделать это в стиле JavaScript. Зачастую это легче разрабатывается, быстрее, меньше подвержено ошибкам, и вентилятор вашего ноутбука не разбудит соседей.
Означает ли это, что эти веб-фреймворки всегда плохи? Нет, не так уж много вещей плохи «всегда» (или хороши), чаще всего это набор компромиссов (как, впрочем, и в случае jQuery).
По сути, я думаю, что Интернет — это система для просмотра документов, а не операционная система. Даже для многих «веб-приложений» (что бы вы ни имели ввиду) подход к документам работает достаточно хорошо (эта тема заслуживает отдельной публикации… может, когда-то в будущем).
Автор: Martin Tournoij
Онлайн курс по JavaScript
Научитесь создавать приложения со сложными интерфейсами
Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.
Редакция: Команда webformyself.
When to use Vanilla JavaScript vs jQuery ?
Earlier, the websites used to be static. However, the introduction of vanilla JavaScript revolutionized the way websites used to look and function. Vanilla JS helped the developers in creating dynamic websites. Then came jQuery, a library of tools created by developers around the world, using Javascript.
In simple words, jQuery is a lightweight and easy to use JavaScript library that helps in creating complex functionalities with few lines of coding. jQuery helps in CSS manipulation, making AJAX requests, handling JSON data received from the server, and also helps in adding animation effects like hide, show etc to the components. The best part is that jQuery is browser flexible. This means the jQuery is compatible with every browser in the market, thus the developer need not have to worry about the browser that the user might be using.
jQuery simplifies a lot of things. It’s easier to implement some things using jQuery than vanilla JS. Have a look at this example. Here, we have to display a popup message on the screen, once the user clicks on the ‘click here for popup!» button’.
jQuery Code:
- Before Clicking the Button:
- After Clicking the Button:
JavaScript Code:
- Before Clicking the Button:
- After Clicking the Button:
It can be easily seen that the jQuery coding is shorter and much simplified than the vanilla JS code. Let’s glance at another example for better understanding.
Suppose the programmer want to select all elements with class name = ‘hello’ .
Javascript
document.getElementsByClassName("hello"); There is not a written rulebook that tells where to use jQuery and where to use JavaScript. It is said that jQuery is better for DOM manipulation than Javascript, however, after monitoring both of their performances, vanilla JS was found to be faster than jQuery. However, writing complex functionalities using Javascript may turn out to be difficult for novice programmers.
jQuery vs Javascript
| JavaScript | jQuery |
| A weakly typed dynamic programming language. | A rich, lightweight, and easy to use JavaScript library. |
| A scripting language used for creating dynamic websites user friendly interfaces. | JS framework used to handle AJAX requests, manipulate CSS, and create animations like as slide, hide etc. |
| All the coding has to be done from scratch. Might turn out to be difficult and time consuming for novice programmers. | jQuery has several pre-written functions. Only the necessary modifications has to be made. Saves a lot of time. |
| Developers have to take care of multi browser compatibility. Browser related errors are more like to appear. | jQuery works with all modern browsers. There is no such compatibility issue with any browser. |
| No additional plugins are required to run JS. Do not need to add any additional plugins as all browsers support JavaScript. | jQuery library script link has to be included inside the head tag of the webpage. |
| Long line of code. May lead to spaghetti codes. | Less coding is required to do the same work. |
| DOM can be accessed faster. | It is best for complex operations where developers usually make mistakes and write poor lines of code. |
| Not easy to learn. Learning curve is steep. | Comparatively easier to learn. |
To put things in a nutshell, jQuery is a better option while working with CMS websites like WordPress, Weebly, etc. It makes development easier because of the huge library of plugins it already has. However, even though jQuery is made from Javascript, ignoring vanilla Javascript is not a wise decision. If you want to become a front end or a full stack web developer, then learning vanilla JS is a necessity. This is because Javascript has other frameworks and libraries like Angular, React, and Vue as well, which has a large number of advantages over jQuery. That’s why it is advised to first learn vanilla JS in-depth, as libraries and frameworks will come and go, but the base of all of them will always be vanilla JS. This is the reason why in an interview, a candidate knowing Javascript will hold an advantage over the other candidates knowing jQuery.
It must also be known that a person who’s learning vanilla JS will find it easier to switch to jQuery. However, switching to Javascript from jQuery may not seem smooth at first. As per a recent survey, it was observed that about 77 percent of the top 1 million websites on the internet use jQuery, learning the vanilla language first is always the best way to go forward.