- оригинал:Почему все меньше и меньше людей используют jQuery
- автор:Lemonade
FundebugПерепечатано с разрешения, авторские права принадлежат оригинальному автору.
В большинстве самых ранних разработок используется jQuery, что дает нам много удобства: быстрый выбор элементов, API для простого манипулирования элементами DOM, идеальная совместимость между браузерами, цепные операции, анимация, ajax и т. д. Вот преимущества, которые дает jQuery. для фронтенд-разработчиков. Почему все меньше и меньше людей используют его сейчас? Позвольте мне разбить мои мысли на следующие пункты:
1. Влияние обновлений JS
1. Быстро выберите узлы DOM
Для большинства разработчиков, использующих jQuery, возможность быстрого выбора DOM-узлов, несомненно, важная причина, но что касается текущей ситуации, то это преимущество явно исчезло.Почему? Позвольте мне рассказать вам о двух API, эти два API уже используются многими людьми, то есть методы document.querySelector и document.querySelectorAll. Эти два метода могут сопоставить ожидаемый узел DOM, передав строку в форме селектора CSS. Ниже приведена текущая совместимость двух API:
Как видно из рисунка, эти два API уже хорошо совместимы с различными браузерами.
Vue также использует этот API для получения элементов:
Таким образом, преимущество быстрого выбора узлов DOM в jQuery исчезло.
2. API для удобного управления элементами DOM.
API, которые могут легко манипулировать элементами DOM, такими как addClass, removeClass, toggleClass. Теперь поддерживается и нативный JS, этот API называется classList.
Хотя совместимость с IE не идеальна, самые основные реализации также реализованы.
3. Анимация
Теперь, когда технология анимации CSS3 стала очень зрелой, она может полностью заменить анимацию, сделанную с помощью jQuery, а также может создавать более сложные анимации, чем метод анимации jQuery.У него хорошая совместимость и низкое потребление производительности.Почему бы не сделать это? Например, если вы реализуете перекрашенный фон, CSS3 работает отлично, а jQuery — нет. И сейчас есть много отличных библиотек анимации CSS3, все наверняка слышали о знаменитой библиотеке Animate.css.
4. Аякс-операции
Операция jQuery ajax избавляет нас от проблемы совместимых браузеров, а также предоставляет краткий API для вызова get и post, освобождая разработчиков от утомительной совместимости и использования собственных API. Но сейчас это преимущество тоже очень мало. Будь то Fetch API нативного JS или axios. Все они предоставляют нам мощные возможности использования ajax, а axios также имеет преимущество перехватчиков. В настоящее время ajax jQuery действительно не имеет себе равных.
Конечно, Fetch определенно бесполезен в IE.
Но для Fetch уже есть схема Polyfill:github/fetch
Таким образом, вам нужно только обратиться к этому маленькому JS, вы можете использовать удобный ajax. По сравнению с jQuery он намного меньше.
2. Проблемы с производительностью
В первоначальной разработке инженеры не слишком зацикливались на проблемах производительности. Но теперь все по-другому.Чтобы повысить производительность пользователей, в первую очередь необходимо решить проблемы с производительностью, вызванные рендерингом в браузере. Наиболее классической является концепция перерисовки и перекомпоновки.
**Перекрасить:** — перекрасить страницу, например, изменить цвет фона элемента.
**Перекомпоновка:** Вообще говоря, когда браузер входит на страницу, он уже выполнил перекомпоновку. Под перекомпоновкой фактически подразумевается перекомпоновка страницы.
Поскольку мы хотим повысить производительность, мы можем начать с этих двух концепций. Обновление страницы с наименьшими затратами — лучший способ повысить производительность. Но, к сожалению, jQuery этого не делает. Почему вы так говорите, посмотрите следующий анализ:
Когда мы получаем набор данных новостей для отображения в теге ul, обычно мы сначала объединяем данные новостей один за другим, затем используем символ $ для выбора элемента ul и изменяем значение innerHTML ul на склеенная символьная строка (с использованием html API), в этот момент выполняется первый рендеринг. На этот раз страница перерисована (на данный момент это неизбежно) Во-первых, мы не будем анализировать, хорошо или плохо выступление в первый раз, а следующее описание будет мощнее.
Например, у нас есть еще одинизменятькнопка. В традиционном режиме разработки кнопка изменения в это время должна еще выполнить приведенный выше код, получить элемент и модифицировать innerHTML элемента, но теперь возникает проблема, то есть нужно ли нам удалять все элементы и добавлять опять они?? Ответ однозначно нет (как показано на рисунке ниже, насколько дорого обходится создание элемента).
Поскольку в настоящее время нам нужно только изменить текст в каждом li и ссылку в теге a, очевидно, нет необходимости снова добавлять li, как указано выше. Поскольку элемент DOM может содержать сотни атрибутов, это сильно снижает производительность.
Тогда появившаяся сейчас новая концепция Virtual DOM (виртуальный DOM) сможет решить эту проблему. По сути, виртуальный DOM — это описание реального узла DOM.Изменяя виртуальный DOM, можно изменить реальный DOM с минимальными изменениями (виртуальный DOM не обязательно лучше, чем производительность jQuery).
В-третьих, современная структураjQueryВлияние
Фреймворки React, Vue и Angular, относительно популярные в Китае, относятся к категории фреймворков MV*, и их конструктивные особенности в основном основаны на данных. Можно сказать, что манипулирование DOM остается за фреймворком. Это более эффективно, чем традиционная разработка jQuery, с высокой ремонтопригодностью кода, сильной масштабируемостью и хорошей производительностью.
Например:
Я попросил jQuery купить бутылку соевого соуса и дал ему 100 юаней.В это время нам нужно сказать ему, как пройти в магазин, как сказать боссу, какой соевый соус купить, сколько соевого соуса купить , сколько сдачи получить и сколько Скажите ему, как вернуть **(императив)**.
В это время я попросил Вуэ купить соевый соус.На этот раз мне нужно только дать ему деньги, и сказать ему, где пункт назначения и какой соевый соус купить.Не нужно учить его **(функционал )**.
Это разница между традиционным развитием и современным развитием структуры.
Для разработки с современным фреймворком можно использовать Webpack (конечно, можно использовать jQuery или Webpack), а можно использовать готовые скаффолдинги, предоставляемые другими, например create-react-app, vue-cli. Это значительно повышает эффективность разработки и может использовать новейший синтаксис ES6 и ES7 для разработки, что повышает качество кодирования на уровень.
Теперь, когда jQuery полностью ушел со сцены истории, он выполнил то, что намеревался сделать.