Что пошло не так с jQuery
12 May 2021
Сейчас, весной 2021 года, опытом работы с jQuery могут похвастаться чуть ли не “пожилые” веб-разработчики. Остальные знают про эту библиотеку только по написанному на ней наследию и, грубо говоря то, что “код неизбежно превращался в лапшу”. Не буду с этим спорить, потому что это правда. Но разобраться из-за чего конкретно это произошло, наверное стоит.
Минутка истории и отличительная особенность
jQuery по своей сути это типичная библиотека, позволяющая решать какую-нибудь задачу быстрее и удобнее. Какой-нибудь задачей в данном случае является манипуляция DOM-деревом в браузере. Манипуляция DOM-элементами напрямую представляла (да и представляет теперь) то еще извращение - один способ удалить DOM-элемент из дерева чего стоит
element.parentNode.removeChild(element);
Вдобавок к этому разные браузеры тогда были действительно разными, были такие как IE6, Opera (та, которая на Presto) и другие, трактующие стандарты весьма вольно, а то и поддерживающие какие-то свои. В такой ситуации штука, абстрагируящая тебя от всех этих проблем была очень полезной. И это была jQuery.
У jQuery был своеобразный интерфейс (кто-то еще называл его монадическим или до сих пор называет), в основе которого лежала некая “коллекция DOM-элементов”. Начиналась обычно все с того момента, когда ты помещал некую выборку, описываемую CSS-селектором в эту “коллекцию”, как-то так:
var collection = $('div.newsblock') // Найди в документе все div'ы c классом `newsblock` и помести в коллекцию
А потом можно было делать с коллекцией всякие манипуляции при помощи функций jQuery.
collection
.slideUp( 300 )
.delay( 800 )
.fadeIn( 400 );
В каком-то смысле это было удобно и легко для запоминание - я так понимаю, замысел состоял в том, что в бедном на типовые возможности языке как JS, лучше бы чтобы твоя библиотека оперировала только одним, максимально универсальным типом :)
jQuery, как уже упоминалось выше, позволял выбирать нужные элементы при помощи CSS и содержал для этого собственный движок, Sizzle, потому как не все браузеры к тому времени поддерживали вызов document.querySelector[All]. Это была еще одна “фишка” jQuery.
Но в какой-то момент что-то начало происходить не так
А не так начали происходить баги, точнее их количество. Код начинал ломаться в самых неожиданных местах, а у разработчиков начали происходить интересные активности, вроде серийного фикса багов, когда в результате фикса одного бага, возникал другой и так далее, пока не устанет или разработчик или тот, кто эти баги репортит.
Иногда jQuery обвинаяют в этом за ее необычный интерфейс и отчасти они правы, но я полгаю, что дело немного не в этом. Основная причина в том, что jQuery навязывает глобальность.
Одним из проявлений этого была мода пихать данные в аттрибуты элементов DOM, а потом их оттуда использовать. Sort of State Management :) В результате чего DOM-дерево превращалось в боольшую нетипизированную, незадокументированную и неконтролируемую глобальную переменную со всеми вытекающими из этого последствиями.
Еще jQuery не содержала никаких средств по изоляции проводимых ею манипуляций и, более того, не содержала даже никаких туториалов, лучших практик, призванных изменить эту ситуацию. Типа мы просто библиотека, а уж программировать чисто вы должны уметь сами. Глобально работать и выбирать DOM элементы поощрял и сам способ их выборки - при помощи CSS-селекторов, которые по дефолту позволяют выбирать элементы хоть откуда. В CSS кстати видны попытки, как-то упорядочить безумие, например, в нем нету селектора для обращению к родительской ноде, но в jQuery для этого есть удобный метод .parent().
Веселья еще добавляли плагины, которые тоже порой хотели модифицировать DOM каким-нибудь удобным для них образом, что приводило к интересным и непостоянно проявляющимся сайд-эффектам. Тогда, когда в вебе все начиналось, за этим никто не следил, да и кода на клиенте было не так много как сейчас, таки были времена.
Времена те, я надеюсь, прошли, а вот унаследованный код остался.
В заключение
В заключение скажу, что все вышеперечисленное справедливо для больших проектов, переросших себя, требующих долгой поддержки и постоянно обрастающих какими-нибудь изменениями. На данный момент, эти проекты, если они живы, то уже переписаны на что-нибудь другое, так что времена хейта jQuery подходят к концу, как и времена самого jQuery.
Для маленьких проектов же она вполне безобидна, правда не очень актуальна, потому как веб уже гораздо более стандартен и удобно выбирать и работать с DOM-элементами можно и напрямую, без дополнительных оберток.