30 бесплатных библиотек и плагинов jquery-анимации

5 — $(‘#box’).addClass(‘wrap’);

jQuery обеспечивает удобный API для модификации имени класса для набора элементов.

Модерн

document.querySelector('#box').classList.add('wrap');

Новая техника использует новый API для добавления, удаления и переключения класса , , и ).

var container = document.querySelector('#box');
 
container.classList.add('wrap');
container.classList.remove('wrap');
container.classList.toggle('wrap');

Наследие

box = document.getElementById('box'),
 
    hasClass = function (el, cl) {
        var regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)');
        return !!el.className.match(regex);
    },
 
    addClass = function (el, cl) {
        el.className += ' ' + cl;
    },
 
    removeClass = function (el, cl) {
        var regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)');
        el.className = el.className.replace(regex, ' ');
    },
 
    toggleClass = function (el, cl) {
        hasClass(el, cl) ? removeClass(el, cl) : addClass(el, cl);
 
    };
 
addClass(box, 'drago');
removeClass(box, 'drago');
toggleClass(box, 'drago'); // Если элемент не имеет класса 'drago', добавляем его.

Обратная совместимость требует достаточно много действий.

Ожидание готовности DOM-модели

Библиотека jQuery предлагает свой способ регистрации события загрузки страницы. Соответствующий код представлен в примере ниже:

В этом сценарии мы передаем переменную document функции $() в качестве аргумента и вызываем метод ready(), передавая ему функцию, которую хотим выполнить после окончания загрузки и готовности DOM к работе. Можете поместить этот элемент script в любое место документа, будучи уверенным в том, что jQuery не допустит преждевременного выполнения функции.

Функция function(), передаваемая методу ready(), будет вызвана лишь после загрузки документа, но не раньше, чем завершится построение DOM.

Часто совершают ошибку, опуская в этой магической формуле ключевое слово function, определяющее следующий за ним блок инструкций как анонимную функцию, и передавая методу ready() простую последовательность инструкций JavaScript. Это не сработает. Инструкции будут выполнены браузером сразу же после их синтаксического разбора, а не после того, как DOM-дерево будет готово к использованию. В этом позволяет убедиться следующий пример:

Здесь метод ready() вызывается дважды: первый раз — с использованием ключевого слова function, а второй — с передачей обычной инструкции JavaScript в качестве аргумента. В обоих случаях вызывается функция countImgElements(), возвращающая общее количество элементов img в DOM. Загрузив документ, вы получите в окне консоли следующий результат:

Как видите, выполнение инструкции без ключевого слова function происходит при загрузке документа еще до того, как браузер обнаружит в нем элементы img и создаст соответствующие DOM-объекты.

Использование альтернативной нотации

При желании можете передать свою функцию в качестве параметра непосредственно $-функции jQuery. При таком способе записи вызова результат будет тем же, что и в случае вызова $(document).ready(). Описанный подход используется в примере ниже:

Задержка срабатывания события ready

Используя метод holdReady(), можно управлять моментом срабатывания события ready. Это может пригодиться в тех случаях, когда вы хотите использовать динамическую загрузку внешних ресурсов (эффективный, но пока что редко применяемый прием). Метод holdReady() следует вызывать дважды: до срабатывания события ready и когда DOM достигнет состояния готовности. Пример использования этой методики приведен в примере ниже:

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

Наконец, мы используем метод setTimeout() для вызова функции по истечении 5 секунд. Эта функция содержит вызов метода holdReady() с аргументом false, указывающим jQuery на необходимость освобождения события ready для его последующей обработки. Конечный результат состоит в том, что событие ready срабатывает с задержкой в 5 секунд. В сценарий включены также отладочные инструкции, которые после загрузки документа в браузер выводят на консоль следующую информацию:

Метод holdReady() можно вызывать многократно, но количество вызовов с аргументом true должно совпадать с количеством вызовов с аргументом false, прежде чем будет запущено событие ready.

jQuery UI 1.8

uncompressedminified

Themes

baseblack-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader

Previous Releases

• jQuery UI 1.8.23 — uncompressed, minified, theme
• jQuery UI 1.8.22 — uncompressed, minified, theme
• jQuery UI 1.8.21 — uncompressed, minified, theme
• jQuery UI 1.8.20 — uncompressed, minified, theme
• jQuery UI 1.8.19 — uncompressed, minified, theme
• jQuery UI 1.8.18 — uncompressed, minified, theme
• jQuery UI 1.8.17 — uncompressed, minified, theme
• jQuery UI 1.8.16 — uncompressed, minified, theme
• jQuery UI 1.8.15 — uncompressed, minified, theme
• jQuery UI 1.8.14 — uncompressed, minified, theme
• jQuery UI 1.8.13 — uncompressed, minified, theme
• jQuery UI 1.8.12 — uncompressed, minified, theme
• jQuery UI 1.8.11 — uncompressed, minified, theme
• jQuery UI 1.8.10 — uncompressed, minified, theme
• jQuery UI 1.8.9 — uncompressed, minified, theme
• jQuery UI 1.8.8 — uncompressed, minified, theme
• jQuery UI 1.8.7 — uncompressed, minified, theme
• jQuery UI 1.8.6 — uncompressed, minified, theme
• jQuery UI 1.8.5 — uncompressed, minified, theme
• jQuery UI 1.8.4 — uncompressed, minified, theme
• jQuery UI 1.8.3 — uncompressed, minified, theme
• jQuery UI 1.8.2 — uncompressed, minified, theme
• jQuery UI 1.8.1 — uncompressed, minified, theme
• jQuery UI 1.8.0 — uncompressed, minified, theme

jQuery UI 1.10

uncompressedminified

Themes

black-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader

Previous Releases

• jQuery UI 1.10.3 — uncompressed, minified, theme
• jQuery UI 1.10.2 — uncompressed, minified, theme
• jQuery UI 1.10.1 — uncompressed, minified, theme
• jQuery UI 1.10.0 — uncompressed, minified, theme
• jQuery UI 1.10.0-rc.1 — uncompressed, minified, theme
• jQuery UI 1.10.0-beta.1 — uncompressed, minified, theme

Делайте селекторы проще.

До недавнего времени получение элементов DOM в jQuery было достаточно сложным процессом, связанным с разбором строки селектора, циклом JavaScript и встроенными функциями API (такими как , и ). Но теперь все браузеры поддерживают функцию , которая воспринимает селекторы CSS, что существенно улучшает производительность.

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

$('li a')	// Отлично, но медленно
$('li.selected a')	// Лучше
$('#elem')	// Самый лучший вариант

Выбор по id — самый быстрый вариант. Если вам нужно выбрать класс, предварите его имя тегом – . Такая оптимизация существенно влияет на процессы в старых браузерах и мобильных устройствах.

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

var buttons = $('#navigation a.button');

// Некоторые предпочитают использовать префикс $ в именах переменных jQuery:
var $buttons = $('#navigation a.button');

Еще один момент, о котором следует помнить, заключается в том, что jQuery предоставляет вам большой набор дополнительных селекторов (таких как , , ), которые не являются селекторами CSS. В результате, если вы используете их, то библиотека не задействует функцию . Чтобы оптимизировать процесс следует сначала выбрать элементы, а затем фильтровать их:

$('a.button:animated');	// Не используется querySelectorAll()
$('a.button').filter(':animated');	// В данном варианте используется querySelectorAll()

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

Перебор текущих элементов (.each)

Синтаксис метода each (пременяется только к выбранным элементам):

.each(function);
// function - функция, которая будет выполнена для каждого элемента текущего объекта

Разберём, как работает метод на следующем примере (переберём элементы ):

<div id="id1"></div>
<div id="id2">
  <p></p>
  <hr>
  <p></p>
  <div id="id3"></div>
</div>

<script>
// после загрузки DOM страницы выполнить
$(function(){

  // перебрать элементы div на странице
  $('div').each(function (index, element) {
    // index (число) - текущий индекс итерации (цикла)
      // данное значение является числом
      // начинается отсчёт с 0 и заканчивается количеству элементов в текущем наборе минус 1
    // element - содержит DOM-ссылку на текущий элемент

    console.log('Индекс элемента div: ' + index + '; id элемента = ' + $(element).attr('id')); 
  });

});

// Результат:
  // Индекс элемента div: 0; id элемента = id1
  // Индекс элемента div: 1; id элемента = id2
  // Индекс элемента div: 2; id элемента = id3

</script>

В вышеприведённом примере метод each использует текущий набор (элементы, выбранные посредством селектора ). В качестве обработчика метода each всегда выступает функция, которая будет выполнена для каждого элемента текущего набора (в данном случае для каждого элемента ). Данная функция имеет 2 необязательных параметра. Один из них (index) представляет собой порядковый номер текущей итерации, а второй (element) — DOM ссылку на текущий элемент. Кроме этого внутри функции доступно ключевое слово , которое также как и второй параметр, содержит DOM-ссылку на текущий элемент.

Например, выведем в консоль значение атрибута для всех элементов на странице:

$('a').each(function() {
  console.log($(this).attr('href'));
});

Например, выведем в консоль все внешние ссылки, расположенные на странице:

$('a').each(function() {
  var link = $(this).attr('href');
  if ((link.indexOf('http://') == 0) || (link.indexOf('https://') == 0)) {
    console.log('href ссылки = ' + link);
  }
});

// Если на странице расположены следующие ссылки:
  // <a href="https://www.yandex.ru/">Яндекс</a>
  // <a href="post/2898">Как работает JavaScript?</a>
  // <a href="http://getbootstrap.com/">Bootstrap</a>
// То в консоли увидим следующий результат:
  // https://www.yandex.ru/
  // http://getbootstrap.com/

Например, рассмотрим, как организовать цикл each по элементам DOM, имеющих класс (переберём все элементы одного класса).

<!-- HTML-код -->
<div class="name">Raspberry pi</div>
<div>single-board compute</div>
<div class="name">Intel Galileo Gen2</div>
<div class="price">19$</div>
<div class="name">Pine A64 Plus</div>

<script>
// с помощью функции jQuery.each ($.each)
$.each($('.name'),function(index,data) {
  console.log('Порядковый номер: ' + index + ' ; Содержимое: ' +$(data).text());
});

// с помощью метода jQuery .each 
$('.name').each(function(index,data) {
  console.log('Порядковый номер: ' + index + ' ; Содержимое: ' +$(data).text());
});

// Получим следующий ответ:
//   Порядковый номер: 0 ; Содержимое: Raspberry pi
//   Порядковый номер: 1 ; Содержимое: Intel Galileo Gen2
//   Порядковый номер: 2 ; Содержимое: Pine A64 Plus
</script>

Например, разберём, как перебрать все элементы на странице.

<script>
$('*').each(function() {
  console.log(this);
});
</script>

Например, выведем значение всех элементов на странице.

$('input').each(function() {
  console.log($(this).val());
});

Например, переберём все дочерние элементы, расположенные в с (each children).

<!-- HTML список -->
<ul id="myList">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<script>
$('ul#myList').children().each(function(){
  console.log($(this).text());
});

// Результат:
//   HTML
//   CSS
//   JavaScript
</script>

Рассмотрим способ, с помощью которого можно определить последний индекс (элемент) в методе jQuery .

// выбираем элементы 
var myList =  $('ul li');
// определяем количество элементом в выборке
var total = myList.length;
// осуществляем перебор выбранных элементов
myList.each(function(index) {
  if (index === total - 1) {
    // это последний элемент в выборке
  }
});

Получение библиотеки jQuery UI

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

Выбор темы оформления

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

На сайте jQuery UI можно воспользоваться услугами специального приложения — настройщика тем (Themeroller), но кроме того существует целая галерея предопределенных тем, полностью готовых к использованию, из которых можно выбрать ту, которая вас больше всего устраивает, и тем самым облегчить себе жизнь.

Начните с посещения сайта jqueryui.com и щелкните на кнопке Themes. В результате откроется страница ThemeRoller, отображающая виджеты jQuery UI и расположенную слева от них панель настроек, с помощью которой можно установить параметры темы оформления, как показано на рисунке:

Если у вас уже используется определенный визуальный стиль, которого вы должны придерживаться, и вы хотите, чтобы визуальный интерфейс средств JQuery UI согласовывался с остальной частью сайта или приложения, то вкладка Roll Your Own (которая выбирается по умолчанию) — это как раз то, что нужно. Можно изменить любой аспект оформления с помощью набора стилей CSS, который используется библиотекой jQuery UI.

Чтобы получить одну из готовых тем, следует перейти на вкладку Gallery. На момент написания этих строк галерея включала 24 темы, охватывающие широкий спектр вариантов цветового оформления — от приглушенных и нежных тонов до ярких и вызывающих. При выполнении щелчков на темах галереи внешний вид виджетов, отображаемых на остальной части страницы, будет соответствующим образом обновляться, позволяя вам оценить, как может выглядеть приложение:

Используемая для jQuery UI стандартная тема носит название UI lightness, но эта тема недостаточно контрастна, и поэтому я буду использовать тему Sunny, которая выглядит немного лучше. Единственное, что от вас сейчас требуется — это запомнить название темы, которая вас устраивает.

Создание настраиваемого загрузочного архива библиотеки jQuery UI

Выбрав для себя определенную тему оформления, можете приступить к созданию собственного варианта загрузки библиотеки jQuery UI. Щелкните на кнопке Download в верхней части страницы для перехода на страницу Download Builder. Вы увидите список компонентов jQuery UI, разбитых на четыре функциональные группы: UI Core, Interactions, Widgets и Effects.

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

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

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

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

У вас также есть возможность выбрать конкретную версию библиотеки jQuery UI, которая должна быть включена в загрузочный архив. Вам потребуется загрузить стабильную (Stable) версию, которая работает со всеми версиями библиотеки jQuery, начиная с версии 1.3.2.

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

jQuery UI 1.11

uncompressedminified

Themes

black-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader

Previous Releases

• jQuery UI 1.11.3 — uncompressed, minified, theme
• jQuery UI 1.11.2 — uncompressed, minified, theme
• jQuery UI 1.11.1 — uncompressed, minified, theme
• jQuery UI 1.11.0 — uncompressed, minified, theme
• jQuery UI 1.11.0-beta.2 — uncompressed, minified, theme
• jQuery UI 1.11.0-beta.1 — uncompressed, minified, theme

Список функций

Название	Описание
$.contains()	Проверяет, содержится ли один элемент страницы внутри  другого.
$.extend()	Объединяет два или более javascript-объекта.
$.globalEval()	Выполняет заданный скрипт в глобальной области  видимости.
$.grep()	Ищет в заданном массиве элементы удовлетворяющие  условиям.
$.inArray()	Ищет в заданном массиве конкретный элемент и  возвращает его индекс (или -1 в случае отсутствия  элемента).
$.isArray()	Проверяет, является ли заданный элемент массивом.
$.isEmptyObject()	Проверяет наличие (точнее отсутствие) содержимого в  заданном объекте.
$.isFunction()	Проверяет, является ли заданный элемент функцией.
$.isNumeric()	Проверяет, является ли заданный элемент числом.
$.isPlainObject()	Проверяет, является ли заданный элемент  пользовательским объектом (задан  средствами «{}» или «new Object»).
$.isWindow()	Проверяет, является ли заданный элемент объектом типа  window.
$.isXMLDoc()	Проверяет, находится ли DOM-объект внутри XML-документа (или сам является XML-документом).
$.makeArray()	Конвертирует массиво подобные объекты, в массивы.
$.map()	Выполняет заданную функцию для каждого элемента  массива или каждого поля объекта в отдельности.
$.merge()	Объединяет содержимое нескольких массивов, записывая  его в первый из них.
$.noop()	Пустая функция.
$.parseJSON()	Конвертирует строку с json-данными в javascript-объект.
$.parseXML()	Конвертирует строку xml в xml-документ.
$.proxy()	По заданной функции, создает другую, внутри которой  переменная this будет равна заданному значению.
$.trim()	Удаляет пробелы из начала и конца заданной строки.
$.type()	Определяет класс заданного объекта (речь идет о  внутренних классах javascript: string, boolean и т.д.).
$.unique()	Сортирует заданный массив с DOM-элементами,  выстраивая их в порядке расположения в DOM, а так же  удаляя повторения.

Transforming JSON

Frequently when working with data structures such as JSON, we might want to transform one data structure into another. This can be useful when working with large JSON structures when we are only interested in several properties or values.

In this example, we’ll use some JSON from Wikipedia which describes a list of page entries:

For our purposes, we’re only really interested in the title and extract of each page entry. So let’s take a look at how we can transform this document:

Let’s take a look at the command in more detail to understand it properly:

• First, we begin by accessing the pages array and passing that array into the next filter in the command via a pipe
• Then we iterate over this array and pass each object inside the pages array to the map function, where we simply create a new array with the contents of each object
• Next, we iterate over this array and for each item create an object containing two keys page_title and page_description
• The .title and .extract references are used to populate the two new keys

This gives us a nice new lean JSON structure:

Invoking jq

jq filters run on a stream of JSON data. The input to jq is
parsed as a sequence of whitespace-separated JSON values which
are passed through the provided filter one at a time. The
output(s) of the filter are written to standard out, again as a
sequence of whitespace-separated JSON data.

Note: it is important to mind the shell’s quoting rules. As a
general rule it’s best to always quote (with single-quote
characters) the jq program, as too many characters with special
meaning to jq are also shell meta-characters. For example, will fail on most Unix shells because that will be the same
as , which will generally fail because . When using the Windows command shell (cmd.exe) it’s
best to use double quotes around your jq program when given on the
command-line (instead of the option), but then
double-quotes in the jq program need backslash escaping.

You can affect how jq reads and writes its input and output
using some command-line options:

—version:

Output the jq version and exit with zero.

—slurp/-s:

Instead of running the filter for each JSON object in the
input, read the entire input stream into a large array and run
the filter just once.

—online-input/-I:

When the top-level input value is an array produce its elements
instead of the array. This allows on-line processing of
potentially very large top-level arrays’ elements.

—raw-input/-R:

Don’t parse the input as JSON. Instead, each line of text is
passed to the filter as a string. If combined with ,
then the entire input is passed to the filter as a single long
string.

—null-input/-n:

Don’t read any input at all! Instead, the filter is run once
using as the input. This is useful when using jq as a
simple calculator or to construct JSON data from scratch.

—compact-output / -c:

By default, jq pretty-prints JSON output. Using this option
will result in more compact output by instead putting each
JSON object on a single line.

—color-output / -C and —monochrome-output / -M:

By default, jq outputs colored JSON if writing to a
terminal. You can force it to produce color even if writing to
a pipe or a file using , and disable color with .

—ascii-output / -a:

jq usually outputs non-ASCII Unicode codepoints as UTF-8, even
if the input specified them as escape sequences (like
«\u03bc»). Using this option, you can force jq to produce pure
ASCII output with every non-ASCII character replaced with the
equivalent escape sequence.

—unbuffered

Flush the output after each JSON object is printed (useful if
you’re piping a slow data source into jq and piping jq’s
output elsewhere).

—sort-keys / -S:

Output the fields of each object with the keys in sorted order.

—raw-output / -r:

With this option, if the filter’s result is a string then it
will be written directly to standard output rather than being
formatted as a JSON string with quotes. This can be useful for
making jq filters talk to non-JSON-based systems.

-f filename / —from-file filename:

Read filter from the file rather than from a command line, like
awk’s -f option. You can also use ‘#’ to make comments.

-e / —exit-status:

Sets the exit status of jq to 0 if the last output values was
neither nor , 1 if the last output value was
either or , or 4 if no valid result was ever
produced. Normally jq exits with 2 if there was any usage
problem or system error, 3 if there was a jq program compile
error, or 0 if the jq program ran.

—arg name value:

This option passes a value to the jq program as a predefined
variable. If you run jq with , then is
available in the program and has the value .

—argfile name filename:

Применение шаблона

Для объединения шаблона с данными используется метод tmpl(). При этом вы указываете данные, которые должны использоваться, и применяемый к ним шаблон. Пример использования этого метода приведен ниже:

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

Метод tmpl() возвращает стандартный объект jQuery, который содержит элементы, полученные из шаблона. В данном случае это приводит к набору элементов div, каждый из которых содержит элементы img, label и input, сконфигурированные для одного из объектов, содержащихся в массиве данных. Для вставки всего набора в качестве дочернего элемента в элемент row1 используется метод appendTo(). Результат представлен на рисунке:

Модификация результата

Полученный результат не совсем нас устраивает, поскольку все элементы, соответствующие различным цветам, отображаются в одном ряду. Но поскольку мы имеем дело с объектом jQuery, расположить элементы так, как нам надо, не составит большого труда. В примере ниже показано, как это можно сделать, воздействуя на результат работы метода tmpl():

В этом примере методы slice() и end() используются для сужения и расширения набора выбранных элементов, а метод appendTo() — для добавления поднаборов элементов, сгенерированных с помощью шаблона, в различные ряды.

Обратите внимание: для возврата набора в исходное состояние, в котором он находился до применения методов slice() и appendTo(), метод end() пришлось вызывать два раза подряд. Ничего противозаконного в этом нет, и я охотно использую метод end(), чтобы выполнить необходимые действия в рамках одной инструкции, но последовательность end().end() не вызывает у меня восторга

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

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

Изменение способа предоставления входных данных

Другой возможный подход заключается в изменении способа передачи данных методу tmpl(). Соответствующий пример приведен ниже:

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

Использование вложенных шаблонов

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

В этом примере шаблон разбит на две части. Первая из них, шаблон flowerTmpl, вызывается для каждого элемента массива данных. В свою очередь, этот шаблон вызывает шаблон inputTmpl для создания элементов input. Вызов второго шаблона осуществляется с помощью дескриптора `tmpl`. В этом вызове используются три аргумента. Первые два — это текущий элемент данных и объект options; эти аргументы заключаются в круглые скобки. Третий аргумент — это вызываемый шаблон. Его можно задавать либо jQuery-селектором (что и сделано выше), либо переменной или функцией, определенной в сценарии.

Github.com отказывается от использования jQuery и переходит на чистый JavaScript

Сегодня Mislav Marohnić объявил о том, что разработчики Github избавились от jQuery на фронтенде GitHub.com. Казалось бы, в самом этом факте нет ничего примечательного, если бы не один интересный момент.
Проблема выбора нового фреймворка для фронтенда была решена радикально — решено было обойтись без фреймворков в принципе. Вместо них были использованы следующие средства:

• querySelectorAll (который предположительно был вдохновлен когда-то именно jQuery),
• fetch для работы с AJAX,
• delegated-events для обработки событий,
• полифиллы для работы с DOM,
• пользовательские элементы (Custom Elements), которые сейчас на подъеме.

Помимо Custom Elements, ничего другого из Web Components было решено не использовать. Разработчики присматривались к Shadow DOM и были бы не против прибегнуть к нему — однако, в силу того, что на полифиллах скорость поиска в DOM оставляет желать лучшего, им пришлось пока отложить эту затею.
Зачем разработчикам в принципе потребовалось все это сделать? По их словам, для того, чтобы «отдавать» посетителям меньше килобайт, иметь возможность использовать более явно выраженный синтаксис для выполнения манипуляций с DOM, а также ради возможности использовать библиотеку Flow.JS для статического анализа типов. По словам разработчиков, процесс ухода с jQuery занял годы.