Преимущества использования чистого JavaScript над JQuery

86

Каковы преимущества использования Javascript-only по сравнению с JQuery-only?

У меня ограниченный опыт работы с JavaScript и JQuery. Я добавил биты и фрагменты каждого из них на HTML-страницы, но я в основном кодировал серверные вещи на других языках. Я заметил, что хотя теоретически вы можете делать одно и то же, используя любой из двух подходов (и, конечно, вы можете даже смешивать их в одном проекте), существует тенденция всегда начинать использовать JQuery с самого начала независимо от того, что требует проект.

Так что мне просто интересно, есть ли какие-то пунктуальные преимущества не использовать только JQuery, а просто использовать старый добрый JavaScript?

Я знаю, что это выглядит как не вопрос, потому что о нем можно сказать, что «нет определенного ответа» или «его можно обсудить навсегда», но на самом деле я надеюсь на пунктуальные ответы, такие как «Вы можете сделать это в один подход, и вы не можете сделать это с другим ".


Согласно комментарию scrwtp, я имею в виду не только часть DOM Handling. Мой вопрос скорее: JQuery - это библиотека. Для Javascript. Что я нахожу странным в этой библиотеке в отличие от других библиотек для других языков, так это то, что в случае JQyery она, похоже, предназначена для того, чтобы иметь возможность использовать ее исключительно и не нужно напрямую касаться Javascript. Это в отличие от, скажем, Hibernate и SQL, где, хотя библиотека (или, скорее, фреймворк в данном случае, но я думаю, что аналогия по-прежнему применима) берет на себя множество аспектов, вы все равно можете использовать SQL при ее использовании. По крайней мере, для некоторых крайних случаев. Однако в случае JQuery & Javascript вы можете делать все, что вы делаете с Javascript, используя только JQuery (или, по крайней мере, так мне кажется).


Согласно комментарию Stargazer712: да, я согласен с вами, вопрос здесь, как вы выразились, «просто вопрос того, как вы будете использовать JavaScript». Это то, что я действительно хотел спросить, но я сделал несколько плохих формулировок. Вот еще одна аналогия: Spring Expression Language, Это библиотека Java. Вы не можете использовать это без Java, это основано на Java, и через все это вы все еще можете использовать Java. Но на практике вы можете добавить эту библиотеку в проект Java, а затем написать весь свой код, используя язык выражений Spring EL, который фактически делает ваш код совсем не похожим на Java, и это даже меняет парадигму (например, у вас больше нет строгое соблюдение типа при использовании этого). Хотя я понимаю, что JQuery - это просто библиотека JS, мне кажется, что на практике это имеет тот же эффект, что и Spring EL в Java, то есть вы можете использовать его API только в проекте и избегать JavaScript-API. И мне было интересно, хорошо ли это делать, какие могут быть подводные камни и т. Д.

(и да, прочитав ответы каждого, я понимаю, что:

а. мой вопрос несколько бессмысленный до определенного момента

б. даже если бы вопрос был совершенно точным, ответ на него был бы в значительной степени «нет, вы не можете просто использовать JQuery-only все время»

Дракон Шиван
источник
25
Неправильно говорить «использовать только JQuery» _ JQuery - это библиотека JavaScript.
SuperM
4
Нет циклов for или while, нет переменных, нет функций? Все это JavaScript.
SuperM
2
Под «простым старым JavaScript» вы, вероятно, подразумеваете JavaScript DOM API. Вы можете проверить это и отредактировать вопрос, чтобы избежать путаницы.
scrwtp
4
Разве кросс-браузерная совместимость не является достаточной причиной?
Саймон Уайтхед
10
«Похоже, что он (jquery) спроектирован так, чтобы использовать его исключительно и не нужно напрямую касаться Javascript». Это на самом деле неверно. jQuery - это просто набор функций JavaScript (хотя и со странными именами, такими как "$"). Одна из важных частей понимания jQuery - это осознание. Это просто дополнительные функции, которые обрабатывают DOM-манипуляции и циклы.
Грэм

Ответы:

113

Прежде всего - невозможно использовать только jQuery, все, что делает jQuery, - это добавляет объект $ в вашу глобальную область видимости с кучей методов в нем. Еще более манипулятивные библиотеки, такие как prototype, не являются альтернативой javascript, они представляют собой инструментальные средства для решения типичных проблем.

Основными преимуществами добавления jQuery в ваш набор инструментов будут:

  • совместимость с браузерами - делать что-то вроде .attr () намного проще, чем нативные альтернативы, и не будет работать в разных браузерах.
  • упрощение обычно сложных операций - если вы хотите увидеть хорошо написанную кросс-браузерную версию метода XHR, посмотрите на источник для $ .ajax - для одного этого метода он почти стоит издержек jQ.
  • Выбор DOM - простые вещи, такие как привязка событий и выбор элементов DOM, могут быть сложными и различаться в зависимости от браузера. Без большого количества знаний они могут также быть плохо написаны и замедлить Вашу страницу.
  • Доступ к будущим функциям - такие вещи, как .indexOf и .bind являются нативным javascript, но еще не поддерживаются многими браузерами. Однако использование jQuery-версий этих методов позволит вам поддерживать их в разных браузерах.

Javascript больше не является просто языком на стороне клиента, и поскольку jQuery зависит от DOM, он является ужасным кандидатом для перехода на сервер. Я настоятельно рекомендую уделить некоторое время пониманию того, почему вы используете jQuery (задание этого вопроса - отличный первый шаг!), И оценке того, когда это необходимо. jQuery может быть опасным, вот некоторые из основных опасностей:

  • Качество кода - у jQuery огромное сообщество и низкая кривая обучения. Это идеальный шторм для многих плохо написанных плагинов с открытым исходным кодом.
  • неэффективность - JQuery легко писать неэффективно. Например, использование циклов jQuery вместо вместо for не является необходимым и в некоторых случаях может повлиять на производительность. Много хорошей информации об этом материале на JSPerf
  • раздувать - jQuery огромная библиотека. В большинстве случаев вы будете использовать небольшое подмножество его функций и захватывать всю библиотеку. Есть несколько отличных альтернатив, которые предоставят вам подмножества функций, таких как zepto.js и underscore.js - в зависимости от вашей ситуации вы можете сохранить несколько байтов, выбрав нужную библиотеку для ваших нужд.

В конечном счете, jQuery - невероятно полезная и полезная библиотека при правильном использовании. Тем не менее, это не альтернатива JavaScript. Это библиотека, такая же как zepto.js , YUI , Dojo , MooTools и Prototype - одна из которых может быть намного лучшим выбором для вашего текущего проекта.

Javascript - это неправильно понятый язык, и только недавно большинство людей рассматривает его как нечто большее, чем язык сценариев. Я действительно рекомендую прочитать об этом больше, вот несколько хороших мест для начала:

Редактировать 07/2014 - я заметил, что этот пост все еще привлекает внимание, поэтому я добавил кучу ссылок. Они не в определенном порядке, но должны быть полезны.

  • Блог Бена Алмана - множество хороших лучших практик здесь. Я не согласен со всеми из них, но я постоянно узнаю что-то новое из его блога.
  • Code Academy - базовый тренинг по javascript и jQuery. Иногда возвращение к основам помогает.
  • Javascript Garden - пост, касающийся более хитрых или неправильно понятых особенностей javascript. Пожалуйста, читайте это время от времени, пока все не имеет смысла.
  • Bocoup - это учебные занятия. Если ты рядом с ним, иди к нему. Многие из лучших спикеров и преподавателей JS учат этому.
  • Блог Пола Айриша - не совсем JS, но здесь написано множество лучших практик. Ему и Бену очень понравились твиттеры.
  • Javascript: The Good Parts - часто упоминаемая как «Библия Javascript», эта книга Дугласа Крокфорда - удивительное место, чтобы начать понимать javascript.
  • Блог Исаака Шлютера - Исаак является создателем npm и работает над ядром узла. Он много пишет о сообществе javascript, а не о соглашениях по коду, но если вы действительно знакомы с js, это отличное чтение.
  • Javascript Дугласа Крокфорда - Если Брендан Эйч является отцом javascript, Дуглас - прямой дядя javascript. Он является автором спецификации JSON, библии javascript и множества удивительных публикаций о причудах javascript и стремительном взлете.
  • Блог Брендана Эйха - Брендан является создателем javascript - он пишет о всевозможных глупостях в своем блоге, и хотя у него есть свои недостатки как личности, его посты javascript являются ценными.
  • Блог Джеймса Холлидея (@substack) - Substack, пожалуй, самый важный разработчик node.js в сообществе - около 400 (и растущих каждый день) модулей npm и философия руководящих принципов крошечных модулей в стиле unix - все, что он пишет, стоит чтение.
  • Блог Макса Огдена Макс Огден является еще одним плодовитым автором node.js и отлично пишет посты в блоге, которые вас чему-то научат. Он также является автором (с другими, я верю) javascript для кошек.
  • Javascript for Cats - это краткое руководство, которое познакомит вас с основами javascript с точки зрения кошки. Если вы новичок, прочитайте это. Это весело, и через час учит, что многим книгам нужны недели, чтобы общаться.
  • Блог Николаса Закаса Николас является автором нескольких фантастических книг на javascript: объектно-ориентированное программирование на Javascript , сопровождение Javascript , профессиональный Javascript для веб-разработчиков и высокопроизводительный Javascript . Он фокусируется в основном на клиенте, но у него есть масса лучших практик и советов по повышению эффективности.
  • Блог Гильермо Рауха - Гильермо - еще один плодовитый разработчик node.js, в основном известный благодаря Socket.io и Mongoose. Его блог (и его новая книга, Smashing Node.js) являются отличными ресурсами.

Я уверен, что есть намного больше отличных ресурсов, о которых я не думаю или не знаю, другие ответчики могут смело добавлять их в этот список.

Джесси
источник
3
+1 за замечание о том, что JS больше не является языком только на стороне клиента и как JQuery вписывается во все это.
Shivan Dragon
1
Обратите внимание, что все функции являются объектами, но почти все в JavaScript. $ лучше описать как функцию со свойствами «уровня класса», прикрепленными к нему, например, ( $.ajax), которая выплевывает наборы объектов-оболочек элементов dom, предназначенных для того, чтобы сделать методы DOM в целом намного менее PITA, делая их более краткими, имея методы автоматическое зацикливание наборов объектов dom всякий раз, когда это имеет смысл, и совместное использование общего, предсказуемого API-интерфейса между браузерами (что не так уж важно, IE <= 8).
Эрик Реппен
1
Это отличный пост, но я хочу оспорить один момент - «Огромная библиотека ... используйте Zepto / Underscore» - во-первых, Underscore - это совершенно другой тип библиотеки - главным образом для работы с массивами / объектами - плюс использование LoDash вместо этого это быстрее. Во-вторых, Zepto меньше, потому что он не охватывает то, что делает jQuery. Это может привести к ошибкам, которые исправит jQuery. И наконец, jQuery больше не является таким уж монолитным и монолитным, его размер составляет около 30 Кбайт, и вы можете сохранить его, используя на 1 изображение меньше. Для меня полученная эффективность разработки стоит этих байтов.
LocalPCGuy
1
@LocalPCGyy определенно хорошие моменты. Этот пост был (точно!) 2 года назад, и с тех пор в экосистеме js все изменилось. Например, я лично использую browserify и небольшие модули вместо любой глобальной библиотеки пространств имен вообще. Тем не менее, я думаю, что основная предпосылка по-прежнему верна, так как во многих (большинстве?) Случаях библиотека кухонных раковин редко необходима. Я бы рекомендовал большинству разработчиков убедиться, что они правильно оправдывают размер библиотек, прежде чем принимать решение об их использовании, просто потому, что это проще, чем конкретизировать, что вам нужно.
Джесси
1
Реагируйте на все вещи, я прав!?!?! / сарказм - как насчет выбора подходящего инструмента для работы @Andy, и это не всегда React. Я думаю, что React делает некоторые хорошие вещи, но давайте не будем притворяться, что это лекарство от всего мира JavaScript.
LocalPCGuy
17

Есть преимущества, но это спорно, действительно ли они перевешивают недостатки.

Основным является то, что вы экономите пропускную способность и получаете более быстрые ответы. JQuery добавляет еще ~ 30 КБ к вашему ответу. В некоторых сетях (и в некоторых странах) это может означать еще несколько миллисекунд. Однако, с другой стороны, вы можете довольно легко настроить для него кеширование, используя свой веб-сервер (или, как сказал Сион, используйте его с сайта Google, чтобы оно не влияло на ваш собственный, и все же оставалось в кэше).

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

И, наконец, вы, возможно, захотите создать свою собственную платформу, что в основном является плохой идеей, но у некоторых людей есть свои причины.

Однако, если вы отказываетесь от jQuery просто потому, что вас пугает кривая обучения, вам следует пересмотреть. Тем более, что он достаточно нежный.

Ям Маркович
источник
Договорились, особенно о пропускной способности. JQuery 1.8.2 имеет 92Kb в свернутой / скрытой версии. Договорились также, что это, однако, не очень веские причины не использовать JQuery. Спасибо!
Шиван Дракон
1
@ShivanDragon: Вы забыли gzip. Это делает его намного меньше.
ThiefMaster
@ThiefMaster: это правда, спасибо за указание на это.
Шиван Дракон
10
Если вы используете jQuery из CDN (например, Google), есть вероятность, что пользователи предварительно загрузят его с посещения других сайтов. Следовательно, влияние на ваше среднее (хотя и не максимальное) время отклика будет меньше.
Сион,
1
@Phil Почему ты вообще вообще им пользуешься?!?! JQuery никогда не был и никогда не будет нужен. Это чистое сатанинское зло (вместе с остальными демоническими бандами: ReactJS, Underscore, LoDash, Modernizr, CommonJS, Angular, Google Analytics, особенно AMD и т. Д.). Лично я никогда не включал целую библиотеку (хотя я редко извлекаю и оптимизирую определенные функции, которые мне нужны из библиотек), я никогда не включаю целую библиотеку, и почти каждая веб-страница, которую я создаю, загружается по коммутируемому Интернету менее чем за 11 кадров (1/59 секунды).
Джек Гиффин,
14

Насколько я знаю, на самом деле есть только два преимущества использования ванильного JavaScript по сравнению с такой библиотекой, как JQuery , MooTools и т. Д.

  • Библиотеки имеют полезную нагрузку, которая съедает пропускную способность. Но, как люди уже указывали в других ответах, вы можете ограничить это с помощью gzipping и caching. Если вам нужна только подмножество jQuery, вы можете сделать это с SizzleJS, а с MooTools у вас есть возможность выбрать нужные вам наборы функций так же, как это делает Modernizr .
  • Библиотеки большие и занимают время, чтобы учиться. Опять же, это единовременное вложение средств для разработчиков ... и вам будет приятно узнать о библиотеках javascript.
  • (БОНУС) Библиотеки - не серебряная пуля, так что если вы хотите заново изобрести колесо, то это определенно верный путь.

Стоит указать, почему вы хотите использовать библиотеку JavaScript, для которой есть множество:

  • Вам не нужно писать свой собственный фреймворк для поддержки вашего развития. Если вам интересно, как все работает, вы можете проверить код, так как он с открытым исходным кодом.
  • Библиотеки решают совместимость браузера. И DOM, и JavaScript имеют некоторые различия между браузерами. Поверьте мне, это огромная трата времени, если вам придется взламывать исправления самостоятельно.
  • Это де-факто интернет-стандарт использования библиотек javascript, большинство из них уже хорошо документированы, и большинство веб-разработчиков (которые знают javascript) знают, как их использовать.
  • Вы действительно не отказываетесь от JavaScript при использовании библиотеки. Вам все еще нужно знать Javascript с его типами, объектами, как работают замыкания и т. Д.
  • Большинство библиотек являются модульными, и для написания плагинов или использования require и паттерна AMD не требуется много времени .
  • Выбор элементов CSS из DOM - огромная помощь.
  • (БОНУС) Вы также можете использовать их с CoffeeScript .

Раньше я работал в интернет-магазине, который был непреклонен в использовании ванильного JavaScript, потому что jQuery был большим и страшным. Это решение, в основном под влиянием одинокого «разработчика javascript», послужило источником множества ошибок браузера и медленной разработки, и попытка проникнуть в его кодовую базу была невероятной. Написание собственного фреймворка может показаться хорошей идеей, но если вы хотите нанять новых разработчиков, они не смогут быстро вмешаться и помочь. Тогда есть также вопрос автобусного фактора, чтобы рассмотреть.

Как я уже говорил, я раньше работал там ... в других местах были зеленые пастбища. : ^)

Spoike
источник
10

Я случайно смешал использование обоих. Основная причина этого заключается в том, что для некоторых приложений (например, расширений Chrome) вам не требуется межбраузерная поддержка. Это означает, что я могу воспользоваться новыми достижениями, такими как css3, которые с такими вещами, как переходы, могут значительно упростить ваш код по сравнению с использованием jquery.

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

Я также работал с разработчиками, которые работают только с jquery. И я должен сказать, что они скомпрометировали функциональность гораздо чаще, чем если бы они не смогли найти плагин jquery, который делал то, что хотел.

В какой-то момент в веб-разработке вам будет предложено сделать что-то, не упакованное заранее в библиотеке. Поэтому в этот момент вам лучше убедиться, что вы понимаете, как работает базовый язык.

Так что TLDC : используйте оба, вы находитесь в невыгодном положении, используя только ваниль, и вы в невыгодном положении, если вы не знаете ваниль внутри и снаружи и настаиваете на том, чтобы всегда использовать jquery.

Райан
источник
3
чистый ванильный JS - это путь!
Марко
Мало ли Райан знает, что jQuery тайно злоупотребляет document.querySelectorAllза кулисами.
Джек Гиффин,
6

Единственное, что я могу думать о том, что вы не можете обойтись без JQuery, это использовать плагины JQuery; даже тогда вы можете написать свою собственную библиотеку JS, которая предоставит именно то, что нужно плагину.

Подумайте об этом так: JQuery - это библиотека Javascript с открытым исходным кодом, написанная на Javascript; Вы можете посмотреть на источник и тем самым научиться делать все, что он делает.

Вы не можете использовать JQuery, не используя старый добрый Javascript. Вы, вероятно, не будете использовать document.getElementById, но вы все равно будете определять функции и переменные стандартными способами Javascript; Вы могли бы даже написать стандартный forцикл.

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

Не позволяйте размеру отпугнуть вас. Версия CDN является ~ 33k загрузки , который будет кэшируются браузером пользователя после первой страницы хитом.

Майк Партридж
источник
6

Если вы беспокоитесь о производительности, попробуйте использовать vanilla js, когда это возможно. фреймворки не только добавляют накладные расходы полосы пропускания, но и накладные расходы обработки. И jQuery поставляется с совместимостью с браузерами и для довольно старых браузеров.

Если вы работаете над мобильными приложениями или играми (или обоими вместе), вам прежде всего нужны производительность и эффективность использования ресурсов.

jQuery и плагины могут ускорить вашу разработку, но особенно если вы полагаетесь на сторонние плагины jquery, вы должны знать, что они делают внутри. Многие из них являются плохими примерами качества и эффективности кода.

jQuery может быть в 2-10 раз медленнее, чем собственный JavaScript. И это может легко побудить разработчиков не правильно проектировать свой интерфейс и слишком полагаться на селекторы jQuery, которые намного медленнее, чем нативные.

Ян Призер
источник
+1, я согласен с вами, что создание игр - это хороший повод отказаться от JQuery в пользу vanilla JS из-за соображений производительности. Это в значительной степени верно для большинства языков, когда дело доходит до создания игры с ними. Например, ребята из Google рекомендуют в своих документах по Android не только отказываться от библиотек при создании игр (на Java, для Android), но и, кроме того, отказаться от некоторых хороших методов кодирования в пользу скорости.
Shivan Dragon
... если вы знаете об эффективной манипуляции DOM столько же, сколько люди, пишущие jQuery, да.
Эрик Реппен
@ErikReppen, пожалуйста, на самом деле исследуйте реальный исходный код от "людей, которые пишут jQuery". Я был почти месяц ослеплен от ужасов, которые я видел только в первых 23 строках.
Джек Гиффин
С 2013 года многое изменилось в JQ.
Эрик Реппен,