Replace jquery html: .replaceWith() | jQuery API Documentation — Вебджем.рф | Создание и продвижение сайтов

Содержание

3 библиотеки JavaScript для замены jQuery

Вездесущий jQuery устарел благодаря развитию JavaScript и браузеров. Эти альтернативы, подобные jQuery, начинаются с того места, где jQuery остановился.

Пол Крилл

Редактор на свободе, Информационный Мир |

Thinkstock

Упрощая такие задачи, как просмотр HTML-документа, анимация и обработка событий, надежная библиотека jQuery JavaScript изменила лицо веб-разработки. По данным обозревателя веб-технологий W3Techs, по состоянию на май 2019 года jQuery все еще используется на 74 процентах известных веб-сайтов. Тем не менее, библиотека jQuery, дебютировавшая в августе 2006 года, теперь рассматривается некоторыми разработчиками как устаревшая технология, время которой прошло.

В последние годы появились альтернативы jQuery, такие как библиотека Cash или даже современный, ванильный JavaScript, теперь, когда все веб-браузеры обрабатывают JavaScript одинаково, и jQuery больше не требуется для решения проблем совместимости.

Аргументы на Reddit и видео на YouTube доказывают, что jQuery устарел или, по крайней мере, не так важен, как раньше.

Почему jQuery больше не нужен

В одной из презентаций на YouTube «JQuery все еще актуален в 2018 году?», преподаватель веб-разработки Брэд Траверси признает, что jQuery, вероятно, является лучшей обобщенной библиотекой JavaScript из когда-либо созданных. Он прост в освоении, совместим с разными браузерами, более лаконичен, чем старый ванильный JavaScript, и богат подключаемыми модулями, предлагающими определенные функции. Но JavaScript значительно продвинулся по сравнению с ECMAScript 6, и во многих ситуациях jQuery больше не нужен, заключает Траверси.

В другом видео педагог по программированию Кеннет Лоури утверждает, что свободное владение jQuery — пустая трата времени. В текущей среде веб-разработки современные браузеры по большей части обрабатывают JavaScript одинаково. В большинстве случаев собственный код JavaScript лучше, чем «раздутая устаревшая библиотека, такая как jQuery», — говорит он.

В то время как jQuery был выбран для создания HTTP-запросов, например, ECMAScript 6 представил Fetch, основанный на обещаниях API, который упрощает HTTP-запросы. И продвижение не останавливается на HTTP. Там, где у jQuery есть утилиты для таких задач, как манипулирование массивами, в ванильном JavaScript теперь также улучшены приспособления для этих операций.

Анимация по-прежнему сложнее с ванильным JavaScript, чем с jQuery, но есть и другие варианты, такие как переходы CSS или ключевые кадры, указывает Трэверси. Сторонняя библиотека GreenSock также может использоваться для анимации. Для манипулирования DOM, задача, когда-то управляемая jQuery, собственные API-интерфейсы браузера закрыли пробел.

Для задач, которые невозможно выполнить с помощью обычного JavaScript, Traversy рекомендует специализированные библиотеки вместо универсальной библиотеки, такой как jQuery. Traversy также рекомендует использовать фреймворки JavaScript, такие как React, Angular или Vue, для приложений среднего и большого размера. Traversy по-прежнему рекомендует использовать jQuery на простых сайтах без фреймворка.

Альтернативы jQuery

Что следует использовать вместо jQuery? Помимо современного ванильного JavaScript, краткий список альтернатив jQuery включает Cash, Zepto и Syncfusion Essential JS 2. Cash и Zepto — это библиотеки JavaScript с открытым исходным кодом, доступные по лицензии MIT. Syncfusion Essential JS 2 — это коммерческий продукт.

Cash

Cash имеет более 3570 звезд на GitHub. Объявленный как «абсурдно маленькая альтернатива jQuery» для современных браузеров, Cash имеет синтаксис в стиле jQuery для управления DOM и занимает 32 КБ пространства в несжатом виде. Cash поддерживает возможности, включая события в пространстве имен, типы TypeScript и современные сборки. Вы можете скачать Cash с GitHub.

Zepto

Zepto описывается как «минималистическая библиотека JavaScript с в значительной степени совместимым с jQuery API». Разработчики, знающие jQuery, уже знают, как использовать Zepto, говорят его создатели. Zepto претендует на то, чтобы быть намного меньше и быстрее загружаться, чем jQuery, и может работать с набором инструментов PhoneGap для мобильных и настольных браузеров. Вы можете скачать Zepto с сайта проекта.

Syncfusion Essential JS 2

Syncfusion Essential JS 2 — это библиотека элементов управления пользовательским интерфейсом JavaScript с коммерческой лицензией, написанная на TypeScript. Выступая в качестве альтернативы библиотеке пользовательского интерфейса jQuery, Syncfusion разработана как недорогая, легкая и модульная библиотека для улучшения веб-приложений. Syncfusion поддерживает фреймворки, включая Angular, React и Vue. Вы можете приобрести Syncfusion Essential JS 2 или загрузить бесплатную пробную версию с веб-сайта Syncfusion. Полный исходный код, файлы модульных тестов, тестовые скрипты и живые демонстрации доступны на GitHub.

Связанный:

JavaScript
Разработка программного обеспечения

Пол Крилл (Paul Krill) — редактор InfoWorld, специализирующийся на разработке приложений.

Как выбрать платформу разработки с низким кодом

Замена JQuery на Angular

Краткий обзор: Веб-приложения Angular могут иметь намного меньше кода, чем приложения JQuery, и за ними легче следовать.

Я взял исходный код статьи электронного журнала за 2007 год, используя более старую версию JQuery, загрузил его на GitHub и постепенно преобразовал в Angular. Я сжал эту серию коммитов в on, чтобы было проще для глаз (и скрыть все ошибки, которые я сделал в пути), и вы можете увидеть это здесь. Стоит просмотреть этот коммит несколько минут, чтобы увидеть сравнение и собственный вес кода удален

Статья Digital Web, поддерживающая версию JQuery

Живая версия этой демонстрации JQuery

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

Поиграйте с живой версией этой демо-версии Angular_Air

Конечно, я заменил JQuery на Angular. Файл HTML раньше был огромным, но теперь он на 95% меньше, потому что я использую ng:repeat , чтобы повторить ряды/места на карте самолета, а также таблицу пассажиров ниже. JQuery, использующий JavaScript (global.js), был полностью удален (как и JQuery), у меня есть новый JavaScript на HTML-странице для настройки модели и несколько функций, которые я вызываю для поддержки представления. Это примерно на 80% меньше JavaScript.

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

В моей версии невыбранные пассажиры не отображаются (см. использование ng:show в исходнике HTML)

Версия Angular намного проще для понимания. Возможно, даже достаточно легко для относительных новичков. Это было бы неверно для резервного копирования Backbone того же приложения. Я начинаю думать, что модели JavaScript для Backbone БОЛЕЕ ПОДРОБНЫЕ, чем эквивалент Java для сериализации GSON/Jackson. Версия Knockout того же самого будет примерно такой же реализацией и строками кода, что и версия Angular.

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

Модель не идеальна для меня. Что я хотел бы иметь:

 мест[
  ряд :
  {
    число: 1,
    а : {
      имя_пассажира : "Фред"
    },
    б : {
      имя_пассажира : "Вилма"
    }
    // и т. д
  }
]

или

 мест[
  ряд : {
    число: 1,
    позиции : [
      {
        пост: "а",
        имя_пассажира : "Фред"
      },
      {
        Позн: "б",
        имя_пассажира : "Вилма"
      }
      // и т.
  д
    ]
  }
]

Но вместо этого у меня есть что-то менее иерархическое:

 мест[
  {
    ряд: 1,
пост: "а"
    имя_пассажира : "Фред"
  },
  {
    ряд: 1,
позиция: "б"
    имя_пассажира : "Вилма"
  }
  // и т. д
]

Причина, по которой мне пришлось пойти на компромисс, заключается в том, что места отображаются из тега

в HTML, и в этом списке 25 x 6 перестановок мест не выражена группировка. Ненумерованные списки не поддерживают группировку так, как это было бы допустимо для HTML. Модель в Angular должна поддерживать представление, а если нет, то ее нужно изменить. Таким образом, я сгладил его. Я бы реорганизовал свою логику бэкэнда, чтобы иметь возможность обслуживать это. Если бы приложение отправляло весь план мест обратно на сервер, чтобы сохранить его, я бы изменил и эту обработку, чтобы поддерживать получение более плоского списка мест.

С 2007 года JQuery значительно продвинулся вперед. Сама основная библиотека улучшилась, но также появилось множество элементов управления в пространстве «JQuery UI».

Replace jquery html: .replaceWith() | jQuery API Documentation