Jquery 3.0 final released

Введение

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

Загрузка jQuery с использованием CDN

Вместо того чтобы хранить библиотеку jQuery на своем сервере, можете воспользоваться одной из публично доступных сетей дистрибуции контента (Content Distribution Network — CDN), в которых хранится jQuery. CDN — это географически распределенная серверная сеть, обеспечивающая доставку файлов конечному пользователю с ближайшего сервера.

Существуют две причины, по которым имеет смысл использовать CDN:

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

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

Используя CDN, вы должны быть твердо уверены в надежности ее оператора. Вы должны быть уверены в том, что пользователь получит именно те файлы, на которые рассчитывает, и что служба будет оставаться всегда доступной. Google и Microsoft также предоставляют бесплатные услуги CDN по доставке библиотеки jQuery (равно как и других популярных библиотек JavaScript). Обе компании имеют богатейший опыт бесперебойного предоставления услуг, и от них вряд ли можно ожидать самовольного внесения каких-либо изменений в библиотеку jQuery.

Подробнее о службе Microsoft можно узнать по такому адресу: asp.net/ajaxlibrary/cdn.ashx. Ниже приведен пример подключения библиотеки jQuery через службу Google:

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

Используйте классы для сохранения состояния

Это наиболее простой способ хранить информацию о кусочке html. jQuery отлично манипулирует элементами, основываясь на их классах, так что если вам нужно сохранить информацию о состоянии элемента, то почему бы не добавить дополнительный класс для того, чтобы сохранить его?
А вот и пример. Мы хотим создать разворачивающееся меню. Когда мы нажимаем на кнопку, мы хотим, чтобы панель появилась со slideDown(), если она закрыта и наоборот — исчезла со slideUp(), если открыта. Начнем с HTML:
Очень просто! Мы просто добавили дополнительный класс к элементу-обертке (div), который не имеет иной роли, кроме как сообщить нам состояние элемента. Так что, все что нам нужно — обработчик события «onclick», который производит slideUp() или slideDown() соответствующей панельки, когда кнопка нажата.Это очень простой пример, но вы можете добавлять другие классы для сохранения любого рода информации об элементе или фрагменте HTML.
Однако, во всех чуть более сложных случаях, скорее всего, лучше использовать следующий совет.

Получение значения элемента формы

В jQuery чтение значений элементов , и осуществляется посредством метода .

Например, получим значение элемента :

<input type="text" id="quantity" name="quantity" value="3" />
...
<script>
// сохраним значение в переменную quantity
var quantity = $('#quantity').val();
// выведем значение переменной quantity в консоль
console.log(quantity);
</script>

Метод , если в коллекции присутствует несколько элементов, вернёт значение только первого из них.

<input name="color" type="radio" value="white"> Белый<br>
<input name="color" type="radio" value="green" checked> Зелёный<br>
<input name="color" type="radio" value="brown"> Коричневый<br>
...
<script>
  // получим значение первого элемента в коллекции
  var valColor = $('input').val();
  console.log(valColor); // white
  // получим значение выбранной (checked) радиокнопки
  var valCheckedColor = $( "input:checked" ).val();
  console.log(valCheckedColor); // green
</script>

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

// получить значение выбранной опции select
$('select.color option:checked').val();
// получить значение выбранного select
$('select.size').val();
// получить значение отмеченного (checked) checkbox
$('input:checked').val();
// получить значение установленной радиокнопки
$('input:checked').val();

Если коллекции нет элементов, то метод возвращает значение .

Например, получим значение элемента , имеющего имя :

var valDescription =  $('textarea').val();
if (valDescription !== undefined) {
  console.log('Значение элемента textarea: ' + valDescription);
} else {
  console.log('Элемент textarea с именем description на странице не найден!');
}

Получим значение элемента :

<select id="volume">
  <option>16Gb</option>
  <option>32Gb</option>
</select>
...
<script>
// получим значение выбранной опции элемента select
var volume = $('#volume').val();
// выведем это значение в консоль
console.log(volume);
// выведем значение в консоль при изменении select
$('#volume').change(function(){
  var volume = $(this).val();
  console.log(volume);  
});
</script>

Если элемент имеет множественный выбор (атрибут ), то метод возвратит в качестве результата массив, содержащий значение каждой выбранной опции (). Если ни одна опция не отмечена, то данный метод вернёт в качестве ответа пустой массив (до версии jQuery 3 значение ).

<select id="brands" multiple="multiple">
  <option selected="selected">Acer</option>
  <option>Samsung</option>
  <option selected="selected">Asus</option>
</select>

<script>
// var brands = $('#brands').val() || []; // до версии jQuery 3
var brands = $('#brands').val(); // для версии jQuery 3
// преобразуем массив в строку, используя разделитель ", "
var output = brands.join( ", " );
// выведем строку в консоль
console.log(output);
</script>

Используйте «id» вместо классов, где это возможно

jQuery делает выборку DOM-элементов по классам такой же простой, какой в JavaScript является выборка элементов по «id», в результате чего многие используют классы куда более широко, нежели раньше. Однако, все еще гораздо лучше выбирать элементы по «id», так как jQuery использует для этого стандартный метод любого браузера (getElementById) и не проводит никаких дополнительных манипуляций с DOM, что позволяет достичь хорошей производительности. Насколько хорошей? Давайте проверим.
Я использую предыдущий пример и изменю его таким образом, что каждый элемент «li» будет иметь уникальный класс, добавленный к нему. Затем я выберу в цикле все элементы (каждый по одному разу).
В точности как я и предполагал, браузер неслабо подвис и закончил выполнение только через 5066 миллисекунд (более 5 секунд). Так что я модифицировал код, дав каждому элементу id вместо класса и затем также выбрал каждый в цикле, но уже по id.В этот раз — всего 61 миллисекунду. Примерно в 100 раз быстрее.

Используйте «отложенную загрузку» (lazy loading) для определенного контента для выигрыша в общей скорости и преимуществ для SEO

Еще один способ увеличить скорость загрузки страницы и очистить HTML, который просматривают поисковые роботы — это использовать так называемый «lazy loading» или говоря по-чукотски по-простому — отложенную загрузку целых частей, используя AJAX-запрос после того, как страница уже загружена. Пользователи смогут немедленно увидеть информацию, а поисковики — им и подавно, только информация и нужна.
Мы использовали эту технику на нашем собственном сайте. Те фиолетовые кнопочки наверху страницы подгружают 3 формы, направления и карту Google, которые увеличили бы изначальный вес страницы вдвое. Так что мы просто поместили весь HTML в статичную страницу и использовали функцию load(), чтобы загрузить все это уже после полной загрузки документа. Делается вот так:
Я не стал бы использовать это везде и всегда. Вы всегда должны оценить ситуацию и возможные проблемы, связанные с такой загрузкой. Ведь, как бы там ни было, вы создаете лишние обращения к серверу и именно нужные части страницы могут быть недоступны пользователю в какой-то момент, но при использовании с умом это может быть отличным методом оптимизации.

Legacy versions

1.3.2

ZIP file

If you want to host the files yourself you can download a zip of all the files:

Zip File: jquery.mobile-1.3.2.zip (JavaScript, CSS, and images)

jQuery CDN

JavaScript:

  • Uncompressed: jquery.mobile-1.3.2.js (useful for debugging)
  • Minified and Gzipped: jquery.mobile-1.3.2.min.js (full library, ready to deploy)

CSS:

  • Uncompressed with Default theme: jquery.mobile-1.3.2.css (useful for debugging)
  • Minified and Gzipped with Default theme: jquery.mobile-1.3.2.min.css (full library, ready to deploy)
  • Uncompressed structure without a theme: jquery.mobile-1.3.2.css (useful for theme development)
  • Minified and Gzipped structure without a theme: jquery.mobile-1.3.2.min.css (to be used with custom theme, ready to deploy)

Copy-and-Paste snippet for jQuery CDN hosted files:

1

2

3

Microsoft CDN

Microsoft CDN – jQuery Mobile

1.2.1

ZIP file

If you want to host the files yourself you can download a zip of all the files:

Zip File: jquery.mobile-1.2.1.zip (JavaScript, CSS, and images)

jQuery CDN

JavaScript:

  • Uncompressed: jquery.mobile-1.2.1.js (useful for debugging)
  • Minified and Gzipped: jquery.mobile-1.2.1.min.js (full library, ready to deploy)

CSS:

  • Uncompressed with Default theme: jquery.mobile-1.2.1.css (useful for debugging)
  • Minified and Gzipped with Default theme: jquery.mobile-1.2.1.min.css (full library, ready to deploy)
  • Uncompressed structure without a theme: jquery.mobile-1.2.1.css (useful for theme development)
  • Minified and Gzipped structure without a theme: jquery.mobile-1.2.1.min.css (to be used with custom theme, ready to deploy)

Copy-and-Paste snippet for jQuery CDN hosted files:

1

2

3

Microsoft CDN

Microsoft CDN – jQuery Mobile

1.1.2

ZIP file

If you want to host the files yourself you can download a zip of all the files:

Zip File: jquery.mobile-1.1.2.zip (JavaScript, CSS, and images)

jQuery CDN

JavaScript:

  • Uncompressed: jquery.mobile-1.1.2.js (useful for debugging)
  • Minified and Gzipped: jquery.mobile-1.1.2.min.js (full library, ready to deploy)

CSS:

  • Uncompressed with Default theme: jquery.mobile-1.1.2.css (useful for debugging)
  • Minified and Gzipped with Default theme: jquery.mobile-1.1.2.min.css (full library, ready to deploy)
  • Uncompressed structure without a theme: jquery.mobile-1.1.2.css (useful for theme development)
  • Minified and Gzipped structure without a theme: jquery.mobile-1.1.2.min.css (to be used with custom theme, ready to deploy)

Copy-and-Paste snippet for jQuery CDN hosted files:

1

2

3

Microsoft CDN

Microsoft CDN – jQuery Mobile

1.0.1

ZIP file

If you want to host the files yourself you can download a zip of all the files:

Zip File: jquery.mobile-1.0.1.zip (JavaScript, CSS, and images)

jQuery CDN

JavaScript:

  • Uncompressed: jquery.mobile-1.0.1.js (useful for debugging)
  • Minified and Gzipped: jquery.mobile-1.0.1.min.js (full library, ready to deploy)

CSS:

  • Uncompressed with Default theme: jquery.mobile-1.0.1.css (useful for debugging)
  • Minified and Gzipped with Default theme: jquery.mobile-1.0.1.min.css (full library, ready to deploy)
  • Uncompressed structure without a theme: jquery.mobile-1.0.1.css (useful for theme development)
  • Minified and Gzipped structure without a theme: jquery.mobile-1.0.1.min.css (to be used with custom theme, ready to deploy)

Copy-and-Paste snippet for jQuery CDN hosted files:

1

2

3

Microsoft CDN

Microsoft CDN – jQuery Mobile

Essential Git

As the source code is handled by the Git version control system, it’s useful to know some features used.

Cleaning

If you want to purge your working directory back to the status of upstream, the following commands can be used (remember everything you’ve worked on is gone after these):

git reset --hard upstream/master
git clean -fdx

Rebasing

For feature/topic branches, you should always use the flag to , or if you are usually handling many temporary «to be in a github pull request» branches, run the following to automate this:

git config branch.autosetuprebase local

(see for more information)

Handling merge conflicts

If you’re getting merge conflicts when merging, instead of editing the conflicted files manually, you can use the feature
. Even though the default tool looks awful/old, it’s rather useful.

The following are some commands that can be used there:

  • — automerge as much as possible
  • — jump to next merge conflict
  • — change the order of the conflicted lines
  • — undo a merge
  • — mark a block to be the winner
  • — mark a line to be the winner
  • — save
  • — quit

Инструкция по работе

Из подробной пошаговой инструкции, приведенной ниже, вы сможете узнать, как скачать и установить фреймворк на ПК.

Скачиваем программу

  • js. – включает все нужные библиотеки, которые могут потребоваться для разработки приложений и сайтов. Данный файл содержит несжатый код JavaScript.
  • min.js – используется для развертывания приложений и веб-страниц для пользователей. Файл включает тот же код, что и предыдущий, но уже в более сжатом формате.

Как пользоваться

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

Нет необходимости подключать фреймворк именно с локального диска. В качестве альтернативы можно воспользоваться сетью Content Delivery Networks. Сделать это можно, вставив команду «https://code.jquery.com/название-библиотеки» вместо названия файла.

Правильное подключение jQuery в WordPress

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Ошибка не в том, что не будет работать,а в том, что в WordPress существует специальный программный метод добавления скриптов на страницу — это функции:

  • wp_register_script()
  • wp_enqueue_script()
  • wp_deregister_script()
  • и т.д.

Такой метод необходим для предотвращения конфликтов при подключении одного и того же скрипта разными плагинами. И может упростить работу при оптимизации загрузки js файлов для ускорения загрузки сайта. Так например, если все скрипты подключены «правильно», то их можно программно объединить в один файл и отдавать браузеру в сжатом виде. Ну и в конце концов — это правильно, когда есть порядок и общая логика (стандарт), ведь если все сделано по стандарту, то при обновлении и изменении функций именно единый стандарт поможет быстро и незаметно перейти к обновлениям.

Это использование вышеупомянутой функции wp_enqueue_script(). Такое подключение обезопасит вас от конфликтов с подключением одного и того же скрипта в разных плагинах (скрипт будет подключен один раз):

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method(){
	wp_enqueue_script( 'jquery' );
}

Вставлять этот код нужно в файл темы functions.php. После того, как скрипт сработает, в <head> части документа появится следующая строка:

<script type='text/javascript' src='http://wptest.ru/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>

Используйте служебные функции jQuery

jQuery — это не только ослепительные эффекты. Создатель наделил его некоторыми действительно полезными методами, которые могут восполнить пробелы в репертуаре JavaScript:jQuery utilitiesВ частности, кросс-браузерная поддержка общих функций для работы с массивами (в IE7 нет даже метода indexOf()!). jQuery содержит методы для итерации, фильтрации, клонированию, соединению и удалению дубликатов из массивов.
К другим труднореализуемым вещам в JavaScript относится, к примеру, задача, где нужно получить выбранный элемент из выпадающего списка. В старом добром JavaScript нам пришлось бы получить элемент «select», используя getElementById, получить дочерние элементы как массив и «пробежаться» по ним в итерации, проверяя каждый, был он выбран или нет. jQuery упрощает подобные дела:
Это действительно заслуживает некоторого времени, проведенного в изучении документации jQuery на официальном сайте и в углублении в некоторые менее документированные возможности.

CDN при подключении jQuery в WordPress

  1. Файл отдается в сжатом виде и весит меньше.
  2. Если посетитель уже заходил на сайт где jQuery подключался также, то в его кэше уже есть этот скрипт и он вообще не будет загружаться, при посещении вашего сайта. Читал в сети аналитическо-статистическую статью на эту тему — порядка 15-20% сайтов используют подключение CDN Google для jQuery и этот показатель растет.
  3. Файл подгружается в отдельный поток.

Чтобы подключить jQuery с CDN Google, нужно сначала отметить уже зарегистрированный в WordPress скрипт jQuery и зарегистрировать его еще раз с новым адресом. Делается это путем добавления в functions.php такого кода:

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
	// отменяем зарегистрированный jQuery
	// вместо "jquery-core", можно вписать "jquery", тогда будет отменен еще и jquery-migrate
	wp_deregister_script( 'jquery-core' );
	wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
	wp_enqueue_script( 'jquery' );
}

В результате мы получим такие строки в head части документа:

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

Здесь jquery-core означает, что заменяется ссылка на сам скрипт jQuery и не затрагивается дополнительный скрипт jqury-migrate.js, который нужен для перехода к версии jQuery 1.9.x, с ранних версий.

Подключение jquery-migrate плагина означает, что если у вас есть ошибки несовместимости с версией 1.9.x (т.е. ваш код был написан под более ранние версии), jQuery продолжит работать, а ошибки можно будет исправить по мере выявления.

Если jquery-migrate.js не нужен, а нужен только jQuery, то используйте такой код для подключения jQuery:

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
	// отменяем зарегистрированный jQuery
	wp_deregister_script('jquery-core');
	wp_deregister_script('jquery');

	// регистрируем
	wp_register_script( 'jquery-core', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', false, null, true );
	wp_register_script( 'jquery', false, array('jquery-core'), null, true );

	// подключаем
	wp_enqueue_script( 'jquery' );
}    

Тут отменив мы автоматически отменяем привязку mirgate к jQuery. В результате получим только такую строку:

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

true в конце значит, что скрипт, по возможности, будет подключен в подвал сайта.

Если есть другие скрипты которые подключаются в head часть и зависят от jQuery, то несмотря на последний аргумент true, jquery все равно будет подключен в head часть документа, что логично…

Пример ниже показывает, как подключить jQuery той версии, которая используется в WordPress, но с сервиса CDN:

add_action( 'wp_enqueue_scripts', 'my_scripts_method', 99 );
function my_scripts_method() {
	// получаем версию jQuery
	wp_enqueue_script( 'jquery' );
	// для версий WP меньше 3.6 'jquery' нужно поменять на 'jquery-core'
	$wp_jquery_ver = $GLOBALS->registered->ver;
	$jquery_ver = $wp_jquery_ver == '' ? '1.11.0' : $wp_jquery_ver;

	wp_deregister_script( 'jquery-core' );
	wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/'. $jquery_ver .'/jquery.min.js' );
	wp_enqueue_script( 'jquery' );
}

Статьи до этого: jQuery

  • Символ табуляции (\t) в textarea при нажатии TAB на клавиатуре
  • Динамический архив блога с использованием jQuery (Ajax)
  • Кнопка «Наверх» с плавным прокручиванием

Статьи до этого: Оптимизация

  • Отключаем создание копий картинок в WordPress
  • SHORTINIT константа: WordPress среда с минимальной нагрузкой

Статьи до этого: Теория WordPress (базовые знания)

  • Must-Use плагины в WordPress
  • API настроек (опций)
  • SHORTINIT константа: WordPress среда с минимальной нагрузкой

Quick start

Insert the following line on your HTML page and you are done!

<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

HTML

This is the official jQuery Tools UI library and
after the inclusion you will have the following tools available:

  1. jQuery

The tools will be loaded
with maximum
performance no matter where your user is located on the
globe. Without the jQuery library, the file size is
only 4.45 Kb when gzipping is enabled on
the server-side. If you already have jQuery included on your page,
you can simply remove it and use only the above script
src
statement.

Please note that this global content delivery network
is completely free. You can use it freely in any
website including production environments. This network has been
kindly offered for all jQuery Tools users
by Max
CDN. Respect to them!

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

Как подружить Electron и Webix. Часть 2. Создаем приложение со своим View

Tutorial

Введение

В предыдущей статье мы рассмотрели с Вами вопрос интеграции фреймворка «Webix» в «Electron» и создание на основе этих фреймворков простого GUI приложения. Цель данной статьи является дальнейшую развитие вопроса интеграции в GUI интерфейс, построенный с помощью «Electron» и «Webix» других «JavaScript» фреймворков. Все элементы GUI реализованные в «Webix» характеризуются параметром «view». В зависимости от значения этого параметра будет отображаться тот или иной GUI элемент. Количество типов элементов «view», которые позволяет создавать «Webix» перекрывают порядка 90% задач при реализации интерфейса. Оставшиеся 10% это как раз тот случай, когда необходимо осуществить интеграцию либо ранее написанного кода либо фреймворка (библиотеки), которые в явном виде не поддерживаются в «Webix». Для осуществления интеграции со сторонними фреймворками(библиотеки) создадим вместе с Вами свой «view» элемент «Webix».

Постановка задачи

Создать GUI приложение «Electron+Webix», которое будет строить график функции вида «y=a*sin(b)+c» с возможностью изменения параметров функции «a, b и c» с динамической перерисовкой графика.

Оцените статью
Рейтинг автора
5
Материал подготовил
Андрей Измаилов
Наш эксперт
Написано статей
116
Добавить комментарий