17 December 2015

Хватит использовать jQuery, вы способны сделать лучше без него

JavaScriptjQuery

Введение


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



Как и множество других разработчиков, я начал использовать jQuery во времена поздней бронзовой эры (2007), когда различия между браузерами были просто занозой в пятке и нехватка общих стандартов была так ненавистна. jQuery был, своего рода, источником вдохновения и лучиком света в эти темные времена, он был революционным. Я влюбился в jQuery как только я начал им пользоваться. Я написал несколько ярких и пушистых расширений для jQuery а так же я хотел поделиться со всеми благой вестью и выступил пару раз с докладом о нем и даже организовал небольшой тренинг для ознакомления команд с этим продуктом. Но затем, несколько лет назад я изменил мое мнение.

Давайте детально рассмотрим что не так с использованием jQuery в современной web-разработке и как мы можем это исправить.

Униформизатор


Одна из потрясающих киллер-фич JQuery была способность сглаживать а иногда и восполнять различия в работе с DOM в различных браузерах и их версиях. Но давайте посмотрим правде в глаза, с тех самых пор много чего поменялось, появилось множество современных стандартов. В большинстве своем jQuery в лучшем случае перенаправляет вызов стандартных API DOM, а в худшем случае использует свою собственную реализацию той или иной фичи. В современном мире можно лего обойтись без использования селекторов и утилит jQuery. Можно легко заменить селектор типа:

$('div, span, article');
$('#formId :invalid');

на:
document.querySelectorAll('div, span, article');
document.querySelectorAll('#formId :invalid');

Ну или на пример утилиты типа:
$.isArray(array1);
$.each(array, function(i, v) {
  // do something here
});

легко заменяются на:
Array.isArray(array1);
array1.forEach(function(v, i) {
  // do something here
}


Лично я предпочитаю всегда держатся стандартов, jQuery не стандарт это просто библиотека.

Объект обертка


Как вы наверное знаете, jQuery после почти всех своих манипуляций возвращает вам специальный объект в который заворачивается или нет определенный результат или его отсутствие. Например *$('span')* вернет вам такой объект. Мало того что объект обертка имеет свои собственные доморощенные методы, отличные от общепринятых стандартов, но это еще вам не гарантирует что внутри методов jQuery будет использовать только обертки. Это далеко не так, чем будет *this* в функции обработчика события или чем будет первый аргумент такой функции или значение его специального поля *target*? Небольшой пример:

$('button').bind('click', function(e){
  var el = this; // Is it jQuery "object" or not ? Let's see the doc
  var event = e; // Is it jQuery "object" ? No, it's a special event-wrapper object
  var target = event.target; // Is it jQuery "object" ? Sure not, it's a simple DOM element
});

И так, иногда обертка, иногда нет, а иногда специальная обертка, что это вообще такое, зачем нам нужно так усложнять себе жизнь? Но есть же костыль, скажете вы, как насчет конвенции когда все «спец объекты» jQuery начинаются на знак $. Что-то вроде:

$('button').bind('click', function(e){
  var $el = $(this);
  var _event = e; // Let's use an another special convention for jQuery's events wrapper, prefix _
  var $event = e; // No, we should be coherent
  var target = $(event.target); // I'm sorry I forgot the dollar, because I'm just a human
  var target2 = $(target); // Oups, but I have to be sure that it's wrapped
  var var1 = someFunc(); // I forgot, this function should return $ or simple NodeList
  $(var1); // Nevermind ...
});


JQuery как эталон web-разработки


Я много раз слышал такое мнение что jQuery это своего рода эталон веб-разработки, если вы занимаетесь этим значит вы просто обязаны использовать jQuery что бы добиться успеха, потому что он хорош, у него есть яйца и у него куча таких пушистых и ламповых плагинов. По мне так это все фигня, это было от части верно лет 5 назад но не сейчас. Это все равно что говорить что для того что бы разрабатывать современные приложения Windows 8/10 вам нужно обязательно использовать Win32 API в чистом виде.

Как я уже сказал выше, jQuery это всего навсего библиотека, и по сегодняшним меркам библиотека низкого уровня. А вещи такого рода не подходят для написание современных веб приложений. Ничего не мешает вам использовать jQuery или чистый стандарт DOM/API для реализации той или иной низкоуровневой задачи, но писать все приложение а потом еще и поддерживать его очень тяжело. Я видел кучу больших проектов которые превращались в одно большое блюдо спагетти на клиентской стороне, где jQuery не был корнем зла, просто люди не смогли справиться с наплывом кода.

Как можно этого избежать? Используйте более подходящие для этого решения там где они действительно нужны, будь то MV* или что-то другое.

Тестирование


Эта часть неразрывна связанна с предыдущей. Как мы все знаем — человек ленив по своей природе а хорошие программисты-автоматизаторы часто бывают ленивы. Вы когда-нибудь тестировали код использующий jQuery, из-за цепочек вызовов это нетривиальная задача. А если брать во внимание тот факт что часто проекты с использованием jQuery набирают вес так стремительно что разработчики не успевают, не хотят или не могут реорганизовать свой код. Результат получается неутешительный, как можно говорить о тестировании когда даже автор кода не в силах понять что этот код делает.

В MV* подходе это решается намного легче.

Итог


Если вас убедила данная статья и вы хотите попробовать жить и трудиться без jQuery вы можете воспользоваться следующими ссылками:
  • You don't need jQuery — Блог о том как избавиться от jQuery
  • Beyond jQuery — Книга о том как избавиться от jQuery
  • The cost of frameworks — Мысли об экономии времени для разработчиков
  • Zepto.js — Небольшая jQuery-совместимая библиотека, своего рода переход от кокаина jQuery на травку Zepto.


Кому интересно имеется английская версия данной статьи.
Tags:javascriptjquery
Hubs: JavaScript jQuery
-2
24.7k 79
Comments 42
Popular right now
Top of the last 24 hours