http://habrahabr.ru/post/230449/
Перевод статьи «18 Surprises From Reading jQuery's Source Code», David Aragon.
Я люблю jQuery, и хотя я считаю себя продвинутым JavaScript разработчиком, я никогда, до сих пор, не читал исходники jQuery с начала и до конца. Вот несколько вещей, которые я при этом узнал:
Примечание: Я использую синтаксис $.fn.method()
чтобы указать вызов method
на выборке элементов. Например, когда я пишу $.fn.addClass
, это обозначает использования как $(‘div’).addClass(‘blue’)
или $(‘a.active’).addClass(‘in-use’)
. $.fn
это прототип для jQuery оберток элементов.- Вес Sizzle: Sizzle это движок jQuery для выборок из DOM по CSS селекторам. Это то что превращает
$(‘div.active’)
в массив элементов, которыми вы можете оперировать. Я знал, что Sizzle составляет большу́ю часть jQuery, но я был удивлен узнав, насколько он огромен, на самом деле. Это самая большая фича, в плане количества строк, в исходном коде jQuery. По моим расчетам он составляет 22% всей кодовой базы. Это затмевает следующую по величине вещь в jQuery — $.ajax
, который занимает всего лишь 8% кода библиотеки.
- $.grep: Этот метод похож на Underscore метод
_.filter
, он также принимает два аргумента, массив элементов и функцию, и возвращает элементы, которые прошли тест функции.
- Bubbling предостережения: jQuery запрещает всплывание(bubbling) одного типа событий. Это событие
load
. Внутри, jQuery передает специальный флаг noBubble: true
, для всех load
событий, так чтобы image.load события не могли всплывать вверх к объекту window (которые могут ошибочно восприниматься, как window.load).
- Дефолтная скорость анимации: jQuery анимирует элементы изменяя их стили в быстрой последовательности. Каждое из этих быстрых изменений называется “тик(tick)”. Скорость по умолчанию для анимации, это тик каждые 13 миллисекунд, вы можете настроить это, переопределив
jQuery.fx.interval
на свое собственное число.
- $.fn.addClass принимает функцию: Мы обычно передаем строку с именами классов в функцию $.fn.addClass. Но она также принимает функцию. Переданная функция должна возвращать строку с именами классов разделенными пробелом. В качестве бонуса, эта функция принимает индекс элемента из списка элементов, к которым она применяется, что позволяет вам строить умные имена классов.
- То же может и $.fn.removeClass: Этот метод также принимает функцию, как в методе выше. Переданная функция также принимает индекс элемента.
- Псевдо-селектор :empty Этот удобный псевдо-селектор выбирает элементы без дочерних узлов.
- Псевдо-селекторы :lt и :gt: Эти псевдо-селекторы выбирают элементы по их индексу в выборке. Например,
$(‘div:gt(2)’)
возвратит все div'ы, кроме первых трех (индексация начинается с нуля). Если вы передадите в аргумент негативное число, JQuery посчитает обратно с конца выборки.
- $(document).ready() использует обещания(promises): Оказывается, что jQuery использует свой собственный продукт. Внутри, старого доброго
$(document).ready()
используется jQuery deferred, для определения, когда DOM полностью загружен.
- $.type: Я уверен, вы все знакомы с использованием
typeof
, но знали ли вы, что jQuery предоставляет метод .type()
? jQuery версия более разумна, чем нативная браузерная версия. Например, typeof (new Number(3))
возвращает “object,” тогда как $.type(new Number(3))
возвращает “number.” Добавлено: Как ShirtlessKirk указал в комментариях, $.type возвращает тип возврата метода .valueOf(). Так что правильнее сказать, что $.type скажет вам тип возвращаемого значения объекта.
- $.fn.queue: Вы можете получить очередь эффектов элемента, при помощи следующего кода:
$(‘div’).queue()
. Это полезно, если вам нужно узнать, сколько эффектов еще должны быть применены к элементу. Даже более полезно самому добавлять эффекты в очередь. Из доков jQuery:
$( document.body ).click(function() {
$( "div" )
.show( "slow" )
.animate({ left: "+=200" }, 2000 )
.queue(function() {
$( this ).addClass( "newcolor" ).dequeue();
})
.animate({ left: "-=200" }, 500 )
.queue(function() {
$( this ).removeClass( "newcolor" ).dequeue();
})
.slideUp();
});
- Click события запрещены на неактивных (disabled) элементах: jQuery не обрабатывает события клика по отключенным элементам, хорошая оптимизация, которая снимает с вас обязанность проверять это самому.
- $.fn.on принимает объект: А вы знали, что
$.fn.on
принимает объект для подключения к множеству событий одновременно? Пример из доков jQuery:
$( "div.test" ).on({
click: function() {
$( this ).toggleClass( "active" );
}, mouseenter: function() {
$( this ).addClass( "inside" );
}, mouseleave: function() {
$( this ).removeClass( "inside" );
}
});
- $.camelCase: Этот вспомогательный метод превращает тире-строки в camelCase.
- $.active: Вызов
$.active
возвращает количество активных XHR запросов. Это может пригодиться для ограничения количества одновременно активных AJAX вызовов.
- $.fn.parentsUntil / $.fn.nextUntil / $.fn.prevUntil: Я хорошо знаком с методами
.parents()
, .next()
и .prev()
, но я не знал о существовании Until версий этих методов. По существу, эти методы будут отбирать parents/next/prev элементы, пока не дойдут до переданного остановочного элемента.
- Аргументы $.fn.clone: Когда вы клонируете элемент, вы можете также клонировать его data атрибуты и события, передав
true
первым аргументом в метод clone
.
- Другие аргументы $.fn.clone: В дополнение, вы можете клонировать data атрибуты и события дочерних элементов, передав
true
во второй аргумент. Это называется «глубинное клонирование». Второй аргумент по умолчанию равен первому (который, по умолчанию, равен false). Таким образом, если первый аргумент true
и вы хотите, чтобы второй был равен true
, вы можете опустить второй аргумент.
В более ранней версии этой статьи было сказано, что возвращаемое значение функции-аргумента из примера №5 должна быть строка разделенная запятыми. Оказывается, это должна быть строка разделенная пробелами. Спасибо, Джонатан!