Jquery js: Урок 1. Что такое jQuery, основные понятия и возможности

16.12.2018 alexxlab

Содержание

Jquery Get Started

Добавление jQuery на веб-страницы

Есть несколько способов, чтобы начать использовать jQuery на вашем веб-сайте. Вы можете:

Скачать библиотеку jQuery из JQuery.com
Включите jQuery из CDN, как Google

Загрузка jQuery

Есть две версии JQuery доступны для скачивания:

Производственная версия — это для вашего живого сайта, потому что он был minified и сжат
Версия для разработки — это для тестирования и разработки (несжатый и читаемый код)

Обе версии можно скачать с jQuery.com.

Библиотека JQuery — это единый JavaScript-файл, который ссылается на тег HTML < script > (Обратите внимание, что тег <script> должен находиться внутри <head> раздела):

Tip: Place the downloaded file in the same directory as the pages where you wish to use it.

Вы удивляетесь, почему у нас нет типа = «Text/JavaScript» внутри тега <script>?

Это не требуется в HTML5. JavaScript является языком сценариев по умолчанию в HTML5 и во всех современных браузерах!

jQuery CDN

Если вы не хотите загружать и размещать jQuery самостоятельно, вы можете включить его из CDN (сеть доставки контента).

Как Google и Microsoft хост jQuery.

Чтобы использовать jQuery из Google или Microsoft, используйте одно из следующих действий:

Google CDN:

Microsoft CDN:

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

Многие пользователи уже скачали jQuery из Google или Microsoft при посещении другого сайта. В результате, он будет загружен из кэша, когда они посещают ваш сайт, что приводит к более быстрому времени загрузки. Кроме того, большинство CDN будет убедиться, что после того, как пользователь запрашивает файл из него, он будет обслуживаться от ближайшего к ним сервера, что также приводит к более быстрой загрузке времени.

Стоит ли использовать jQuery в 2019 году: сравнение с vanilla JavaScript

От автора: многие люди выступают за «просто используйте vanilla JavaScript, вам не нужен jQuery». Ну, многие вещи мне не нужны, но, тем не менее, их приятно иметь. Мне не обязательно нужен JQuery в 2019 году, у него есть не только плюсы, но и минусы. Но его, конечно, приятно иметь!

Такие страницы, как You might not need jQuery, пытаются продвигать идею, что вы можете легко отказаться от jQuery, но самый простой пример того, почему — это хорошая идея использовать jQuery: одна строка обычного кода jQuery заменяет 10 строк vanilla JS!

Большая часть JavaScript API — особенно DOM API — оскорбляет мое чувство эстетики, и это просто вежливый способ сказать, что я думаю, что JavaScript — это отстой.

el.insertAdjacentElement(‘afterend’, other) несомненно работает, но $(el).after(other) на самом деле более приятно. Хотя я никогда не был большим поклонником того, как выглядит функция $(), она намного лучше, чем то, что дает нам DOM.

Простой пример: как вы получаете элемент одного уровня? Это nextSibling или nextElementSibling? Какая разница? Какие браузеры поддерживают что? Пока вы заняты тем, что пытаетесь свериться с MDN, я просто буду использовать в jQuery next() или prev().

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Многие обычные операции в стандартных API-интерфейсах JavaScript неудобны; я мог бы привести целый список, но страница You might not need jQuery (YMNJQ) уже сделала это.

Вам по-прежнему понадобятся вспомогательные функции для различных общих задач. Опять же, на странице YMNJQ перечислены некоторые из них. Использование jQuery является стандартным способом включения этих вспомогательных функций вместо копирования / вставки их из случайных тем Stack Overflow каждый раз, когда они вам нужны.

Хотя совместимость браузеров является гораздо менее существенной проблемой , но она все еще актуальна, особенно если вы не принадлежите к типу людей «если это работает для 85% всего мира , то это достаточно хорошо для меня».

Вы всегда должны использовать JQuery? Нет, конечно нет. Добавление любой зависимости сопряжено с увеличением сложности и размера файла, но jQuery не так уж велик: сборка по умолчанию составляет 30 КБ, сжатая, пользовательская сборка без ajax и необычных вещей 23 КБ, а сборка, использующая querySelector вместо SizzleJS, составляет 17 КБ. И оригинальные 30K, и оптимизированные 17K кажутся мне вполне приемлемыми для многих целей.

Вы можете посмотреть на Bootstrap удаляет jQuery, чтобы увидеть пример того, как много усилий может потребоваться для использования vanilla JS: они написали свои собственные хелперы, пришлось отказаться от поддержки IE, так как ее было слишком сложно добавить, сделали API несовместимым («мы сломали все») и потратили на это полтора года. Если я посмотрю на конечный результат, я не могу сказать, что это намного лучше.

Я понимаю, почему они это сделали; люди хотят использовать Bootstrap с Vue.js и еще много чего, а использовать и Vue.js, и jQuery немного глупо. Я за то, чтобы уменьшить «веб-раздутие», но мы должны быть прагматичными и реалистичными. Включение ~17K jQuery действительно так плохо? Когда я упоминаю, что вам нужен более чем мегабайт JavaScript для такого сайта, как Medium или New York Times, то что, 17 КБ jQuery такое уж невыносимое бремя?

Есть несколько веских причин не использовать jQuery: если вы пишете код, который хотите использовать повторно, или если вы пишете только небольшую функцию. Но делать что-то, просто чтобы избежать jQuery? Просто используйте jQuery! «JQuery для всего», вероятно, не была такой уж хорошей идеей, но и «jQuery ни для чего» не лучше.

Я не зациклен на jQuery, и я с радостью использую «jQuery light», который соединяет JS API с чем-то более привлекательным. YMNJQ рекомендует bonzo и $dom, а также несколько других для AJAX и тому подобного, но многие из них, кажется, не поддерживаются достаточно. Кроме того, все уже знают jQuery. Зачем заменять его чем-то другим, если для этого нет веских причин?

Некоторые читатели могут задаться вопросом «а как же Vue.js, React или какой-либо другой современный фреймворк?» Цель этого поста — сравнить vanilla JavaScript с jQuery, а не предлагать Великую унифицированную теорию развития веб-интерфейса.

При этом, я думаю, есть несколько причин придерживаться простого JavaScript; прежде всего потому, что я хочу создавать быстрые веб-страницы, использовать простейший из возможных кодов и быть доступным как можно большему количеству людей. По моему опыту, сгенерированные на стороне сервера шаблоны, слегка присыпанные «прогрессивным улучшением», часто являются лучшим способом сделать это в стиле JavaScript. Зачастую это легче разрабатывается, быстрее, меньше подвержено ошибкам, и вентилятор вашего ноутбука не разбудит соседей.

Означает ли это, что эти веб-фреймворки всегда плохи? Нет, не так уж много вещей плохи «всегда» (или хороши), чаще всего это набор компромиссов (как, впрочем, и в случае jQuery).

По сути, я думаю, что Интернет — это система для просмотра документов, а не операционная система. Даже для многих «веб-приложений» (что бы вы ни имели ввиду) подход к документам работает достаточно хорошо (эта тема заслуживает отдельной публикации… может, когда-то в будущем).

Автор: Martin Tournoij

Источник: //arp242.net

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

jQuery

jQuery — это одна из самых популярных библиотек JavaScript. И это неудивительно для тех, кто её использует. Она позволяет упростить, ускорить и, что самое удивительное, улучшить разработку скриптов на JavaScript.

Преимущества jQuery:

Очень удобная работа с элементами, основанная на селекторах CSS.
Отличная кроссбраузерность. Многие программисты не задумываются над кроссбраузерностью, однако, это необходимо, ведь один и тот же код разные браузеры могут обрабатывать по-разному. jQuery все эти нюансы учитывает, и Вам уже не надо об этом задумываться.
Отличные возможности по анимации. Анимация украшает страницу и делает её более приятной для использования. Проще сделать анимацию, чем это реализовано в jQuery, просто невозможно: огромные возможности при простоте использования.
Большое количество готовых плагинов. Чтобы сделать тот же слайдер изображений на JavaScript, может потребоваться несколько дней. А установить и настроить готовый плагин можно за несколько минут.

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

Прочитав статьи по jQuery, Вы узнаете:

1) Как установить jQuery.

2) Что такое функция $() в jQuery.

3) Как сделать выборку элементов в jQuery.

4) Как работать с выборкой на jQuery.

5) Как добавлять и удалять элементы в jQuery.

6) Как обработать события на

jQuery.

7) Как делается анимация на jQuery.

8) Как сделать зумирование изображений на jQuery.

9) Как сделать плавную кнопку «наверх» на jQuery.

10) Как сделать динамическую загрузку файлов на сервер.

11) Как делается адаптивная вёрстка на jQuery.

12) Как отправлять асинхронные запросы на JQuery

13) Как отправлять Ajax запросы с помощью методов $.post() и $.get()

14) Как сделать радио кнопки в виде слайдера на JQuery.

15) Как установить слайдер slick.

16) Как сделать архив с помощью плагина для JQuery.

17) Как сделать экскурсию по сайту на JQuery.

18) Как сделать красивые табы на JQuery.

19) Как создать титры на сайте с помощью плагина для JQuery.

20) Как создать красивый progressbar с помощью плагина для JQuery.

21) Как сделать замок по шаблону на JQuery.

22) Как добавить динамики на сайт с JQuery библиотекой dynamo.js.

23) Как сделать видео на заднем фоне с помощью JQuery.

24) Как сделать подтверждение отправки почты на JQuery.

25) Как сделать красивый и эффектный

слайдер на JQuery.

26) Как сделать красивый выпадающий список на JQuery.

27) Как сделать красивое всплывающее окошко на JQuery, используя WebUI-Popover.

28) Как сделать красивые уведомления на JQuery, используя плагин Noty.

29) Как сделать красивое выпадающее меню с интересным эффектом на CSS и JQuery.

30) Как сделать задний фон в виде частиц на JQuery.

31) Как сделать интерактивное сравнение двух фотографий на JQuery.

32) Как сделать круговой ползунок на JQuery

33) Как сделать облака на JQuery.

34) Как вывести время, прошедшее с момента опубликования записи, на JQuery.

35) Как вывести специальные символы на JQuery.

36) Как сделать счетчик обратного отсчета на JQuery.

37) Как сделать кастомное меню на JQuery.

38) Как сделать анимацию при загрузке страницы на JQuery.

39) Как определить блокировщик рекламы на JQuery.

40) Как сделать выезжающее меню на JQuery.

41) JQuery LightGallery — плагин для создания галерей.

42) Как обернуть элемент в макет браузера или устройства на JQuery

43) Как сделать красивую галерею с сортировкой на JQuery.

44) Как сделать интерактивный 3D объект на JQuery.

45) Как сделать всплывающее окно на JQuery.

46) Как сделать скроллинг параллакс эффект.

47) Как сделать гамбургер меню на CSS и JS. Часть 1.

48) Как сделать гамбургер меню на CSS и JS. Часть 2.

49) Как сделать выдвигающийся поиск по клику.

50) Как сделать валидацию формы на jQuery.

51) Как сделать маску ввода телефона на jQuery.

52) Как работать с библиотекой jQuery.

53) Как работать с библиотеке jQuery UI.

54) Как использовать jQuery UI Slider.

55) Как применить виджет jQuery UI Datapicker.

56) О плагине для табов EasyTabs.

57) Как настроить слайдер BxSlider.

58) Как поставить таймер обратного отсчёта на сайт.

59) Как сделать AJAX-форму без перезагрузки страницы.

60) Как создать эффект печатающегося текста на сайте.

61) На реальном примере про анимацию SVG вектора.

62) Фильтры в jQuery.

63) Как получить селектор в jQuery.

64) Как манипулировать атрибутами в jQuery.

65) Как работают jQuery события мыши.

66) Как работают jQuery эффекты.

67) Как сделать всплывающее окно popup на jQuery (часть 1).

68) Как сделать всплывающее окно popup на jQuery (часть 2).

69) Как сделать фильтрацию по первым буквам на jQuery.

70) Как сделать анимацию кнопки меню гамбургер.

71) Как сделать адаптивное меню гамбургер.

72) Как делать Mobile first верстку.

73) Как делать плавный якорь на jQuery.

74) Как сделать прокрутку страницы вверх.

75) Как сделать виджет аккордеон библиотеки JQuery UI.

76) Кому нужен jQuery и почему?.

77) Получить значение из формы на jQuery

78) Получить и изменить значение атрибута на jQuery.

79) Data атрибуты на jQuery (часть 2).

80)Пример стилизации Slick слайдера (часть 1).

81)Пример стилизации Slick слайдера (часть 2).

82)Настройки стрелок у Slick слайдера (часть 3).

83)Настройка галереи Fancybox 3.

84)Выгрузка товаров на сайт (jQuery + JSON).

Все материалы по jQuery

Как отказаться от jQuery в современном фронтенде: опыт команды GitHub

Не так давно GitHub полностью перестал использовать jQuery в своём фронтенд-коде. Мы перевели пост, в котором разработчики рассказывают, с чего началась их работа с jQuery, как они поняли, что пора от него отказываться, и как они смогли сделать это без использования других библиотек или фреймворков.

Зачем jQuery был нужен раньше?

jQuery 1.2.1 вошёл в число зависимостей GitHub в конце 2007 года. Это произошло за год до того, как Google выпустил первую версию браузера Chrome. На тот момент не было общепринятого способа обращаться к элементам DOM с помощью CSS-селектора, не было стандартного способа добавить анимацию к стилю элемента, а интерфейс XMLHttpRequest, предложенный Internet Explorer, как и многие API, был плохо совместим с браузерами.

С jQuery стало гораздо проще управлять DOM, создавать анимации и делать AJAX-запросы. У веб-разработчиков появилась возможность создавать более современные, динамические сайты, которые выделялись среди остальных. Самое главное, все функции JavaScript, проверенные в одном браузере с помощью jQuery, как правило, работали и в других браузерах. На заре GitHub, когда большинство его функций только обретали форму, появление jQuery позволило небольшой команде разработчиков быстро создавать прототипы и представлять новые функции без необходимости подстраивать их отдельно под каждый браузер.

Простой интерфейс jQuery также послужил основой для создания библиотек, которые в будущем стали компонентами остальной части фронтенда GitHub.com: pjax и facebox.

Веб-стандарты в последующие годы

С течением времени GitHub превратился в компанию с сотнями разработчиков и постепеннно сформировалась команда, которая отвечала за размер и качество JavaScript-кода, который мы отправляем браузерам. Одна из вещей, за которыми мы постоянно следим, — технический долг, порой вырастающий из некогда полезных зависимостей, которые потеряли свою актуальность по прошествии времени.

Когда очередь дошла до jQuery, мы сравнили его с развивающимся веб-стандартом в браузерах и поняли, что:

Шаблон $(selector) можно легко заменить на querySelectorAll();
Переключение CSS-классов теперь можно осуществить с помощью Element.classList;
CSS теперь поддерживает создание анимации в таблицах стилей, а не в JavaScript;
$.ajax-запросы можно выполнять с помощью Fetch Standard;
Интерфейс addEventListener() достаточно стабилен для кроссплатформенного использования;
Шаблон делегирования событий легко инкапсулировать с помощью легковесной библиотеки;
С эволюцией JavaScript часть синтаксического сахара jQuery устарела.

Кроме того, синтаксис цепочек команд не удовлетворял нашим представлениям о коде, который мы хотели бы писать в будущем. Например:

$('.js-widget')
  .addClass('is-loading')
  .show()

Такой синтаксис прост в написании, однако по нашим стандартам не очень хорошо передаёт намерения автора. Сколько элементов js-widget, по его задумке, должно быть на странице: один или больше? А если мы обновим разметку страницы и случайно оставим имя класса js-widget, будет ли выброшено исключение, которое сообщит нам, что что-то пошло не так? По умолчанию jQuery молча пропускает всё выражение, когда нет совпадений по начальному селектору; однако для нас такое поведение было больше багом, нежели фичей.

Наконец, нам хотелось начать аннотировать типы с Flow, чтобы проводить статическую проверку типов во время сборки, и мы пришли к выводу, что синтаксис цепочек плохо поддаётся статическому анализу, так как почти каждый результат вызова метода jQuery одного и того же типа. Из возможных вариантов мы выбрали именно Flow, так как тогда такие возможности, как режим @flow weak, позволили нам начать прогрессивно и эффективно применять типы к кодовой базе, которая по большей части была нетипизированной.

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

Постепенный переход

Хотя наша конечная цель была не за горами, мы знали, что было бы нецелесообразно направить все имеющиеся ресурсы на переписывание всего с jQuery на чистый JS. Во всяком случае, такое поспешное решение негативно бы сказалось на функциональности сайта, от которой нам бы пришлось отказаться. Вместо этого мы:

Начали отслеживать количество вызовов jQuery на строку кода и следили за графиком на протяжении времени, чтобы убедиться, что он либо не меняется, либо падает, но не растёт.
Отказались от использования jQuery в новом коде. Чтобы достичь этого с помощью автоматизации, мы создали eslint-plugin-jquery, который проваливал CI-тесты при попытке использовать возможности jQuery вроде $. ajax.
В старом коде появилось много нарушений правил eslint, которые мы пометили с помощью специальных правил eslint-disable в комментариях. Для того, кто будет это читать, такие комментарии должны были служить явным сигналом того, что здесь не отражаются наши текущие методы написания кода
Мы написали бота, который при отправке pull request’а оставлял комментарий, сигнализирующий нашей команде каждый раз, как кто-то хотел добавить новое правило eslint-disable. Таким образом мы могли провести ревью кода на ранней стадии и предложить альтернативы.
Большая часть старого кода была явно связана с внешними интерфейсами jQuery-плагинов pjax и facebox, поэтому мы оставили их интерфейсы почти без изменений, в то время как изнутри заменили их реализацией на чистом JS. Наличие статической проверки типов вселило в нас уверенность в проводимом рефакторинге.
Много старого кода было связано с rails-behaviors, нашим адаптером для Ruby on Rails, таким образом, что он присоединял обработчик жизненного цикла AJAX к определённым формам:
```
// УСТАРЕВШИЙ ПОДХОД
  $(document). on('ajaxSuccess', 'form.js-widget', function(event, xhr, settings, data) {
    // вставка данных ответа куда-нибудь в DOM
  })
```
Вместо того чтобы переписывать все эти вызовы согласно новому подходу, мы решили использовать ложные события жизненного цикла ajax*, и формы продолжали отправлять данные асинхронно, как и раньше; только теперь изнутри использовался fetch().
Мы поддерживали свою сборку jQuery, из которой убирали ненужные нам модули и заменяли более лёгкой версией. Например, после избавления от всех jQuery-специфичных CSS-псевдоселекторов вроде :visible или :checkbox мы смогли убрать модуль Sizzle; а когда мы заменили $.ajax-вызовы на fecth(), мы смогли отказаться от модуля AJAX. Мы убивали двух зайцев разом: уменьшали время выполнения JavaScript, параллельно гарантируя то, что никто не напишет код, который будет пытаться использовать удалённую функциональность.
Глядя на статистику нашего сайта, мы старались прекратить поддержку Internet Explorer настолько быстро, насколько это возможно. Как только использование определённой версии IE падало ниже определённого порога, мы прекращали её поддержку и фокусировались на более современных браузерах. Отказ от поддержки IE 8-9 на раннем этапе позволил нам использовать многие нативные возможности браузеров, которые в противном случае было бы сложно «заполифиллить».
В рамках нашего усовершенствованного подхода к написанию фронтенда GitHub мы сосредоточились на использовании обычного HTML по-максимуму, добавляя JavaScript в качестве последовательного улучшения. В итоге даже те формы и другие элементы интерфейса, которые были улучшены с помощью JS, как правило, могли работать даже с выключенным в браузере JavaScript. В некоторых случаях нам даже удалось удалить определённую устаревшую функциональность вместо её переписывания на чистом JS.

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

Custom Elements: пользовательские элементы

Одна технология, наделавшая шуму в последние годы, — Custom Elements: библиотека компонентов, встроенная в браузер, что означает отсутствие необходимости для пользователя качать, парсить и компилировать дополнительные байты фреймворка.

Мы создали несколько пользовательских элементов на основе спецификации v0 с 2014 года. Однако, поскольку стандарты в то время постоянно менялись, мы сильно в это не вкладывались. А начали только с 2017 года, когда была выпущена спецификация Web Components v1, реализованная как в Chrome, так и в Safari.

Во время перехода с jQuery мы искали структуры, которые можно было бы извлечь в качестве пользовательских элементов. Например, мы преобразовали код facebox, использованный для отображения модальных диалогов, в элемент <details-dialog>.

Наша общая философия прогрессивного улучшения относится и к пользовательским элементам. Это значит, что мы стараемся хранить как можно больше контента в разметке и только добавлять поведение поверх неё. Например, <local-time> по умолчанию показывает исходную временную метку, но с улучшением может переводить время в местный часовой пояс, а <details-dialog>, расположенный внутри элемента <details>, интерактивен даже без JavaScript, но может быть улучшен до расширенных возможностей доступа.

Вот пример того, как можно реализовать элемент <local-time>:

// Элемент local-time отображает время в текущем
// часовом поясе и местоположении пользователя.
//
// Пример:
//   Sep 6, 2018
//
class LocalTimeElement extends HTMLElement {
  static get observedAttributes() {
    return ['datetime']
  }

  attributeChangedCallback(attrName, oldValue, newValue) {
    if (attrName === 'datetime') {
      const date = new Date(newValue)
      this.textContent = date.toLocaleString()
    }
  }
}

if (!window.customElements. get('local-time')) {
  window.LocalTimeElement = LocalTimeElement
  window.customElements.define('local-time', LocalTimeElement)
}

Один из аспектов Web Components, который мы очень хотим перенять, — Shadow DOM. У Shadow DOM есть потенциал для раскрытия множества возможностей для веба, однако он также усложняет полифиллинг. Так как его полифиллинг на данный момент приведёт к снижению производительности даже для кода, который управляет частями DOM, не относящихся к веб-компонентам, для нас нецелесообразно использовать его в продакшне.

Полифиллы

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

Смотрите также: «Фундаментальные принципы объектно-ориентированного программирования на JavaScript»

Перевод статьи «Removing jQuery from GitHub. com frontend»

Переход с jQuery на Vue.js Зачем, как и что из этого вышло

Опубликовано: 25 Июн 2019

Вернуться в блог

Меня зовут Сергей, я работаю в Студии Флаг с 2017 года и, когда я пришел, состояние фронтенда оставляло желать лучшего.

Введение

Меня зовут Сергей, я работаю в Студии Флаг с 2017 года и, когда я пришел, состояние фронтенда оставляло желать лучшего. Если CSS хоть как-то собирался, был разбит на модули, то на некоторых проектах весь JavaScript хранился в одном файле длиной несколько тысяч строк, не минифицировался, и периодически встречались комментарии типа «Не лезь, оно тебя сожрет». В другом месте JS-функция иногда возвращала “trulio” вместо true. Большая часть кодовой базы была написана на jQuery, что тоже не упрощало работу.

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

Постепенно, мы занялись созданием сборки фронтенда, начали с минификации (сжатия) и транспиляции (трансформации кода таким образом, чтобы он работал в старых браузерах) JavaScript с помощью популярного сборщика Gulp. Позже стали разбивать код на модули. С 2017 года мы начинали постепенно внедрять php-фреймворк Laravel. Кстати, создатели Laravel (Taylor Otwell) и Vue.js (Evan You) много общаются и выступают на конференциях друг у друга.

После изменения технологического стэка, изменились и наши клиенты. Стало появляться все больше сложных и длинных проектов, требующих постоянной поддержки и доработок, со сложной логикой, которая должна выполняться в браузере. Поэтому мы задумались об использовании нового фреймворка для frontend-разработки.

Почему Vue

Vue.js – это прогрессивный фреймворк для создания пользовательских интерфейсов. Создателем Vue.js является Evan You, бывший сотрудник Google и Meteor Dev Group. Начал он разрабатывать фреймворк в 2013-м, а в феврале 2014-го состоялся первый публичный релиз.

Почему мы выбрали именно его?

Во-первых, Vue.js реактивен, и это его основное преимущество перед jQuery, который мы использовали ранее. Это значит, что изменение данных вызывает автоматический ререндеринг в тех местах, где они выводятся. Это позволяет писать меньше кода, упрощает разработку и увеличивает читабельность кода.

Во-вторых, Vue довольно легко интегрируется с Laravel, backend-фреймворком, который мы используем.

В-третьих, он подходит для постепенного внедрения. Постепенно изучая фреймворк, мы могли начинать использовать его в существующих проектах, которые не были написаны на Vue.js с нуля.

Немаловажным является то, что фреймворк имеет доступную документацию(в том числе на хорошем русском языке).
Vue.js появился позже Angular и React, и, как обещали разработчики, взял лучшее от обоих. На тот момент он уже начал обгонять React по звездочкам на GitHub, и в рейтинге любви разработчиков имел позиции не ниже, чем React. Совокупность этих факторов привела к выбору Vue.js, который мы начали внедрять с начала 2018 года, и еще ни разу не пожалели об этом.

Использование Vue.js

Для изучения Vue.js требуется базовое знание HTML, CSS, JavaScript, желательно знание стандарта ES6 и выше. Vue поддерживает все современные браузеры и даже Internet Explorer 9-11 и весит всего около 20 кб (min + gzip).

Для старта простого проекта на Vue.js достаточно скачать JS-файл и подключить его на страницу с помощью тега <script>. Будет зарегистрирована глобальная переменная Vue. Также существует Vue CLI – инструмент, с помощью которого можно быстро развернуть проект, и использовать все продвинутые возможности Vue (о них расскажу далее) без потери времени на настройку конфигов систем сборки фронтенда. Мы же на своих проектах используем Webpack + Laravel Mix (пакет для Laravel, позволяющий быстро настраивать Webpack).

Основные концепции

Основными концепциями Vue являются:

конструктор

компоненты

директивы

переходы

Конструктор

Для начала работы с Vue требуется создать новый экземпляр Vue. В нем указывается элемент, который будет использоваться для рендеринга, описываются данные и вычисляемые свойства, методы, хуки жизненного цикла экземпляра Vue. Это и есть конструктор. Выглядит это так

Компоненты

Ключевое правило при разработке сложных вещей: «Никогда не делайте сложные вещи». Если что-то становится сложным – разбиваем это на части попроще и связываем их наиболее очевидным способом. Любой сложный интерфейс нужно делить на компоненты – сущности, для которых мы можем максимально однозначно и понятно указать, что это такое и что оно умеет делать.

Компоненты помогают расширить основные html элементы и внедрить переиспользуемый код. По сути, компоненты — повторно используемые части UI. На этапе проектирования мы разбиваем наше приложение на независимые части и получаем древовидную структуру компонентов. В примере ниже можно увидеть пример Vue-компонента — счетчика кликов, который можно вставить на страницу несколько раз и все реализации этого счетчика будут работать независимо друг от друга.

jQuery

Для jQuery тоже можно найти плагины, для реализации компонентного подхода, однако их почти никто не использует на практике.

Директивы

Директивы используются для добавления дополнительной функциональности html-элементам. Все директивы имеют префикс «v-». С их помощью можно добавлять обработчики событий, управлять отображением элементов, передавать данные и многое другое.

Например, в примере ниже элементу добавляется класс “active”, если переменная isActive возвращает “true”.

jQuery

В jQuery для реализации подобной функциональности пришлось бы добавить класс или id к этому элементу (хорошо, если он еще будет с префиксом js—), после этого обратиться к этому элементу и при изменении переменной isActive добавлять или убирать класс.

Переходы

Vue дает возможность самым разным образом анимировать переходы при обновлении объектов DOM, а также при их добавлении и удалении. Его инструменты дают возможность:

автоматически применять CSS-классы для анимаций и переходов

интегрировать сторонние библиотеки CSS-анимаций, такие как Animate.css

использовать JavaScript для работы с DOM напрямую в хуках переходов

интегрировать сторонние библиотеки JavaScript-анимаций, такие как Velocity.js

jQuery

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

Отладка

Для отладки используется расширение для браузера vue-devtools, которое позволяет видеть компонентную структуру проекта. Это расширение позволяет отслеживать состояние каждого компонента, реактивно менять данные в нем, изменяя его состояние. Также в нем присутствуют возможности для отладки Vue Router и Vuex, о которых расскажу чуть позже.

Скриншот интерфейса Vue-devtools представлен ниже.

jQuery

Для jQuery также существует расширение для отладки, однако его возможностей часто бывает недостаточно.

Однофайловые компоненты

Для того, чтобы проект было легко масштабировать и отлаживать рекомендуется использовать однофайловые компоненты Vue, которые являются одной из киллер-фич фреймворка. При такой организации кода каждый компонент – это отдельный файл, который имеет три части: разметку, скрипт и стили. Это очень удобно – видеть всю логику компонента в одном файле. Причем писать можно на любом удобном вам препроцессоре (SASS, PostCSS, …) и языке, компилирующимся в JS (CoffeeScript, TypeScript). На иллюстрациях ниже можно увидеть пример такого компонента. В примере сперва идет HTML-разметка, затем JavaScript и, наконец, стили CSS. Все рядом, в одном файле, удобнее уже некуда!

jQuery

В jQuery такой реализации компонентного подхода нет.

Vuex

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

Для решения этой проблемы Vue предлагает Vuex. Vuex – это паттерн и библиотека управления состоянием для приложений на Vue.js. Он позволяет хранить данные в одном месте в виде JSON-объекта, что упрощает работу при разработке больших приложений.

jQuery

Если снова вспомнить про jQuery, то подобных встроенных инструментов управления состоянием приложения он не имеет.

SPA

Для создания SPA (Single Page Application) предусмотрен модуль VueRouter. SPA – это веб-приложение, работающее на одной странице. На SPA-сайте при переходах между URL-адресами страница не перезагружается, а обновляется только то, что должно обновиться. Большая часть работы сайта производится на стороне клиента, а если нужно получить данные с сервера, то это обычно делается с помощью ajax.

В обычных сайтах очень часто можно встретить загрузку одного и того же содержимого. Например, шапка сайта, футер, меню и другие элементы, которые не меняются от страницы к странице, тем не менее, каждый раз загружаются с сервера. С использованием SPA подхода такой проблемы просто не будет, т.к. контент будет подгружаться по мере необходимости, что значительно повысит скорость работы приложения. Пример SPA-сайта: https://meduza.io/

Vue Router имеет мощные возможности по управлению роутингом приложения, и при этом доступную документацию. Она глубоко интегрируется с Vue.js и позволяет легко создавать SPA-приложения. Включает следующие возможности:

Вложенные маршруты/представления;

Модульная конфигурация маршрутизатора;

Доступ к параметрам маршрута, query, wildcards;

Анимация переходов представлений на основе Vue.js;

Удобный контроль навигации;

Автоматическое проставление активного CSS класса для ссылок;

Режимы работы HTML5 history или хэш, с автопереключением в IE9;

Настраиваемое поведение прокрутки страницы.

Есть инструменты и для серверного рендеринга HTML страниц.

jQuery

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

Vuetify

Для того, чтобы быстро собрать приложение можно использовать набор готовых компонентов – Vuetify. Он соответствует концепции дизайна Material Design. С его помощью можно как использовать некоторые UI-элементы (селекты, датапикеры), так и готовые темы интерфейсов.
Ниже можно увидеть форму авторизации Vuetify.

jQuery

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

Заключение

Таким образом, Vue предоставляет обширные возможности для разработчиков. С ним очень легко начать работать, даже если до этого вы не использовали JavaScript-фреймворки и постепенно двигаться от простого к сложному на реальных проектах. При использовании однофайловых компонентов вы получаете приложение с чистым кодом, разбитым на модули, которое легко масштабировать.

Вы можете начать создавать SPA и удобно управлять состоянием с помощью Vue Router и Vuex, а также использовать готовый набор компонентов Vuetify. А еще у Vue есть набор фирменных эмоджи! Мы работаем с Vue.js больше года, и за это время убедились, что как фреймворк, он удовлетворяет все наши потребности и стимулирует изучать новое и двигаться вперед.

Всем Vue!

Последние записи блога
Please enable JavaScript to view the comments powered by Disqus.
JavaScript. Использование jQuery в Webpack — ProgCode.Ru

Webpack является одним из самых мощных и гибких инструментов для сборки фронтенд-проектов. Иногда необходимо включить в проект Webpack одну из самых популярных JavaScript библиотек jQuery.

Для начала необходимо установить jQuery из репозитория npm командой:

npm i jquery

либо (если используем менеджер пакетов Yarn):

yarn add jquery

Чтобы jQuery стал доступным в глобальной области видимости в «бандле» (собираемом пакете, от bundle) можно использовать ProvidePlugin (см. официальную документацию https://webpack.js.org/plugins/provide-plugin/):

module.exports = { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), ] };

Так библиотека jQuery будет доступна через глобальные переменные $, jQuery, window.jQuery.
Иногда в проектах Webpack собираются несколько бандлов. Например, есть финальный скрипт, который подключается на все страницы и в нём необходима библиотека jQuery. А в других скриптах она уже не нужна, так как она будет уже подключена глобально. В таком случае только в модуле, который будет глобальным, необходимо подключить jQuery (для импорта модулей будем использовать стандарт ES6/ES2015):

import $ from 'jquery'; global. jQuery = $; global.$ = $;

Также jQuery можно подключить в проект Webpack через CDN с помощью плагина html-webpack-externals-plugin (https://www.npmjs.com/package/html-webpack-externals-plugin):

module.exports = { plugins: [ new HtmlWebpackExternalsPlugin({ // optional plugin: inject cdn externals: [ { module: 'jquery', entry: 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' } ], }), ] };

После чего можно использовать jQuery библиотеки, подключая их следующим образом:

require("inputmask/dist/inputmask/jquery.inputmask.js");

Переход с jQuery на Vue.js
Об авторе
Сара Дрезнер — заслуженный спикер и senior разработчик в Microsoft, автор статьей о трюках и хитростях CSS.
Нельзя просто так упустить все интриги, возросшие вокруг существующий JavaScript — фреймворков, но также не стоит забывать, что они явно не являются универсальными и каждый тип проекта требует что-то «свое». Возможно, вы не захотите устанавливать большое количество различных дополнений, чтобы просто реализовать небольшую абстракцию. Возможно, адаптация проекта под новые системы сборки, различные методы деплоя будет означать большое количество времени и усилий, которые вы будете не в состоянии включить в прайс клиенту. Возможно, вы не хотите писать в HTML JavaScript. Список может расти до бесконечности.
Что многие люди могут не знать, так это то, что вы можете легко внедрить Vue.js в ваш проект точно так же, как вы внедряете jQuery. Не нужно ничего перестраивать. Vue достаточно гибкий — в том плане, что вы можете его использовать прямо в HTML.
Итак, представим, что ваш код имеет следующий вид:
Вы можете в буквальном смысле изменить скрипт-тег и продолжить использовать HTML & JS точно так же, как вы использовали его до этого. Вам не нужно ничего переписывать. Вам не нужно интегрировать веб-паки. И вам определенно не нужно устанавливать никаких криповых чудовищ.
Вы можете заменить тэги и оставить разметку «как есть». Что радует, так это несказанная простота, гибкость и адаптируемость Vue.js, что вы можете увидеть на протяжении чтения данной статьи. Что же касательно размера, тут нас тоже ждет приятная особенность: всего лишь 86 КБ для версии 2.5.3 и 87 для более новой версии 3.2.1.
Давайте рассмотрим некоторые наиболее распространенные примеры использования нового фреймворка и убедимся в его неоспоримых преимуществах.
Перехват пользовательского ввода
Наиболее распространенным примером использования JavaScript является отлавливание введенной пользователем в веб-формы информации. В нашем примере для упрощения мы не будем рассматривать комплексные формы, но для понимания этого будет целиком достаточно.
Чтобы отловить информацию, вводимую пользователем, мы можем сделать следующее:
Я использую этот пример, потому что он наглядно демонстрирует некоторые сильные стороны Vue. js. Он реализует особенности react, что делает его очень чуствительным в плане изменений. Демонстрацию вы можете увидеть, когда попытаетесь ввести что-то. Как можно заметить, вся информация обновляется практически мгновенно.
Вы также можете заметить это и в версии с JQuery — контролируя элементы DOM-дерева и работая с событиями, вызываемыми при изменении содержания его элементов.
В версии Vue.js мы сохраняем состояние элемента. Если более детально, то мы привязываем к нашему конечному скрипту DOM-элемент напрямую. Особенность в том, что даже в случае изменения структуры DOM-дерева и HTML в целом, конкретный DOM-элемент будет надежно привязан к нашему Vue.js — событию. Де-факто, на вводе мы используем атрибут v-model, тем самым обозначая хранение информации этого поля в JavaScript.
Однако это далеко не единственный способ хранения состояния. Потому двигаемся дальше.
Хранение введенных данных в рамках индивидуального события
Особенность работы Vue.js заключается в том, что нам не нужно думать об особенностях реализации конкретного DOM-события. По сути, мы уже знаем, что мы желаем «перехватить». Мы просто указываем событию, на который из элементов срабатывать. Тогда как с использованием JQuery мы жестко привязываемся к структуре DOM и прочим DOM-событиям. Увидеть разницу мы сможем в следующем примере:
В этой версии JQuery был упрощен, так как нам не нужно было отлавливать события при каждом нажатии клавиши, но в то же время все остальные условия соблюдены. Наш код в jQuery также будет подобен этому:
«Отловите элемент, просмотрите, что он делает, перехватывайте изменения, обрабатывайте полученные данные.»
Сравним: во Vue мы контролируем все изменения DOM-дерева. Мы привязываемся к конкретным элементам. По сути, мы имеем небольшую абстракцию под названием v-model.lazy. Vue тепер знает, что сохранять состояние данных до того, как были произведены первые изменения, нельзя. Отлично!
Классы
Следующая вещь, которую мы сейчас рассмотрим, является привязкой CSS-классов, так как наш всеми любимый и обожаемый Гугл сообщает, что это также наиболее популярный случай использования jQuery.
Опять же, что мы здесь можем видеть, так это то, что в версии с jQuery мы храним состояние объекта в DOM-дереве. Элемент имеет свой класс, jQuery принимает решение на базе существующего класса, проверяющего привязку к DOM. В версии с Vue мы храним условие и применяем к нему стили в зависимости от состояния этого условия. Мы не обращаемся к DOM за этой информацией, мы храним ее сами.
Мы храним active в данных, кнопка изменяет состояние условия и, в зависимости от условия, применяется к примеру .red. Даже состояния доступа, aria-pressed, сохраняются гораздо быстрее, так как у нас нет необходимости хранить все в vue-скрипте. Мы можем изменять состояние напрямую при помощи слова active.
Если вы думали, что использование Vue породит большее количество кода, последние несколько примеров должны были заставить вас убедиться в обратном.
Скрытие и отображение
Другой общий случай использования jQuery является отображением и сокрытием элементов. jQuery всегда хорошо справлялся с этой задачей, потому давайте посмотрим, как все будет выглядеть со стороны Vue.
Оба фреймворка успешно справляются с поставленной задачей, но все же и здесь есть свои причины, почему я отдаю предпочтение Vue.js. Vue обладает инструментом под названием Vue devtolls. Это не то же самое, что Chrome devtools, но когда я их использую, я получаю больше специфической информации, связанной непосредственно с Vue.js
И в jQuery и в Vue элементы успешно скрываются и появляются вновь. Но что, если что-то пойдет не так? Что, если что-то в нашем коде работает не так, как это было задумано? В случае с jQuery для отладки мы бы скорее всего использовали console.log и были бы таковы.
Это все, конечно, хорошо, но в случае с Vue он сам нам предоставит всю необходимую информацию о нем самом. На пикче ниже мы можем увидеть, как элемент скрывается\появляется и как изменяется его состояние в специальном окне. Если DOM по какой-то причине не будет работать так, как мы от него ожидаем, вся необходимая информация будет легко отображена во Vue.
Что еще мне нравится, так это то, что v-if очень удобно принять в других случаях. Я могу использовать v-show, если вещь будет скрыватся и отображатся часто: v-if полностью «демонтирует» элемент, тогда как v-show просто изменит видимость. Это достаточно важно, так как позволяет улучшить производительность. Я легко могу установить целые каскады условий, в то время как повторить подобное с jQuery — слегка затруднительно.
В этом примере значения с приставкой Vue реагируют на код достаточно натурально и с меньшим объемом кода. Однажды попробовав этот стиль, логику приложений, разработанных под Vue, использовать будет значительно проще.
Передача формы
Так уж исторически сложилось, что отправка формы посредством Ajax является наиболее «каноничным» примером использования jQuery. А потому мы просто обязаны рассмотреть альтернативу. На самом деле, Vue не обладает встроенными вещами навроде Ajax. Обычно вместо этого здесь используется Axious (js-библиотека для генерации http-запросов).
Этот пример будет несколько более сложным, чем предыдущие. Мы собираемся произвести следующее:
До начала ввода в форму клавиша будет серой. После чего она примет «активный» класс и станет голубой.
Когда мы отправляем форму, страница не будет перезагружаться.
Как только форма принята, мы отобразим ответ на странице.
Здесь за управление классом клавиши отвечают строки 2-10. Похоже на то, что мы делали ранее. Мы передаем в параметр под названием событие форму и говорим event.preventDefault(), дабы запретить перезагрузку страницы. После чего мы собираем всю информацию с формы и отправляем через Ajax запрос (.done()).
В версии Vue мы биндим поля через v-model. Мы проверяем имена для связки с классом. Вместо передачи информации и загрузки страницы event.preventDefault(), нам всего лишь нужно написать @submit.prevent в нашем элементе формы. Для передачи запроса же мы используем Axious.
Конечно, так же можно произвести и валидацию, отлавливание ошибок, тесты и так далее. Но для понимания логики работы с Vue, как мне кажется, достаточно и этих небольших примеров.
И в заключение
Нет ничего плохого в том, чтобы продолжать использовать jQuery. Цель этой статьи — всего лишь показать, что Vue так же хорош в качестве некой такой абстракции для небольших сайтов. Этот фреймворк оптимален в размерах, прост в работе и освоении, достаточно тривиален и прекрасно интегрируется в HTML & JS без необходимости перестраивать приложение.
Благодаря гибкости Vue передача кода на стадию билда и общая компонентная структура не являются чем-то сложным. На самом деле — это очень даже весело. Попробуйте сами! Вы можете скаффолдить весь Vue на уровне продакшена просто при помощи пары терминальных команд. Подобным образом вы можете работать с отдельными компонентами, не трогая HTML & JS. Вам не нужно менять конфигурацию вашего веб-пака, разве что вы не захотите сделать что-то специфическое.
Vue хорош во всем, что касается адаптивности, так как вам не нужно ничего менять в вашей разметке, чтобы работать с новым, качественными фреймворком.
Удачи в разработке!
Автор перевода: Евгений Лукашук
Источник
jQuery Core — все версии
jQuery Core — все версии | jQuery CDN
<скрипт src = "{{ссылка}}" целостность = "{{хэш}}" crossorigin = "анонимный">
Атрибуты целостности и crossorigin используются для Проверка целостности подресурсов (SRI). Это позволяет браузерам гарантировать, что ресурсы, размещенные на сторонних серверах, имеют не было подделано.Использование SRI рекомендуется как лучшая практика, когда библиотеки загружаются из стороннего источника. Подробнее на srihash.org Питаться от

Ядро jQuery и миграция — Git Builds

НЕСТАБИЛЬНО, НЕ ДЛЯ ПРОИЗВОДСТВА

jQuery Core — все версии 3.x

jQuery Core 3.5.1 — несжатый, минимизированный, тонкий, тонкий, минимизированный

jQuery Core 3.5.0 — несжатый, минимизированный, тонкий, тонкий, минимизированный

jQuery Core 3.4.1 — несжатый, минимизированный, тонкий, тонкий, минимизированный

jQuery Core 3.4.0 — несжатый, минифицированный, тонкий, тонкий минифицированный

jQuery Core 3.3.1 — несжатый, минимизированный, тонкий, тонкий, минимизированный

jQuery Core 3.3.0 — несжатый, минимизированный, тонкий, тонкий минифицированный

jQuery Core 3.2.1 — несжатый, минимизированный, тонкий, тонкий, минимизированный

jQuery Core 3.2.0 — без сжатия, минимизированный, тонкий, тонкий, минимизированный

jQuery Core 3.1.1 — несжатый, минимизированный, тонкий, тонкий, минимизированный

jQuery Core 3. 1.0 — несжатый, минимизированный, тонкий, тонкий, минимизированный

jQuery Core 3.0.0 — несжатый, минифицированный, тонкий, тонкий минифицированный

jQuery Core — все версии 2.x

jQuery Core 2.2.4 — несжатый, минифицированный

jQuery Core 2.2.3 — несжатый, минифицированный

jQuery Core 2.2.2 — несжатый, минифицированный

jQuery Core 2.2.1 — несжатый, минифицированный

jQuery Core 2.2.0 — несжатый, минифицированный

jQuery Core 2.1.4 — несжатый, минифицированный

jQuery Core 2.1.3 — несжатый, минифицированный

jQuery Core 2.1.2 — несжатый, минифицированный

jQuery Core 2.1.1 — несжатый, минифицированный

jQuery Core 2.1.0 — несжатый, минифицированный

jQuery Core 2.0.3 — несжатый, минифицированный

jQuery Core 2.0.2 — несжатый, минифицированный

jQuery Core 2.0.1 — несжатый, минифицированный

jQuery Core 2.0.0 — несжатый, минифицированный

jQuery Core — все версии 1.
x

jQuery Core 1.12.4 — несжатый, минифицированный

jQuery Core 1.12.3 — несжатый, минифицированный

jQuery Core 1.12.2 — несжатый, минифицированный

jQuery Core 1.12.1 — несжатый, минифицированный

jQuery Core 1.12.0 — несжатый, минифицированный

jQuery Core 1.11.3 — несжатый, минифицированный

jQuery Core 1.11.2 — несжатый, минифицированный

jQuery Core 1.11.1 — несжатый, минифицированный

jQuery Core 1.11.0 — несжатый, минифицированный

jQuery Core 1.10.2 — несжатый, минифицированный

jQuery Core 1.10.1 — несжатый, минифицированный

jQuery Core 1.10.0 — несжатый, минифицированный

jQuery Core 1.9.1 — несжатый, минифицированный

jQuery Core 1.9.0 — несжатый, минифицированный

jQuery Core 1.8.3 — без сжатия, минифицированный

jQuery Core 1.8.2 — без сжатия, минифицированный

jQuery Core 1.8.1 — без сжатия, минифицированный

jQuery Core 1. 8.0 — несжатый, минифицированный

jQuery Core 1.7.2 — несжатый, минифицированный

jQuery Core 1.7.1 — несжатый, минифицированный

jQuery Core 1.7.0 — несжатый, минифицированный

jQuery Core 1.7.0 — несжатый, минифицированный

jQuery Core 1.6.4 — несжатый, минифицированный

jQuery Core 1.6.3 — несжатый, минифицированный

jQuery Core 1.6.2 — несжатый, минифицированный

jQuery Core 1.6.1 — несжатый, минифицированный

jQuery Core 1.6.0 — без сжатия, минифицированный

jQuery Core 1.5.2 — несжатый, минифицированный

jQuery Core 1.5.1 — несжатый, минифицированный

jQuery Core 1.5.0 — несжатый, минифицированный

jQuery Core 1.4.4 — несжатый, минифицированный

jQuery Core 1.4.3 — несжатый, минифицированный

jQuery Core 1.4.2 — несжатый, минифицированный

jQuery Core 1.4.1 — несжатый, минифицированный

jQuery Core 1.4.0 — несжатый, минифицированный

jQuery Core 1. 3.2 — несжатый, минифицированный, упакованный

jQuery Core 1.3.1 — несжатый, минифицированный, упакованный

jQuery Core 1.3.0 — несжатый, минифицированный, упакованный

jQuery Core 1.2.6 — несжатый, минифицированный, упакованный

jQuery Core 1.2.5 — несжатый, минифицированный, упакованный

jQuery Core 1.2.4 — несжатый, минифицированный, упакованный

jQuery Core 1.2.3 — несжатый, минифицированный, упакованный

jQuery Core 1.2.2 — несжатый, минифицированный, упакованный

jQuery Core 1.2.1 — несжатый, минифицированный, упакованный

jQuery Core 1.2.0 — несжатый, минифицированный, упакованный

jQuery Core 1.1.4 — несжатый, упакованный

jQuery Core 1.1.3 — несжатый, упакованный

jQuery Core 1.1.2 — несжатый, упакованный

jQuery Core 1.1.1 — несжатый, упакованный

jQuery Core 1.1.0 — несжатый, упакованный

jQuery Core 1.0.4 — несжатый, упакованный

jQuery Core 1. 0.3 — несжатый, упакованный

jQuery Core 1.0.2 — несжатый, упакованный

jQuery Core 1.0.1 — несжатый, упакованный

jQuery Core 1.0,0 — несжатый, упакованный

jQuery Migrate — все версии

jQuery Migrate 3.3.2 — без сжатия, минимизированный

jQuery Migrate 3.3.1 — несжатый, минифицированный

jQuery Migrate 3.3.0 — несжатый, минифицированный

jQuery Migrate 3.2.0 — несжатый, минифицированный

jQuery Migrate 3.1.0 — несжатый, минифицированный

jQuery Migrate 3.0.1 — несжатый, минифицированный

jQuery Migrate 3.0.0 — несжатый, минифицированный

jQuery Migrate 1.4.1 — несжатый, минифицированный

jQuery Migrate 1.4.0 — несжатый, минифицированный

jQuery Migrate 1.3.0 — несжатый, минифицированный

jQuery Migrate 1.2.1 — несжатый, минифицированный

jQuery Migrate 1.2.0 — несжатый, минифицированный

jQuery Migrate 1.1.1 — несжатый, минифицированный

jQuery Migrate 1.1.0 — несжатый, минифицированный

jQuery Migrate 1.0.0 — несжатый, минифицированный

js.jquery · PyPI

Скачать файлы

Загрузите файл для своей платформы.Если вы не уверены, что выбрать, узнайте больше об установке пакетов.

Файлы для js.jquery, версия 3.3.1

Имя файла, размер Тип файла Версия Python Дата загрузки Хеши

Имя файла, размер js.jquery-3.3.1-py2.py3-none-any.whl (301,9 КБ) Тип файла Колесо Версия Python py2.py3 Дата загрузки 20 марта 2018 г. Хеши Вид

Имя файла, размер js.jquery-3.3.1.tar.gz (300,2 КБ) Тип файла Источник Версия Python Никто Дата загрузки 20 марта 2018 г. Хеши Вид

Введение · Bootstrap v4.5

Начните работу с Bootstrap, самой популярной в мире платформой для создания адаптивных сайтов, ориентированных на мобильные устройства, с jsDelivr и начальной страницей шаблона.

Быстрый запуск

Хотите быстро добавить Bootstrap в свой проект? Используйте jsDelivr, бесплатную CDN с открытым исходным кодом. Используете менеджер пакетов или вам нужно скачать исходные файлы? Перейдите на страницу загрузок.

CSS

Скопируйте и вставьте таблицу стилей в ваш перед всеми другими таблицами стилей для загрузки нашего CSS.

JS

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

Поместите один из следующих
jQuery 3.x (без сжатия)

jQuery 2.x (минифицированный)

jQuery 2.x (без сжатия)

jQuery 1.x (минифицированный)

jQuery 1.x (без сжатия)

Версия 3.3.1, 3.2.1, 3.2.0, 3.1.1, 3.1.0, 3.0.0, 2.2.4, 2.2.3, 2.2.2, 2.2.1, 2.2.0, 2.1.4, 2.1.3, 2.1.1, 2.1.0, 2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.12.4, 1.12.3, 1.12.2, 1.12.1, 1.12.0, 1.11. 3, 1.11.2, 1.11.1, 1.11.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3

CDNJS CDN

Вы можете скачать ссылку jQuery CDN с веб-сайта jQuery CDNJS.

jQuery 3.x (без сжатия)

jQuery 3.x (уменьшено)

Как использовать библиотеку jQuery?

Библиотека jQuery в первую очередь включается в вашу веб-страницу после использования в функции jQuery. давайте посмотрим следующую структуру ...

Структура jQuery <сценарий> / * добавляем необходимый код javascript * / ... ...

Alpine.js: фреймворк JavaScript, который используется как jQuery, написан как Vue и вдохновлен TailwindCSS

У нас есть большие JavaScript-фреймворки, которые уже используются и нравятся множеству людей, включая React, Vue, Angular и Svelte.Нужна ли нам еще одна библиотека JavaScript? Давайте взглянем на Alpine.js, и вы сможете решить сами. Alpine.js предназначен для разработчиков, которые не хотят создать одностраничное приложение (SPA). Он легкий (~ 7 КБ в сжатом виде) и предназначен для написания клиентского JavaScript на основе разметки.

Синтаксис заимствован из директивы Vue и Angular. Это означает, что он будет вам знаком, если вы уже работали с ними раньше. Но, опять же, Alpine.js не предназначен для создания SPA, а скорее для улучшения ваших шаблонов с помощью небольших бит JavaScript.

Например, вот демонстрация интерактивного компонента оповещения Alpine.js.

Предупреждающее сообщение двусторонне привязано к входу с использованием x-model = "msg" . «Уровень» предупреждающего сообщения устанавливается с помощью реактивного свойства level . Предупреждение отображается, когда и msg , и level имеют значение.

Это похоже на замену jQuery и JavaScript, но с декларативным рендерингом

Alpine.js представляет собой версию с добавлением шаблонов Vue, заменяющую для jQuery и ванильного JavaScript, а не конкурента React / Vue / Svelte / WhateverFramework .

Поскольку Alpine.js меньше года, он может делать предположения о DOM API, которых не может jQuery. Давайте вкратце проведем сравнение между ними.

Запрос против привязки

Большая часть размеров и функций jQuery представлена в виде уровня кроссбраузерной совместимости с императивными API-интерфейсами DOM - обычно это называется jQuery Core и спортивными функциями, которые могут запрашивать DOM и управлять им.

Ответ Alpine.js для ядра jQuery - это декларативный способ привязки данных к DOM с помощью директивы привязки атрибутов x-bind .Его можно использовать для привязки любого атрибута к реактивным данным в компоненте Alpine.js. Alpine.js, как и его современные библиотеки декларативных представлений (React, Vue), предоставляет x-ref в качестве аварийного выхода для прямого доступа к элементам DOM из кода компонента JavaScript, когда привязки недостаточно (например, при интеграции сторонней библиотеки. который необходимо передать узлу DOM).

Обработка событий

jQuery также предоставляет способ обработки, создания и запуска событий. Alpine.js предоставляет директиву x-on и магическое значение $ event , которое позволяет функциям JavaScript обрабатывать события.Для запуска (настраиваемых) событий Alpine.js предоставляет магическое свойство $ dispatch , которое представляет собой тонкую оболочку над API-интерфейсами событий браузера и диспетчера событий.

Эффекты

Одна из ключевых особенностей jQuery - это его эффекты, или, скорее, способность писать простые анимации. Там, где мы могли бы использовать свойства slideUp , slideDown , fadeIn , fadeOut в jQuery для создания эффектов, Alpine.js предоставляет набор директив x-transition , которые добавляют и удаляют классы на протяжении всего перехода элемента.Это во многом вдохновлено Vue Transition API.

Кроме того, Ajax-клиент jQuery не имеет предписывающего решения в Alpine.js благодаря API Fetch или использованию сторонней HTTP-библиотеки (например, axios, ky, superagent).

Плагины

Также стоит вызвать плагины jQuery. В экосистеме Alpine.js (пока) нет сравнения с этим. Совместное использование компонентов Alpine.js относительно просто, обычно требуется простое копирование и вставка. JavaScript в Alpine.Компоненты js являются «просто функциями» и не имеют доступа к самому Alpine.js, что делает их относительно простыми для совместного использования, включая их на разных страницах с помощью тега script . Любые магические свойства добавляются при инициализации Alpine или передаются в привязки, например $ event в привязках x-on .

В настоящее время нет примеров расширений Alpine.js, хотя есть несколько проблем и запросов на добавление «основных» событий, которые подключаются к Alpine.js из других библиотек.Также ведутся дискуссии о возможности добавлять собственные директивы. Позиция создателя Alpine.js Калеба Порцио, похоже, основывает решения API на API Vue, поэтому я ожидаю, что любая будущая точка расширения будет вдохновлена тем, что предоставляет Vue.js.

Размер

Alpine.js легче, чем jQuery: минимизированный размер 21,9 КБ - сжатый сжатие 7,1 КБ - по сравнению с jQuery с минимизированным размером 87,6 КБ - 30,4 КБ минимизированным и сжатым с помощью gzip. Всего 23% размера!

Скорее всего, из-за способа Alpine.js фокусируется на предоставлении декларативного API для DOM (например, привязки атрибутов, прослушивателей событий и переходов).
Bundlephobia разбивает два
. Для сравнения, Vue имеет минимизированный размер 63,5 КБ (22,8 КБ в сжатом виде). Как может Alpine.js стать легче, несмотря на то, что его API эквивалентен Vue? Alpine.js не реализует виртуальную модель DOM. Вместо этого он напрямую изменяет DOM, предоставляя тот же декларативный API, что и Vue.

Давайте посмотрим на пример

Alpine компактен, поскольку код приложения декларативен по своей природе и объявляется с помощью шаблонов.Например, вот страница поиска Pokemon с использованием Alpine.js:
.
В этом примере показано, как компонент настраивается с использованием x-data и функции, которая возвращает исходные данные компонента, методы и x-init для запуска этой функции при загрузке.

Привязки и прослушиватели событий в Alpine.js с синтаксисом, поразительно похожим на шаблоны Vue.

Alpine: x-bind: attribute = "express" и x-on: eventName = "expression" , сокращенно : attribute = "expression" и @ eventName = "expression" соответственно

Vue: v-bind: attribute = "express" и v-on: eventName = "expression" , сокращение: : attribute = "expression" и @ eventName = "expression" соответственно

Списки рендеринга достигаются с помощью x-for для элемента шаблона и условного рендеринга с x-if для элемента шаблона .
Обратите внимание, что Alpine.js не предоставляет полный язык шаблонов, поэтому нет синтаксиса интерполяции (например, {{myValue}} в Vue.js, Handlebars и AngularJS). Вместо этого привязка динамического содержимого выполняется с помощью директив x-text и x-html (которые напрямую сопоставляются с базовыми вызовами Node.innerText и Node.innerHTML ). Эквивалентный пример с использованием jQuery - это упражнение, которое вы можете выполнить, но классический стиль включает в себя несколько шагов: Императивно привязать к нажатию кнопки с помощью $ («кнопка»).нажмите (/ * обратный вызов * /) . В рамках этого «обратного вызова щелчка» получить входное значение из DOM, а затем использовать его для вызова API. После завершения вызова DOM обновляется новыми узлами, сгенерированными из ответа API. Если вас интересует параллельное сравнение одного и того же кода в jQuery и Alpine.js, Алекс Юстесен создал один и тот же счетчик символов в jQuery и в Alpine.js. Снова в моде: инструменты, ориентированные на HTML Альпийский.js черпает вдохновение в TailwindCSS. Введение Alpine.js в репозиторий называется «Попутный ветер для JavaScript». Почему это важно? Одним из преимуществ Tailwind является то, что он «предоставляет низкоуровневые служебные классы, которые позволяют создавать полностью индивидуальные проекты, не покидая своего HTML». Именно этим занимается Alpine. Он работает внутри HTML, поэтому нет необходимости работать внутри шаблонов JavaScript, как в Vue или React. Многие примеры Alpine, цитируемые в сообществе, даже не используют теги скриптов! Давайте рассмотрим еще один пример, чтобы показать разницу.Вот доступное меню навигации в Alpine.js, в котором вообще не используются теги скриптов. В этом примере используется aria-labelledby и aria-control вне Alpine.js (с идентификатором и ссылками). Alpine.js гарантирует, что элемент «toggle» (который является кнопкой) имеет атрибут aria-extended , который равен true , когда навигация развернута, и false , когда она свернута. Эта привязка aria-extended также применяется к самому меню, и мы показываем / скрываем в нем список ссылок, привязывая к hidden . Ориентация на разметку означает, что примерами Alpine.js и TailwindCSS легко поделиться. Все, что для этого требуется, - это копирование и вставка в HTML, на котором также работает Alpine.js / TailwindCSS. Никаких сумасшедших каталогов, полных шаблонов, которые компилируются и отображаются в HTML! Поскольку HTML является фундаментальным строительным блоком сети, это означает, что Alpine.js идеально подходит для расширения серверных (Laravel, Rails, Django) или статических сайтов (Hugo, Hexo, Jekyll). Интегрировать данные с помощью такого рода инструментов можно просто, достаточно вывести часть JSON в привязку x-data = "{}" .Возможность передачи некоторого количества JSON из вашего внутреннего / статического шаблона сайта прямо в компонент Alpine.js позволяет избежать создания «еще одной конечной точки API», которая просто обслуживает фрагмент данных, необходимых для виджета JavaScript. На стороне клиента без этапа сборки Alpine.js - это , разработанный для использования в качестве прямого скрипта, включаемого из общедоступного CDN. Его опыт разработчиков специально для этого. Вот почему он представляет собой отличное сравнение и замену jQuery: он добавлен и исключает этап сборки. Хотя это обычно не используется таким образом, связанная версия Vue может быть связана напрямую. У Сары Драснер есть отличная статья, в которой показаны примеры замены jQuery на Vue. Однако, если вы используете Vue без этапа сборки, вы активно отказываетесь от: Vue CLI однофайловые компоненты меньшие / более оптимизированные пакеты строгий CSP (политика безопасности контента), поскольку встроенные шаблоны Vue оценивают выражения на стороне клиента Итак, да, в то время как Vue может похвастаться реализацией без сборки, его опыт разработчиков действительно зависит от Vue CLI.Это можно сказать о приложении Create React для React и Angular CLI. Отказ от сборки лишает эти каркасы их лучших качеств. Вот и все! Alpine.js - это современная библиотека, ориентированная на CDN, которая обеспечивает декларативный рендеринг для небольшой полезной нагрузки - и все это без этапа сборки и шаблонов, которые требуются другим фреймворкам. В результате получился подход, ориентированный на HTML, который не только напоминает современный jQuery, но и является его отличной заменой. Если вы ищете замену jQuery, которая не заставит вас переходить на архитектуру SPA, выберите Alpine.js вперед! Заинтересованы? Вы можете узнать больше на Alpine.js Weekly, бесплатном еженедельном обзоре новостей и статей Alpine.js. Индекс / wp-includes / js / jquery 50 50 -03-15 13:33 Имя Последнее изменение Размер Описание Родительский каталог - 23K jquery-migrate.min.js 2019-03-15 13:33 9.8K jquery.color.min.js 2019-03-15 13:33 9.1K jquery.form.js 2019-03-15 13:33 40K jquery.form.min.js 2019-03-15 13:33 16K jquery.hotkeys.js 2019-03-15 13:33 5.5K jquery.hotkeys.min.js 2019-03-15 13:33 1.8K jquery.js 2019-09-04 20:37 95K jquery.masonry.min.js 2019-03-15 13:33 1.8K jquery.query.js 2019-03-15 13:33 3.7K jquery.schedule.js 2019-03-15 13:33 3.4K jquery.serialize-obj ..> 2019-03-15 13:33 783 jquery.table-hotkeys.js 2019-03-15 13:33 3.6K jquery.table-hotkeys ..> 2019-03-15 13:33 2.2K jquery.ui.touch-punc ..> 2019-03-15 13:33 1.2K offer.js 2019-03-15 13:33 6.8K offer.min.js 2019-03-15 13:33 2,9K ui / 2019-03-15 13:33 - Индекс / wp-js / js / wp-включает / js 50 Имя Последнее изменение Размер Описание Родительский каталог - ratejs 2020-12-08 21:34 25K jquery-migrate.min.js 2020-12-08 21:34 11K 17 jquery.color.min.js 2019-11-12 21:34 9,1K jquery.form.js 2019-08-28 11:15 40K jquery.form.min.js 2021-02-03 21:37 16K jquery.hotkeys.js 2019-08-28 11:15 5.5K jquery.hotkeys.min.js 2019-08-28 11:15 1,8K jquery.js 2020-12-08 21:34 jquery.masonry.min.js 2019-08-28 11:15 1.8K jquery.min.js 2020-12-08 21:34 87K jquery.query.js 2019-08-28 11:15 3,7K jquery.schedule.js 2019-08-28 11:15 3,4K jquery.serialize-obj ..> 2019-08-28 11:15 783 jquery.table-hotkeys.js 2019-08-28 11:15 3.6K jquery.table-hotkeys ..> 2019-08-28 11:15 2.2K jquery.ui.touch-punc ..> 2019- 08-28 11:15 1.2K советую.js 2019-08-28 11:15 6,8 К ui / 2020-12-08 21:34 - .