Для чего нужен jquery: Что такое jQuery? Как его скачать и подключить к сайту?

Нужен ли вам jQuery? По полочкам. Сниппеты You Don’t Need jQuery / VSC, Sublime Text

Всем привет, друзья! Сообщество веб-разработчиков в последнее время разрывает дикий баттхерт относительно того, стоит ли использовать jQuery в своей работе. Одни топят за то, что нужно использовать эту библиотеку во всех проектах без исключения, другие не могут понять, что вообще происходит и продолжают делать то, что делали раньше. Третьи, чтобы не отрываться от коллектива, осваивают последний ECMAScript, всячески открещиваются от jQuery и бомбят при любом упоминании этой библиотеки. Сегодня мы разберемся в вопросе более подробно, без крайностей и максимализма.

Поделиться

Твитнуть

Поделиться

Класснуть

Запинить

Полезные ресурсы урока:

В конце выпуска мы познакомимся с коллекцией сниппетов You Don’t Need jQuery, которую я подготовил для редакторов Visual Studio Code и Sublime Text. Эта коллекция послужит отличным помощником, если вы вдруг проснулись и поняли, что жизнь слишком проста и нужно писать код исключительно на ванильном JS. Кроме того, в грядущем большом курсе Джедай верстки 8, в качестве академического примера, мы будем верстать без использования jQuery, на чистом JS и представленная коллекция будет очень кстати.

jQuery – это самая популярная в мире JS библиотека, позволяющая значительно упростить процесс взаимодействия с элементами DOM, а также предоставляющая удобный API для работы с событиями и AJAX.

Здесь я не буду защищать ни одну из сторон, так как это бессмысленно. Это не конкуренция и сокращение «vs» (versus) ставить между jQuery и нативным JS просто некорректно. Когда надо, я использую jQuery, когда не надо, не использую. jQuery — это инструмент, созданный для того, чтобы максимально сократить время разработки. Здесь я даже не говорю о краткости записи, ведь нативный JS не стоит на месте, стандарты ES развиваются и нативный код становится короче. Дело не в этом.

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

Но, давайте по-порядку рассмотрим все аргументы «за» и «против» использования jQuery, а затем перейдем к примерам проектов, в которых целесообразно использовать эту библиотеку.

Аргументы в пользу jQuery

1. Кроссбраузерность. jQuery учитывает особенности работы со всеми возможными браузерами (с поддержкой JS, конечно-же), имеет все необходимые фолбеки и запасные варианты реализации. Ваш код будет работать везде. В противовес, НЕ использование jQuery потребует от вас больше временных затрат и усилий для написания и тестирования вашего кода.
2. Вариативность. Функции jQuery включают огромное количество вариантов и возможностей использования, что делает их максимально универсальными и лаконичными. Использование ванильного JS предполагает написание намного большего количества кода, условий и проверок для реализации аналогичного функционала, даже если речь идет о какой-то специфической задаче, где не требуется особая универсальность.
3. Расширения. Тысячи готовых плагинов, расширений, примеров, сниппетов готовы к использованию. Вам не придется писать свой велосипед для решения типовой задачи. Можно сказать, что это самое важное преимущество jQuery. Писать плагины для jQuery также легко, как писать любой другой код с использованием этой библиотеки. Именно поэтому jQuery так нравится многим веб-разработчикам. Сейчас можно найти абсолютно любой плагин, который поможет быстро решить любую задачу в условиях коммерческого проекта. А в заказной разработке, если вы фрилансер или студия, время — деньги.
4. Сообщество. Огромное количество уроков, примеров кода, решений на сайтах QA. Можно очень быстро найти решение любой задачи, моментально найти ответ на любой вопрос и продолжить работу.
5. Краткость записи. Нативный JS, не смотря на свое развитие, пока что не может предложить такие-же возможности краткой записи. jQuery – это простой, лаконичный код, понятный даже начинающим и довольно простой в изучении.
6. CMS. Практически все популярные CMS, такие, как OpenCart, Joomla, WordPress, используют библиотеку jQuery. Это огромный плюс, ведь возможности этой библиотеки как во фронтенде, так и в бэкенде любой CMS, как правило, реализованы по максимуму и вопроса — подключать jQuery для десяти кастомных строк кода или нет, не стоит. Пользуйтесь в свое удовольствие.

Аргументы против jQuery

1. Библиотека jQuery загружается в проект как дополнительный ресурс. Можно много спорить относительно того, стоит ли загружать файл, весом 100кб к проекту, чтобы написать всего 5 строчек кода, в то время, когда каждая из картинок на странице весит гораздо больше, а их там, на минуточку, могут быть сотни. Также, следует учитывать и все подключенные плагины, сниппеты и другие ресурсы, использующие jQuery, чтобы понять целесообразность подключения библиотеки.

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

Само по себе понятие «библиотека» в программировании довольно простое для понимания. В процессе работы с каким-либо языком программирования, разработчики сталкивались с определенными задачами, однотипными проблемами, решения которых в результате были объединены в библиотеки для удобного повторного использования. Отсюда и возникают все плюсы и минусы использования библиотек. Плюс — проверенный код на любой случай жизни, минус — много того, что не используется здесь и сейчас также подтягивается в проект.

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

Использовать или не использовать jQuery?

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

Вообще, jQuery можно использовать практически в любых проектах, если вы уверены, что будет задействована достаточная часть библиотеки и не используется какой-либо JS-фреймворк. Конечно, никто не запретит подключить библиотеку к проекту и написать пресловутые 5 строк кода. Осудить вас может, пожалуй, только вышеупомянутый кодер-перфекционист, если случайно заглянет в ваши исходники. Ему лучше на глаза не попадаться, чтобы не случился очередной приступ паранойи и неконтролируемого гнева. А если серьезно, то в таких случаях библиотеку можно и не использовать, а посмотреть вариант решения задачи в сниппетах для редакторов кода, которые я подготовил к данному выпуску (см. Полезные ресурсы урока).

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

В настоящее время огромное количество контентных проектов, крупных СМИ, коммерческих сайтов и многих известных ресурсов используют jQuery, так как функционал этой библиотеки достаточен и значительная его часть реализована. Это и есть основные критерии грамотного использования любого ресурса.

Коллекция сниппетов для Visual Studio Code и Sublime Text.

Для того, чтобы облегчить написание нативного JS, если до этого вы использовали только jQuery, я подготовил коллекцию сниппетов для редакторов Visual Studio Code и Sublime Text, основанную на популярных примерах You Don’t Need jQuery (см. Полезные ресурсы урока). Сниппеты устанавливаются и работают с редакторами кода штатным образом. В коде каждого сниппета есть закомментированный пример, написанный с использованием jQuery и его альтернатива в нативном исполнении:

Установка в Sublime Text

Для установки сниппетов в редактор Sublime Text достаточно скачать архив с GitHub и распаковать папку «YDNjQ — Sublime Text Snippets» в директорию «ПОЛЬЗОВАТЕЛЬ \ AppData \ Roaming \ Sublime Text 3 \ Packages \ User», которую можно открыть из редактора: Меню «Preferences > Browse Packages…», затем перейти в папку User:

Установка в Visual Studio Code

Процесс установки сниппетов в кодовый редактор Visual Studio Code не на много сложнее. Скачиваем тот-же самый архив с GitHub и выгружаем содержимое папки «YDNjQ — Visual Studio Code Snippets» в папку «ПОЛЬЗОВАТЕЛЬ \ AppData \ Roaming \ Code \ User \ snippets». Обратите внимание, что необходимо выгрузить именно содержимое папки «YDNjQ — Visual Studio Code Snippets», то-есть весь список файлов:

После установки сниппеты доступны по ключевым словам jQuery-функций. Например, «hide», «fade», «load» и т. д. Для использования в Sublime Text достаточно набрать нужное сокращение и нажать Tab, или нажав Ctrl+Shift+P, ввести ключевое слово и выбрать нужный сниппет с префиксом YDNjQ. В редакторе Visual Studio Code достаточно нажать F1 > Insert Snippet, ввести ключ сниппета и выбрать нужный.

И в заключение. Хотите использовать jQuery или какую-либо другую библиотеку в вашем проекте — используйте на здоровье. Грамотно и рационально.

Премиум уроки от WebDesign Master

Другие уроки по теме «jQuery»

Неужели jQuery вреден?

Прежде чем начать, позвольте сказать, что мы считаем, что библиотека jQuery сделала очень много для развития Интернета. Она дала разработчикам возможность делать вещи, которые раньше были немыслимы, и подтолкнула производителей браузеров к реализации подобных вещей естественным способом (без jQuery у нас, вероятно, не было бы сейчас такого метода, как document.querySelectorAll). При этом jQuery по-прежнему необходима тем, кто не может зависеть от вкусностей, которые у нас есть на сегодняшний день, а вынужден поддерживать такие реликты прошлого, как IE8 или же еще что похуже.

Однако, несмотря на все наше сочувствие этим беднягам, они все же в меньшинстве. Есть множество разработчиков, которым не нужно поддерживать старые браузеры с небольшой долей рынка. И давайте не будем забывать о тех, кто вообще не является профессиональным веб-разработчиком: для их целей зачастую все возможности jQuery вообще излишни! При этом в настоящее время стало возможным решить такие задачи средствами браузера. Тем не менее, не только это является причиной не использовать jQuery.

Возможно, вам и в самом деле не нужна эта библиотека.

..

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

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

… но и это не самая главная причина не использовать jQuery сегодня

Чтобы избежать расширения прототипов нативных элементов, jQuery использует свои собственные объекты-обертки. Дело в том, что в прошлом расширение нативных объектов было большим табу не только из-за потенциальных коллизий, но и из-за утечек памяти в старых IE.

Таким образом, при выполнении, например, команды $(«div») возвращается не ссылка на элемент или набор NodeList, а объект jQuery. Это означает, что объект jQuery имеет совершенно иные методы, чем ссылка на элемент DOM, массив с элементами или любой тип NodeList. Тем не менее, эти нативные объекты все время появляются в реальном коде. Насколько бы jQuery ни пытался абстрагироваться от них, вам всегда приходится иметь с ними дело, даже если вы просто оборачиваете их в конструкцию $(). Например, контекст обратного вызова в jQuery методе .bind() является ссылкой на элемент HTML, а не на набор jQuery. Не говоря уже о том, что часто нужно использовать код от нескольких источников — одни из них предполагают использование jQuery, а другие нет. Следовательно, вы получаете код, в котором перемешаны объекты jQuery, нативные элементы и наборы NodeList. И вот здесь и начинается настоящая вакханалия.

Если разработчик следовал соглашению об именах, по которому переменные содержат объекты jQuery (с добавлением знака доллара) и нативные элементы, это будет меньшей из проблем (люди часто забывают придерживаться таких соглашений, но давайте возьмем идеальные условия). В большинстве же случаев такие соглашения соблюдается довольно редко, и это приводит к тому, что код невероятно трудно понять всякому, кто не участвовал в его написании. И внесение любой правки влечет за собой дополнительные ошибки и эксперименты («О, это не объект jQuery, я должен обернуть его в $()!» или «О, это не элемент, я должен использовать ячейку массива [0], чтобы получить элемент!»). Чтобы избежать подобной путаницы, разработчики, которые вносят изменения в код, часто в качестве защиты в конце концов все подряд оборачивают в $(), в результате во всем коде одна и та же переменная будет проходить через $() много раз. По этой же причине становится особенно трудно реорганизовать jQuery из указанного кода. По сути вы запираете себя со всех сторон.

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

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

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

Прагматичный путь к чистому JS

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

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

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

А помимо всего этого, если вам действительно нравится jQuery API, но вы хотите избежать раздувания кода, обратите внимание на библиотеку Zepto.

Как отказаться от 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»

Введение. Начало работы · Bootstrap. Версия v4.0.0

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

Быстрый старт

Хотите использовать Bootstrap в своем проекте? Bootstrap – библиотека шаблонов CSS, распространяемая свободно командой сайта MaxCDN. Нужна система управления пакетами или исходники Bootstrap? Посетите страницу загрузок.

CSS

Вставьте этот кусок кода в <head>, перед всеми прочими файлами CSS, для загрузки Bootstrap.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

JS

Многие из наших компонентов требуют использования JavaScript. Точнее — им требуются jQuery, Popper.js и наши собственные плагины. Для активации плагинов разместите следующий кусок кода <script> в конце страниц, прямо перед закрывающим </body>. Сперва jQuery , потом Popper.js, потом наши.

Мы используем мини-сборку jQuery, но и полную можно использовать.

<script src="https://code. jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh5U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Любопытно, какие компоненты явно требуют jQuery, наших JS и Popper.js? Нажмите ссылку «Показать компоненты» ниже. Если вы не уверены в том, как правильно написать «коренную» структуру страницы, можете использовать наши шаблоны.

Показать компоненты, требующие JavaScript

• Уведомления отмены
• Кнопки изменения состояний и чекбоксов/»радио»
• Карусель для поведения «слайд», элементы контроля и индикаторы
• Коллапс для изменения видимости содержимого
• Выпадающие элементы для отображения и расположения (также требует Popper. js)
• Модальные окна для отображения, расположения и создания поведения прокрутки
• Навбар для расширения нашего плагина коллапса для придания отзывчивого поведения
• Выплывающие подсказки и окна для отображения и расположения (также требует Popper.js)
• Отслеживание прокрутки и обновления навигации

Начальный шаблон страницы

Удостоверьтесь, что ваши страницы сверстаны по новейшим стандартам. Они должны включать и использовать HTML5 doctype и viewport meta tag для правильного «отзывчивого» поведения страниц. Вот как должен выглядеть «верхний», коренной код страницы:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn. bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h2>Hello, world!</h2>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh5U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

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

Важные глобальные атрибуты

Bootstrap включает некоторые глобальные стили и настройки, о которых вам необходимо знать при работе с ним; все эти стили и настройки почти полностью имеют дело с и «заточены» под нормализацию кроссбраузерных стилей.

HTML5 doctype

Bootstrap требует использования doctype «HTML5». Без него у вас возникнут некоторые проблемы со стилями.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

«Отзывчивый» мета-тэг

Bootstrap разрабатывался как mobile first, т.е. его настройки прежде всего оптимизированы под мобильные устройства, а уж потом с помощью медиа-запросов мы подгоняем масштаб компонентов как нам необходимо на прочих устройствах. Вставьте этот кусок кода в <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Вы можете посмотреть пример этого в действии на странице starter template.

Размер ширины и высоты элемента

Для большей простоты масштабирования в CSS мы изменяем глобальное значение box-sizing с content-box на border-box. Это гарантирует, что padding не будет влиять на конечную вычисленную ширину элемента; однако может создать проблемы для сторонних приложений, таких как Google Maps или поисковой движок Google.

В том редком случае, когда вам надо преодолеть эти возможные баги, делайте так:

.selector-for-some-widget {
  box-sizing: content-box;
}

С использованием фрагмента кода, приведенного выше, вложенные элементы – включая сгенерированный через :before и :after контент – будут все наследовать заданный box-sizing для класса .selector-for-some-widget.

Узнайте больше о блоковой модели и параметризации размеров на CSS Tricks.

«Ребут» (новая библиотека CSS, не использующая классов, обеспечивающая «модульный подход»)

Для улучшенной кроссбраузерной визуализации мы применили «Ребут», обеспечивающий более продвинутые «сбросы стилей» для элементов HTML для коррекции мелких багов в браузерах и девайсах.

Оставайтесь в курсе последних новостей Bootstrap и вливайтесь в сообщество Bootstrap с помощью этих ресурсов:

• @getbootstrap on Twitter.
• The Official Bootstrap Blog.
• the official Slack room.
• Чат с камрадами по Bootstrap. Канал ##bootstrap на сервере irc.freenode.net.
• Помощь в реализации Bootstrap 4 на Stackoverflow bootstrap-4).
• При разработке через npm или аналогичные депозитарии, разработчикам следует использовать ключевое слово bootstrap в своих пакетах и библиотеках для максимальной видимости.

Вы также можете присоединиться @getbootstrap on Twitter для получения «свежайших» слухов и классных музыкальных клипов.

Bootstrap: что это такое и как его установить

Bootstrap — бесплатный HTML/CSS/JavaScript фреймворк для быстрого создания адаптивного дизайна сайта. У разработчиков к нему неоднозначное отношение. С одной стороны, Bootstrap позволяет с минимальными знаниями создавать интерфейсы, которые работают во всех популярных браузерах и не ломаются при изменении разрешения экрана. С другой стороны, фреймворк тащит в проект кучу ненужного кода, который увеличивает вес сборки.

Что нужно знать о Bootstrap перед началом работы

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

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

Какую версию Bootstrap выбрать?

Последняя стабильная версия — 4.5.0. Ее и стоит использовать. Сетка в ней построена на Flexbox, это достаточно распространенная технология. Сервис Can I Use показывает, что верстка на флексах поддерживается всеми современными версиями браузеров. Частичная поддержка есть в Internet Explorer 10 и 11. 

В третьей версии Bootstrap сетка построена на Float. Это устаревшая технология, которая не дает такой гибкости, как Flexbox. Зато на флоатах можно верстать для старых браузеров, вплоть до Internet Explorer 6. Если вашему проекту нужна такая поддержка (вряд ли), то используйте Bootstrap 3. 4.1.

В июне 2020 года появилась новость о выпуске Bootstrap 5 alpha. Когда из нее сделают стабильную версию — непонятно. Но есть несколько моментов, о которых нужно знать всем, кто работает или собирается работать с фреймворком.

• В пятой версии не будет поддержки Internet Explorer. 
• Из Bootstrap пропадет библиотека jQuery, с помощью которой в предыдущих версиях реализовывалось большинство возможностей JavaScript.

Радует, что фреймворк развивается. Разработчики обещают, что в пятой версии будет более быстрый JavaScript, меньшее количество зависимостей, улучшенные API. Но пока она находится на стадии альфа-тестирования, мы будем пользоваться последней стабильной сборкой — Bootstrap 4.5.1.

Как установить Bootstrap

Установить Bootstrap можно несколькими способами:

• Подключить компилированные файлы c помощью BootstrapCDN.
• Скачать скомпилированные файлы CSS и JS, подключить их к проекту через ссылки и верстать. Это отличный вариант для того, чтобы познакомиться с фреймворком.
• Скачать исходные файлы. Эта сборка удобнее для верстки, потому что позволяет гибко кастомизировать компоненты. Однако она требует использования дополнительных инструментов: компилятора Sass и постпроцессоров. 
• Установить исходники через npm, yarn, RubyGems, Composer, NuGet.

Мы не будем подробно рассматривать все способы — они описаны в документации Bootstrap. Вот версия на русском языке. Она обновляется немного позже официальной инструкции на английском, но порядок установки не меняется годами, так что вся информация актуальна.

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

Самый простой метод установки — подключение через BootstrapCDN. Вам не нужно скачивать файлы в проект. Просто создайте шаблон HTML и разместите внутри него ссылку на фреймворк.

Код может быть таким:

<!DOCTYPE html>

<html lang="ru">

<head>

     <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Эта ссылка загружает с CDN все необходимые файлы Bootstrap -->

    <link rel="stylesheet" href="https://stackpath. bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

</head>

<body>

    <h2>Привет, мир!</h2>

    <!-- Перед закрывающим тегом <body> подключаем jQuery, Popper и Bootstrap JS, чтобы работали интерактивные компоненты  -->     

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous" ></script>

</body>

</html>

Еще один простой способ установки — скачивание скомпилированных файлов. Внутри архива (его нужно распаковать) две папки: css и js. 

В папке css — файлы стилей. 

• bootstrap.css — стили фреймворка. Файл bootstrap.min.css — минифицированная версия.
• bootstrap-grid.css — сетка Bootstrap. Файл bootstrap-grid.min.css — минифицированная версия.
• bootstrap-reboot.css — нормализатор Bootstrap, устанавливающий базовые стили, чтобы во всех браузерах верстка смотрелась одинаково. Файл bootstrap-reboot.min.css — минифицированная версия.

В папке js — файлы для работы JavaScript.

• bootstrap.bundle.js — компилированные файлы JavaScript с Popper (плагином всплывающих подсказок). Файл bootstrap.bundle.min.js — минифицированая версия.
• bootstrap.js — компилированные файлы JavaScript без Popper. Файл bootstrap.js — минифицированая версия.

В четвертой версии Bootstrap для работы с JavaScript требуется библиотека JQuery. Она подключается перед Bootstrap JS. 

Файл проекта index. html, к которому мы будем подключать Bootstrap, нужно разместить в той же директории, что и подключаемые файлы CSS и JavaScript.

Код шаблона может быть таким:

<!DOCTYPE html>

<html lang="ru">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="css/bootstrap.css" >

</head>

<body>

    <h2>Привет, мир!</h2>

    <!-- Сначала подключаем библиотеку JQuery, затем — Bootstrap JS -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <script src="js/bootstrap.js"></script>    

</body>

</html>

Обратите внимание — я подключил не минифицированные файлы (с суффиксом min), а обычные. Так удобнее работать со стилями и скриптами. Однако на рабочем проекте нужно использовать минифицированные версии — они меньше весят и обеспечивают более быструю загрузку страницы. После редактирования стилей вам нужно самостоятельно минифицировать файл, заменив шаблонную версию.

Начинаем верстать с помощью Bootstrap

Для работы с Bootstrap нужен текстовый редактор и браузер, в котором вы будете видеть результат верстки с помощью фреймворка.

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

Допустим, я хочу быстро собрать слайдер. В примерах есть карусель. Внутри папки — два файла: index.html и carousel.css. Я открываю их в редакторе и исправляю так, как мне нужно. 

Например, в моей карусели будет не три карточки, а пять. Для этого достаточно в файле index.html добавить еще два компонента. 

Изначально карусель выглядит вот так.

Открываем файл index.html через любой текстовый редактор (я предпочитаю Visual Studio Code) и начинаем его править. 

Находим в коде карусель. Вот она:

<div data-ride="carousel">

Добавляем в список с классом carousel-indicators два элемента с номерами 3 и 4. Они нужны для того, чтобы в карусели отображалось пять кнопок переключения между слайдами. 

Далее находим блок слайда с классом carousel-item. Копируем все, что находится внутри, и вставляем в конце.

Дальше мы можем редактировать слайды так, как нравится: переписать заголовки и описания, добавить фоновое изображение или изменить цвет, настроить шрифт и отступы, изменить высоту контейнера. Все стили доступны в файле carousel.css.

Вся работа заняла пару минут. При этом компоненты имеют адаптивный дизайн. Вам не нужно настраивать даже медиа-запросы — они уже прописаны в исходных файлах Bootstrap. Такой подход позволяет значительно сэкономить время на верстку.

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

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

javascript — Microsoft CDN для jQuery или Google CDN?

Обновление на основе комментариев:

Короткая версия: Это не имеет большого значения, но это может зависеть от того, что они размещают. Все они размещают разные вещи: Google не размещает jQuery.Validate, Microsoft не размещает jQuery-UI, с 2016 года они делают !!, Microsoft предлагает свои сценарии, которые в противном случае будут обслуживаться через ScriptResource. axd, и более простую интеграцию (например, ScriptManager с ASP.Net 4. ).

Важное примечание: Если вы создаете приложение для интрасети, держитесь подальше от подхода CDN. Неважно, кто его размещает, если только вы не находитесь на очень перегруженном внутреннем сервере, ни один CDN не даст вам большей производительности, чем локальные 100 МБ/1 ГБ Ethernet будет. Если вы используете CDN для строго внутреннего приложения, вы снижаете производительность . Установите правильные заголовки срока действия кэша и игнорируйте CDN, существующие в сценарии только для интрасети.

Вероятность того, что кто-либо из них заблокирован, примерно одинакова, почти равна нулю. Я работал над контрактами, где это не так, но, похоже, это исключение. Кроме того, с момента первоначальной публикации этого ответа, контекст, окружающий его, сильно изменился, Microsoft CDN добилась большого прогресса.

Проект, в котором я сейчас работаю, использует оба CDN, которые лучше всего подходят для нашего решения. Несколько факторов играют в этом. Пользователи с более старым браузером по-прежнему, вероятно, делают 2 одновременных запроса на домен в соответствии с рекомендацией спецификации HTTP . Это не проблема для тех, кто запускает что-то прилично новое, что поддерживает конвейерную обработку (каждый текущий браузер), но на основе другого фактора мы также выбиваем это ограничение, по крайней мере, насколько JavaScript ,.

CDN от Google, который мы используем для:

CDN от Microsoft, который мы используем для:

Наш сервер:

• Combined.js? V = 2.2.0.6190 (Major.Minor.Iteration.Changeset)

Поскольку часть нашего процесса сборки объединяет и минимизирует весь пользовательский JavaScript, мы делаем это с помощью специального менеджера сценариев, который включает в себя выпуск или отладочную (не минимизированную) версию этих сценариев в зависимости от сборки. Так как Google не размещает пакет проверки jQuery, это может быть недостатком. MVC включает/использует это в своем выпуске 2. 0, так что вы можете полностью положиться на CDN Microsoft для всех ваших потребностей и все это автоматически через ScriptManager .

Единственным другим аргументом, который нужно сделать, будет время DNS, это связано с быстротой загрузки страницы. В среднем: Просто потому, что он используется больше (он использовался дольше) ajax.googleapis.com, вероятно, будет возвращен DNS раньше, чем ajax.Microsoft.com, просто потому, что локальный DNS-сервер было больше шансов получить запрос на это (это первый пользователь в области штраф). Это очень незначительная вещь, и ее следует учитывать только в том случае, если производительность чрезвычайно важна, вплоть до миллисекунды.
(Да: я понимаю, что этот момент противоречит моему использованию обоих CDN, но в нашем случае время DNS намного затмевается временем ожидания возникающей javascript/блокировки)

И наконец, если вы еще не посмотрели на него, один из лучших инструментов — Firebug и некоторые плагины для него: Page Speed и YSlow . Если вы используете CDN, но ваши страницы запрашивают изображения каждый раз из-за отсутствия заголовков кэша, вы упускаете низко висящий фрукт. Сетевая панель Firebug может быстро дать вам быстрое распределение времени загрузки вашей страницы, а Page Speed ​​/ YSlow может предложить несколько полезных советов.

8.8. Работа с javascript/jQuery в Drupal 8. Что такое behaviors?

Для начала давайте вернемся к тому как подключать кастомные javascript файлы к нашей теме. В файле .libraries.yml нужно подключить js:

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
  dependencies:
    — core/jquery
    — core/jquery.once

Важно соблюдать отступы, чтобы он был в два пробела. Итак, мы подключили файл js/custom.js. Но этого не достаточно чтобы у нас работал jQuery. Дело в том что ядро друпала не требует jQuery и jQuery не подключается. Его нужно подключать отдельно:

dependencies:
  — core/jquery

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

dependencies:
  — core/jquery
  — core/jquery.once

Дело в том, что мы будем писать код javascript, который будет вызывать друпалом несколько раз по разным событиям. Поэтому нам будет нужен этот метод .once().

Теперь давайте добавим немного кода в файл custom.js:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      $(context).find(‘.click-me’).once(‘myCustomBehavior’).click(function () {
        alert(‘Hello, World!’);
      });
    }
  };
})(jQuery);

Давайте разберем по порядку, что это все значит.

(function ($) {
 
})(jQuery);

Мы оборачиваем код jQuery в такую конструкцию, потому что jQuery в друпале запускается в режиме .noConflict(). Это нужно для того чтобы использовать знак доллара $, и это не конфликтовало с другими javascript фреймворками Prototype, MooTools. Вряд ли вам придется встретиться с этими фреймворками, jQuery плотно занял лидирующие позиции. Но в эту конструкцию вам придется оборачивать весь jQuery-код.

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
 
    }
  };
})(jQuery);

Вот мы и подошли к behavior’ам. Если вы пишите jQuery код в друпале, вам нужно его во-первых обернуть в function($), а во-вторых в behavior. Имя behavior’а должно быть уникальным, у нас в примере myModuleBehavior, но вам нужно для каждого behavior писать свое имя:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
 
    }
  };
 
  Drupal.behaviors.productPageBehavior = {
    attach: function (context, settings) {
 
    }
  };
})(jQuery);

Используйте camelCase для наименования behavior’ов. Behavior вызывается при загрузке страницы, на каждый AJAX-запрос. Таким образом, когда на сайт подгружается новый контент и встраивается в структуру существующего сайта, то вызывается код из behavior, каждый раз. Это значительно отличается от конструкции:

$(document).ready(function () {
  // Do some fancy stuff.
  // Не используйте такой код в Drupal 8 (да и в Drupal 7 тоже).
});

которая вызывается только один раз при загрузке странице.

Если вы начали использовать behavior’ы и заметили, что у вас происходят странные события с сайтом, например через jQuery блок добавляется несколько раз:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Behavior вызывается несколько раз на странице, не забывайте использовать функцию .once().
      $(‘.inner’).append(‘<p>Test</p>’);
    }
  };
})(jQuery);

При каждом ajax-запросе у вас будет добавлять еще один параграф Test. Поэтому нужно добавить функцию .once():

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Behavior вызывается несколько раз на странице, не забывайте использовать функцию .once().
      $(‘.inner’).once(‘add-paragraph’).append(‘<p>Test</p>’);
    }
  };
})(jQuery);

Еще одна фича behavior это переменная context. Каждый раз когда на сайт добавляется новый контент при загрузке страницы или через ajax, то весь новый контент находится в переменной context. Таким образом нам не нужно проходить все DOM дерево, после каждого ajax запроса, чтобы навесить событие на селектор. Достаточно пройтись только по context’у:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Behavior вызывается несколько раз на странице, не забывайте использовать функцию .once().
      $(context).find(‘.inner’).once(‘add-paragraph’).append(‘<p>Test</p>’);
    }
  };
})(jQuery);

Теперь добавление параграфа написано в правильном друпал стиле. Конечно, вы можете использовать старую запись с document.ready(), но тогда это будет работать только один раз и медленнее чем через behavior’ы.

Если у вас возникнут вопросы по jQuery/javascript или предложения по дополнительным темам пишите в комментариях.

Что такое jQuery — javatpoint

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

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

Что такое jQuery

jQuery — это небольшая, легкая и быстрая библиотека JavaScript. Он кроссплатформенный и поддерживает разные типы браузеров. Его также называют «пиши меньше, делай больше». потому что он берет на себя множество общих задач, для выполнения которых требуется много строк кода JavaScript, и связывает их в методы, которые можно вызывать с помощью одной строки кода, когда это необходимо. Также очень полезно упростить многие сложные вещи из JavaScript, такие как вызовы AJAX и манипуляции с DOM.

• jQuery — это небольшая, быстрая и легкая библиотека JavaScript.
• jQuery не зависит от платформы.
• jQuery означает «меньше пиши, делай больше».
• jQuery упрощает вызовы AJAX и манипуляции с DOM.

Функции jQuery

Ниже приведены важные особенности jQuery.

• Обработка HTML
• Манипуляции с DOM
• Выбор элемента DOM
• CSS-манипуляции
• Эффекты и анимация
• Утилиты
• AJAX
• HTML методы событий
• Анализ JSON
• Расширяемость через плагины

Почему требуется jQuery

Иногда может возникнуть вопрос, зачем нужен jQuery или какая разница при использовании jQuery вместо AJAX / JavaScript? Если jQuery — это замена AJAX и JavaScript? На все эти вопросы вы можете дать следующие ответы.

• Он очень быстрый и расширяемый.
• Это помогает пользователям писать коды функций, связанных с пользовательским интерфейсом, в минимально возможных строках.
• Повышает производительность приложения.
• Можно разрабатывать веб-приложения, совместимые с браузером.
• Он использует в основном новые функции новых браузеров.

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

Вот некоторые из этих компаний:

• Microsoft
• Google
• IBM
• Netflix

Что нужно знать перед тем, как начать изучать jQuery?

Новичкам всегда рекомендуется изучать основы веб-дизайна, прежде чем начинать изучать jQuery. Сначала ему следует изучить HTML, CSS и JavaScript. Но если вы относитесь к техническим специалистам, решать вам.

Если вы новичок и хотите сначала изучить эти предметы.

Что такое jQuery? Изучите самую популярную библиотеку JavaScript

Зачем изучать jQuery?

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

«Пишите меньше, делайте больше».

jQuery, вероятно, самая популярная и расширяемая библиотека JavaScript . Его используют такие крупные компании, как Netflix, Google, IBM и Microsoft.IT обычно является первой библиотекой, которую изучают разработчики JavaScript, потому что:

• Его синтаксис для вызовов AJAX очень прост по сравнению с собственным XmlHttpRequest
• Он предлагает сокращенных решений для общих задач JavaScript, таких как сортировка и фильтрация массивов
• Многие другие библиотеки имеют зависимости jQuery
• Работает на стороне сервера узла

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

Bootstrap, в настоящее время, и WordPress используют jQuery для создания своих компонентов и тем. Многие крупные технологические компании, хотя они и не могут начинать проекты с нуля с jQuery, по-прежнему опираются на те, которые начинались с jQuery. Поэтому неплохо было бы понять jQuery, чтобы включить его в свое резюме.

Синтаксис jQuery

Библиотека jQuery состоит из селекторов, обработчиков событий и помощников обхода DOM. Наряду с Ajax, jQuery делает практически все, что вам нужно, чтобы JavaScript делал для вашей веб-страницы.Есть три самых важных элемента , которые заставляют работать jQuery:

1. $ () или jQuery () : $ () существует с единственной целью — сделать его, поэтому вам не нужно записывать jQuery () каждый раз, когда вы хотите использовать селектор.
2. селектор : так мы выбираем наш элемент DOM (Document Object Model). Это элемент, в который мы хотим внести изменения при загрузке страницы.
3. action () : это функция, которая сообщает модели DOM, что делать.Это может быть прослушиватель событий, это может быть эффект в зависимости от варианта использования.

Вместе простой оператор jQuery записывается как:

Что такое jQuery?

jQuery — это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js.

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

Важные особенности jQuery

• Выбор DOM: jQuery предоставляет селекторы для извлечения элемента DOM на основе различных критериев, таких как имя тега, идентификатор, имя класса css, имя атрибута, значение, n-й дочерний элемент в иерархии и т. Д.
• Манипуляции с DOM: вы можете манипулировать элементами DOM, используя различные встроенные функции jQuery. Например, добавление или удаление элементов, изменение содержимого html, класса css и т. Д.
• Специальные эффекты: вы можете применять специальные эффекты к элементам DOM, такие как отображение или скрытие элементов, постепенное появление или исчезновение видимости, эффект скольжения, анимация и т. Д.
• События: библиотека jQuery включает функции, которые эквивалентны событиям DOM, такие как click, dblclick, mouseenter, mouseleave, blur, keyup, keydown и т. Д. Эти функции автоматически обрабатывают кросс-браузерные проблемы.
• Ajax: jQuery также включает простые в использовании функции AJAX для загрузки данных с серверов без перезагрузки всей страницы.
• Кроссбраузерная поддержка: библиотека jQuery автоматически решает кроссбраузерность, поэтому пользователю не нужно об этом беспокоиться. jQuery поддерживает IE 6.0+, FF 2.0+, Safari 3.0+, Chrome и Opera 9.0+.

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

• Легко изучить: jQuery легко изучить, потому что он поддерживает тот же стиль кодирования JavaScript.
• Пишите меньше, делайте больше: jQuery предоставляет богатый набор функций, которые повышают продуктивность разработчиков за счет написания меньшего количества удобочитаемого кода.
• Отличная документация по API: jQuery предоставляет отличную онлайн-документацию по API.
• Кроссбраузерная поддержка: jQuery обеспечивает отличную кроссбраузерность без написания дополнительного кода.
• Ненавязчивый: jQuery ненавязчив, что позволяет разделить проблемы путем разделения кода html и jQuery.

Узнайте, как загрузить и установить библиотеку jQuery в следующем разделе.

Для чего используется JQuery?

Как изучить jQuery

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

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

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

Что такое jQuery?

jQuery — это библиотека JavaScript, которая упрощает управление содержимым веб-страницы. Эта библиотека предназначена для объединения общих задач JavaScript в короткие методы, которые вы можете использовать в своем коде. Философия jQuery — «меньше пиши, больше делай».

Найди свой матч на тренировочном лагере

• Карьера Карма подойдет вам с лучшими техническими учебными курсами
• Получите эксклюзивные стипендии и подготовительные курсы